使用 AngularJS 更改视图和 UI答案

【问题标题】：Change View and UI with AngularJS使用 AngularJS 更改视图和 UI
【发布时间】：2017-05-05 09:56:29
【问题描述】：

我有 2 个视图，我想在它们之间切换。

我的第一个视图 (index.ejs) 看起来像这样，是所有用户登录前的仪表板（OnePager：用于注册和信息）：

<!DOCTYPE html>
<html lang="en" ng-app="app" class="no-js">
<head>
  <meta charset="utf-8">
  <title>app.com</title>
  <link type="text/css" rel="stylesheet" href="../css/style.css">
  <script src='https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js'></script>
</head>
<body>
  <div ng-view></div>
    <script src="../lib/angular/angular.js"></script>
    <script src="../lib/angular-route/angular-route.js"></script>
    <script src="../lib/angular-sanitize/angular-sanitize.js"></script>
    <script src="../lib/angular-resource/angular-resource.js"></script>  
    <script src="../js/app.js"></script>
    <script src="../js/controllers/indexCtrl.js"></script>
    <script src="../js/services/Api.js"></script>
</body>
</html>

在使用护照进行身份验证后，我想切换到这个（home.ejs）：

<!DOCTYPE html>
<html lang="en" ng-app="app" class="no-js">
<head>
  <meta charset="utf-8">
  <title>app.com</title>
  <link type="text/css" rel="stylesheet" href="../css/style.css">
  <script src='https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js'></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/1.7.3/socket.io.js"></script>
        <script>
            var socket = io();
        </script>
</head>
<body>
<SOME OTHER HTML INCLUDED SIDEBARS & TOP BARS>
  <div ng-view></div>
    <script src="../lib/angular/angular.js"></script>
    <script src="../lib/angular-route/angular-route.js"></script>
    <script src="../lib/angular-sanitize/angular-sanitize.js"></script>
    <script src="../lib/angular-resource/angular-resource.js"></script>  
    <script src="../js/app.js"></script>
    <script src="../js/controllers/homeCtrl.js"></script>
    <script src="../js/services/Api.js"></script>
</body>
</html>

所以我的侧边栏和顶部栏应该像 SPA 一样保持静态，只需通过浏览路线来更改 ng-view。

最好的方法是什么？

谢谢，Chzn

【问题讨论】：

标签： html angularjs ejs

【解决方案1】：

首先，无需在 home.ejs 中声明所有脚本，因为一旦将它们放入索引中，它们就可用于标记 ng-app 中定义的所有应用程序。现在，对于您的问题本身，您可以做的只是在一个单独的文件中创建您的 html 代码，并将其引用添加到索引文件中，并将下一条语句放在您的 ng-app 的 js 脚本中：

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

app.config(['$routeProvider', function ($routeProvider) {
    $routeProvider.when('/home', { templateUrl: home.html, controller:homeController });
    $routeProvider.otherwise({ redirectTo: '/' });
}]);

app.controller('mainController', ['$scope', $location, function($scope, $routeProvider){
    $location.path( "/home" );
}])

这就是你只需将 mainController 放在索引中的 ng-controller 标记内，我认为这可以工作。

如果有帮助，请告诉我，

【讨论】：

首先非常感谢您的快速回答。但我实际上知道这一切。如何使用路由提供程序以及如何从单独的文件中显示部分页面。但我的主要问题是如何获得像 Twitch SPA link 这样的静态侧边和顶栏。我想加载没有静态顶部和侧边栏的索引文件。在 curse link 上看起来像这样。身份验证后加载静态顶部和侧边栏，只需通过 routeprovider 更改 ng-view，就像第一个链接中的 twitch 应用一样。

【解决方案2】：

嗯，我自己发现了。我要找的是嵌套视图（子视图）。使用 ui-router 可以很容易地完成 Angular 的家伙。可以在这里找到https://github.com/angular-ui/ui-router

【讨论】：