加载两个不同的页面Angular js答案

【问题标题】：Loading two different pages Angular js加载两个不同的页面Angular js
【发布时间】：2016-08-17 17:16:44
【问题描述】：

我是 Angular js 的新手，有点难以理解 Angular js 中的路由概念。

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

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

我怎么能这样做？我用谷歌搜索了它。我只能看到部分视图。

我确实喜欢关注，但没有工作。我知道这是错误的，但不知道该怎么做

项目：

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'
    });
}]);

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

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

索引.html

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

将 app.js 放在 App 目录下 \ 有没有其他方法可以做到这一点，请提及...

【问题讨论】：

请提供你的作品JSfiddle。
编辑了问题，你能看看这个。我不知道该怎么做。所以我也不能做 JsFiddle。
你好像错过了ng-app。
不，这不是问题.. 我只是给出了一些覆盖... 不准确。我想知道结构怎么做..
如果你看这个，这是三个不同的页面。不偏一个

标签： javascript angularjs

【解决方案1】：

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

【讨论】：

【解决方案2】：

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

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

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

【讨论】：

【解决方案3】：

更新

我的评论实际上只是在提倡“按功能分组”结构，您的功能可以根据您的选择进行细化或通用。登录也是一项“功能”，但应该有所不同。

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");
        } 
      }
    });
  });

【讨论】：

感谢您的支持。以下是我真正的疑问。这是我的逻辑被宠坏了，实际上不知道得到答案。在仪表板中，我们将有查看主页、重置密码等菜单。这些页面应该在不重新加载仪表板中的菜单的情况下加载。我怎么能做到这一点？仅出于此目的，我已经发布了这个问题。对不起，我转错了。
也许我当时理解错了。听起来你正在构建一个应用程序，它可能有几个主要模块（登录、家庭、管理等），这些模块有小节。在我处理的应用程序中，主要模块是单独的角度模块，它们配置了自己的一组路由。每个模块中的内容始终创建为部分内容。每个主模块都有自己的 index.html（如上），具有不同的 ng-app 名称。站点菜单都捆绑在一个指令中，该指令包含在每个 index.html 中。由于每个应用程序都不同，这可能适合您，也可能不适合您。
非常感谢...我想我离你更近了。您能否用最后的评论和示例代码结构更新答案？这样可以帮助我理解。
更新了我的答案。我没有一个可行的例子，但我包含了几个我认为你需要的拼图。