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

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

javascript html angularjs

Javascript AngularJS通过路由加载不同的视图,javascript,html,angularjs,Javascript,Html,Angularjs,我想显示两个页面，但使用基本布局。我对以下几点有所了解： 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

我想显示两个页面，但使用基本布局。我对以下几点有所了解：

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>

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

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

当我访问index.html和list.html时，这在一定程度上起作用，但有两个问题：

当我加载index.html时，引导可以正常加载。但是当我访问list.html时，引导不会加载。事实上，查看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

将路线更改为：

$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

放在web应用程序的根目录（或任何子目录）中，将其配置为默认文档

AngularJS是否隐式地寻找index.html作为基础模板

这里与angular无关，这是从web服务器加载html页面的正常行为

下面是它的工作原理：

当用户通过根url（e.x:）或任何子目录（）访问您的应用程序时，

index.html

会像普通web应用程序一样加载到浏览器中，然后您的

app.js

会正常运行。注册路由并启动应用程序后，AngularJS会检查路由并加载

main.html

，将其插入到声明

ng view

的容器中。

仔细研究后，发现我的AngularJS路由需要

ngRoute

，这是它自己的模块。在包含它之后，它开始显示正确的页面。

我尝试过，但没有效果。访问root时，我得到一个空白页。另外，为什么引导程序不加载login.html？当我访问登录页面时，

index.html

中的所有代码都消失了。这可能是我的文件目录结构吗？@user21398:整个应用程序应该只有1个

index.html

。如果需要登录页面，请修改路由配置以再添加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: '/'
    });