如何更改ng视图

我正在尝试执行一个Angular JS应用程序，但我有一些问题。

这是我的index.html代码

<body ng-app="StockApp">
        <div id="wrapper" class="flex-column">
            <div ng-hide="hideNavBar" id="navbarundsub">
            </div>
            <div ng-show="hideStockInformation" id="stockInformation">
            </div>
            <div id="main" class="flex-row">
                <div ng-hide="hideSideMenu" id="sidemenu">
                </div>
                <div ng-hide="hideSideMenuUser" id="sidemenuUser">
                </div>
                <!--CONTENIDO-->
                <ng-view></ng-view>
            </div>
        </div>
</body>

我的问题是我的第一页是登录我如何将grom登录到另一页...我不知道。

希望有人可以帮助我。

ng-view是Angular1的重要指令之一。

文档

我们需要注入依赖注入。在这里，我们需要维护这样的路线

路由示例

请维护这样的路线

     var mainApp = angular.module("mainApp", ['ngRoute']);
     mainApp.config(['$routeProvider', function($routeProvider) {
        $routeProvider.
        when('/login', {
           templateUrl: 'login.htm',
           controller: 'LoginController'
        }).
        when('/employee', {
           templateUrl: 'employee.htm',
           controller: 'EmployeeController'
        }).
        otherwise({
           redirectTo: '/login'
        });
     }]);

您需要创建2个角模板一个用于登录，另一个为仪表板。

登录模板不包含任何菜单和标题仪表板模板同时包含菜单和标头。

您必须将路由从一个模板页面更改为另一个模板页面。为此，您需要使用UI-Router Angular模块。使用NG-Route，您无法将路由从一个模板页面更改为另一个模板页面。

UI-Router模块：

https://github.com/angular-ui/ui-router/wiki

app.js

angular
  .module('myapp', [
    'ui.router',
  ])
  .config(['$stateProvider', '$urlRouterProvider',
    function($stateProvider, $urlRouterProvider) {
      $urlRouterProvider.otherwise('/dashboard/Home');
      $stateProvider
        .state('dashboard', {
          url: '/dashboard',
          templateUrl: 'views/dashboard/main.html', 
        })
        .state('home', {
          parent:'dashboard',
          url: '/Home',
          controller: 'MainCtrl',
          templateUrl: 'views/pages/blank.html',
          }
        })
        .state('login', {
          templateUrl: 'views/pages/login.html',
          url: '/login'
        })
    }
  ]);

index.html

<!doctype html>
<html class="no-js">
    <head>
        <meta charset="utf-8">
        <title></title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width">

        <!-- build:css(.tmp) styles/main.css -->
        <link rel="stylesheet" href="styles/libs/bootstrap.min.css" />
        <link rel="stylesheet" href="styles/main.css">
        <link rel="stylesheet" href="styles/sb-admin-2.css">
        <link rel="stylesheet" href="styles/timeline.css">
        <link rel="stylesheet" href="styles/libs/metisMenu.min.css">
        <link rel="stylesheet" href="styles/libs/loading-bar.min.css">
        <link rel="stylesheet" href="styles/libs/font-awesome.min.css" 
        type="text/css">
        <!-- endbuild -->
        <!-- bower:js -->
        <script src="js/libs/jquery.min.js"></script>
        <script src="js/libs/bootstrap.min.js"></script>
        <script src="js/libs/metisMenu.min.js"></script>
        <script src="js/libs/angular.min.js"></script>
        <script src="js/libs/angular-ui-router.min.js"></script>
        <script src="js/libs/ocLazyLoad.min.js"></script>
        <script src="js/libs/loading-bar.min.js"></script>
        <script src="js/libs/ui-bootstrap-tpls.min.js"></script>
        <!-- endbower -->

        <!-- build:js({.tmp,app}) scripts/scripts.js -->
        <script src="scripts/app.js"></script>
        <!-- endbuild -->
    </head>
    <body>
        <div ng-app="ApsilonApp">
            <div ui-view></div>
        </div>
    </body>
</html>

相关内容

最新更新

热门标签：