Question

我有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

Answer 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标签内，我认为这可行。

如果有帮助，请告诉我，

Answer 2

我自己发现了。我在寻找什么是嵌套视图（子视图）。它可以通过ui-router轻松完成。哪个可以在https://github.com/angular-ui/ui-router

找到

使用AngularJS更改视图和UI

2 个答案: