角路由器不工作答案

【问题标题】：angular router not working角路由器不工作
【发布时间】：2015-11-11 08:35:45
【问题描述】：

我正在尝试为我的项目添加一些路由。我正在使用 Angular 1.3.0 的基本角度路线

app.js 文件：

'use strict';
var routerApp = angular.module('mcw', [
  'ngRoute',
  'mcw.controllers', 
  'directives',
  'filters',
  'mcw.services']);
routerApp.config(function ($routeProvider) {
  $routeProvider
  .when('/', {templateUrl: 'index.html', controller: 'LoginController'})
  .when('/Home', {templateUrl: 'templates/home.html', controller: 'ResourcesController'})
  .otherwise({redirectTo: '/'});
});

index.html 文件：

<!DOCTYPE html>
<html lang="en" ng-app="mcw">
    <head>
        <meta charset="utf-8">
        <title>title spec</title>

        <script src="js/angular1.3.0/angular.js"></script>
        <script src="js/angular1.3.0/angular-route.js"></script>
        <script src="js/angular1.3.0/angular-animate.js"></script>
        <script src="js/app.js"></script>
        <script src="js/commonFunc.js"></script>
        <script src="js/controllers.js"></script>
        <script src="js/directives.js"></script>
        <script src="js/filters.js"></script>
        <script src="js/server.js"></script>
        <script src="js/services.js"></script>
    </head>
    <body>  
    </body>
</html>

我使用 'python -m http.server' (Python 3.4.3) 作为服务器，以及 “127.0.0.1:8000/”、“127.0.0.1:8000/index.html”、“127.0.0.1:8000/index.html#/Home”都进入index.html页面。

【问题讨论】：

标签： javascript angularjs routing single-page-application angularjs-routing

【解决方案1】：

您错过了页面上的ng-view 指令，该指令从$routeProvider 加载视图，而template 和指定的controller 将被加载到ng-view 元素中。

将其添加到正文中

<body>
  <ng-view></ng-view>
</body>

【讨论】：

感谢您的回答，我认为是：路由器只是刷新了ng-view里面which的内容。对吗？
@RTzhong 正确..内容将在ng-view 元素内刷新
@RTzhong 你还想要什么吗？你会接受我的回答吗？

【解决方案2】：

是的，你需要在正文中使用 ng-view。

在我看来，只有您在 ng-view 标记中加载的内容不应该是 index.html。（但你想放在 ng-view 标签内）。 index.html 应该是放置 ngview 的页面。加载其他 html 文件（insie ng-view 标签）

它的工作方式是将“指令”放置在 ng-view 标签内。（更具体地说，您在路由器 {.when} 对象中键入的 html 文件。在您的情况下：templates/home.html 和您所说的 index.html

<!DOCTYPE html>
<html lang="en" ng-app="mcw">
    <head>
        <meta charset="utf-8">
        <title>title spec</title>

        <script src="js/angular1.3.0/angular.js"></script>
        <script src="js/angular1.3.0/angular-route.js"></script>
        <script src="js/angular1.3.0/angular-animate.js"></script>
        <script src="js/app.js"></script>
        <script src="js/commonFunc.js"></script>
        <script src="js/controllers.js"></script>
        <script src="js/directives.js"></script>
        <script src="js/filters.js"></script>
        <script src="js/server.js"></script>
        <script src="js/services.js"></script>
    </head>
    <body>  
    <ng-view></ng-view>
    </body>
</html>

或者，如果您愿意，您甚至可以在其中使用带有 ng-view 的 div。（我推荐第一种方法）

【讨论】：