Question

我想显示两个页面，但使用基本布局。我有点使用以下内容：

的index.html

<html data-ng-app="myApp">
<head>
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
</head>
<body>
    <div data-ng-view class="container"></div>

    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
    <script src="public/app.js"></script>
</body>
</html>

main.html中

<div>
    <h2> Hello! This is Main page </h2>
</div>

list.html

<div>
    <h2> This is List page </h2>
</div>

app.js

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

// Routing Setup
function myAppRouteConfig($routeProvider) {
    $routeProvider.
    when('/', {
        templateUrl: 'index.html'
    }).
    when('/list', {
        controller: ListController,
        templateUrl: 'list.html'
    }).
    otherwise({
        redirectTo: '/'
    });
}

myApp.config(myAppRouteConfig);

当我访问index.html和list.html时，这有点有效，但有两个问题：

当我加载 index.html 时，bootstrap加载正常。但是当我访问 list.html 时，bootstrap无法加载。实际上，查看firebug中的html源代码时， index.html 中的所有代码都未加载。容器丢失，脚本和css链接丢失。
如何加载实际索引页面？当用户访问根页面时，我想要加载 main.html ，但 index.html 是包含在所有其他视图中保留的代码的基本布局（即，像页眉和页脚等）。如果我修改了我的app.js并设置了templateUrl: 'main.html'，它似乎仍会加载index.html。 AngularJS是否隐式地将index.html作为基本模板？

修改

文件结构：

-- server.js
-- public/
      |-- index.html
      |-- list.html
      |-- main.html
      |-- js
          |-- app.js

Answer 1

将您的路线更改为：

$routeProvider.
    when('/', {
        templateUrl: 'main.html'
    }).
    when('/list', {
        controller: ListController,
        templateUrl: 'list.html'
    }).
    //if you need to use login page, add 1 more route
    when('/login', {
        templateUrl: 'login.html'
    })
    otherwise({
        redirectTo: '/'
    });

并将您的index.html放在网络应用的根目录（或任何子目录）中，将其配置为默认文档。

AngularJS是否隐式查找index.html作为基本模板？

此处没有与angular相关的内容，这是从Web服务器加载html页面的正常行为。

以下是它的工作原理：

当用户通过根URL（例如：http://example.com）或任何子目录（http://example.com/public）访问您的应用程序时，index.html会像普通的Web应用程序一样加载到浏览器中，然后您的app.js正常运行。注册路径并引导应用程序后，angular会检查路径并加载main.html以插入到声明ng-view的容器中。

Answer 2

在挖掘之后，事实证明我的AngularJS路线需要ngRoute，这是它自己的模块。包含它后，它开始显示正确的页面。

AngularJS通过路由加载不同的视图

2 个答案: