Question

我认为我对AngularJS中的路由工作方式以及SPA的完全误解存在严重误解。

我曾经想过我的简单路线：

$routeProvider
   .when('/home', {
        templateUrl: 'app/views/home.html',
        controller: 'homeController'
   })
   .when('/login', {
        templateUrl: 'app/views/login.html',
        controller: 'loginController',
   })

我曾经想过，当我去/login时，angular会调用ajax来获取所需的html页面。但是，我没有看到任何通过提琴手的电话，这没有任何意义。

但我似乎无法找到我的Chrome开发者工具中的网页位置，也找不到正确的单词组合来通过Google获得合适的答案。有人可以帮我解决这个问题吗？

如果有帮助，这是我的布局页面的主体：

<body ng-cloak>

<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
    ...nav stuff
</nav>

<br/><br/>

<div class="container body-content" ng-view></div>

<!-- 3rd party scripts -->
<script src="Scripts/angular.js"></script>
<script src="Scripts/angular-local-storage.min.js"></script>
<script src="Scripts/jquery-2.1.1.min.js"></script>
<script src="Scripts/bootstrap.min.js"></script>
<script src="Scripts/angular-route.min.js"></script>
<!-- app main -->
<script src="app/app.js"></script>
<!-- controllers -->
<script src="app/controllers/homeControllers.js"></script>
<script src="app/controllers/loginController.js"></script>
<!-- services -->
<script src="app/services/modelErrorService.js"></script>
<script src="app/services/authInterceptorService.js"></script>
<script src="app/services/authService.js"></script>
</body>

修改

抱歉，我可能不清楚。代码工作正常。我的问题是，当angular将你引导到一个新页面时，它从哪里加载那个html模板？它是在一开始就交付给客户端，还是回调给服务器？如果它在客户端上，它存储在哪里？

Answer 1

如果指定了templateUrl，Angular会查看模板的$templateCache并在找到后从那里加载。如果未找到，它将尝试从服务器获取它，将其存储在$templateCache中以供将来访问并将其加载到视图中。

可以将模板放入Angular的$templateCache

中

首次从服务器提取时
将它们放在HTML中的<script type="text/ng-template"></script>元素
以编程方式将它们放入$templateCahce（无论出于何种原因：性能，离线访问等）

Answer 2

你的代码看起来很好。

您是否已将ngRoute模块注入您的应用程序中，如下所示：

angular.module('your-app-name', ['ngRoute']);

单页应用程序视图位置

2 个答案: