Question

我对角度js完全是新手，有点难以理解角度js中的路由概念。

我正在开发管理站点。我需要结构如下。

我是Login.html =这是单独的页面，而不是部分页面 Signup.html =这也是单独的页面，而不是部分页面成功登录后，它将转到仪表板，我将使用ng-view加载我的所有部分。

我怎么能这样做？我用Google搜索了一下。我只能看到所有这些只是为了部分观点。

我确实喜欢以下，但没有工作。我知道这是错的，但不知道怎么做

项目：

app.js

var nApp = angular.module('nApp', ['ngRoute']);

nApp .config(['$routeProvider', function ($routeProvider) {
    $routeProvider
        .when('/Login', {
            templateUrl: 'App/Login/Login.html',
            controller: 'LoginController',
            caseInsensitiveMatch:true
        }).when('/Signup', {
            templateUrl: 'App/Signup/Signup.html',
            controller: 'SignupController',
            caseInsensitiveMatch:true
        }).when('/Dashboard', {
            templateUrl: 'App/Index.html',
            controller: 'DashboardController',
            caseInsensitiveMatch:true
        })

    .otherwise({
        redirectTo: '/Login'
    });
}]);

的login.html

<html ng-app="nApp">
<head></head>
<body></body>
</html>

Signup.html

<html ng-app="nApp">
<head></head>
<body></body>
</html>

的index.html

<html ng-app="nApp">
<head></head>
<body>
<div ng-view></div>
</body>
</html>

将app.js放在App目录下 \ 有没有其他方法可以提到...

Answer 1

取自文档：ngView是一个指令，通过将当前路由的呈现模板包含到主布局（index.html）文件中来补充$ route服务。

因此，您必须拥有属性为ng-view的元素才能显示内容。

为什么不使用redirectTo而不是显示模板。

Answer 2

<强>更新

我的评论实际上只是提倡一个＆＃34; group by feature＆＃34;结构，您的功能可以是您选择的粒度或通用。登录是＆＃34;功能＆＃34;同样，但应该区别对待。

Here's a decent article关于按功能分组，但您的项目可能如下所示：

app/
  home/
    home.html
    home.js
  login/
    login.html
    login.js
  signup/
    signup.html
    signup.js
  app.js
  index.html

关于导航栏，您可能希望将其包含在index.html文件中，以便它存在于所有视图中。您可以使用ng-if将其隐藏起来（我可能会将其置于指令中）：

<html>
    <body ng-app="mainApp">
        <nav ng-include="'{path/to/navbar-partial}'" ng-if="location.path() !== '/login'"></nav>
        <div ng-view></div>
    </body>
</html>

我不会重复登录/身份验证处理的细节，因为那里有很多实现。 Here's one example:

var app = angular.module("mainApp", []).
  config(function($routeProvider, $locationProvider) {
    $routeProvider.
      when("/home",
        { templateUrl: "home/home.html", controller: 'homeController' }).
      when("/login",
        { templateUrl: "login/login.html", controller: "loginController" }).
      // event more routes here ...
      otherwise( { redirectTo: "/home" });
  }).
  run(function($rootScope, $location) {
    $rootScope.$on( "$routeChangeStart", function(event, next, current) {
      // no logged user, redirect to /login
      if ($rootScope.loggedInUser == null) {
        if (next.templateUrl !== "login/login.html") {
          $location.path("/login");
        } 
      }
    });
  });

Answer 3

ui-router解决了这个问题。我已经实施了很长时间。对不起，迟到的回复。

有两个独立的嵌套状态来克服这个初始启动。

如果我们使用ng-if来显示经过身份验证的非经过身份验证的用户菜单，那么当用户登录并注销时，它在ui中看起来不太好。 ui会有震动。

即使我们使用基于ng-if条件的ng-include，ui页面也会不稳定。

这里我提到了一些示例ui路由器状态。

     $stateProvider
          .state('beforeLogin', {
            templateUrl: 'beforeLoginLayout.html',
            controller: function($scope){

            }
          })
          .state('beforeLogin.login', {
            templateUrl: 'login.html',
controller: function($scope){

            }
          }).state('beforeLogin.signup', {
            templateUrl: 'signup.html',
controller: function($scope){

            }
          });

     $stateProvider
          .state('afterLoggedin', {
            templateUrl: 'afterLoggedInLayout.html',
            controller: function($scope){

            }
          })
          .state('afterLoggedin.dashboard', {
            templateUrl: 'dashboard.html',
controller: function($scope){

            }
          }).state('afterLoggedin.addUser', {
            templateUrl: 'addUser.html',
controller: function($scope){

            }
          });

参考：https://github.com/angular-ui/ui-router/wiki/nested-states-%26-nested-views

加载两个不同的页面Angular js

3 个答案: