AngularJS：让 ngRoute 工作答案

【问题标题】：AngularJS: Getting ngRoute workingAngularJS：让 ngRoute 工作
【发布时间】：2014-05-13 17:11:55
【问题描述】：

我正在开发一个新的 Angularjs webapp，我必须在其中使用 ngRoute。首先我有点困惑，因为在我的情况下路由根本不起作用 - 我总是以 index 和 MainCtrl 结束。

在 index.html 我已经包含了所有的依赖，像这样：

<body ng-app="orderyourselfApp">
    <!--[if lt IE 7]>
      <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
    <![endif]-->

    <!-- Add your site or application content here -->
    <div class="container" ng-controller="LoginCtrl">{{hello}}</div>Soem random stuff

    <!--[if lt IE 9]>
    <script src="bower_components/es5-shim/es5-shim.js"></script>
    <script src="bower_components/json3/lib/json3.min.js"></script>
    <![endif]-->

    <!-- build:js(app) scripts/vendor.js -->
    <!-- bower:js -->
    <script src="bower_components/jquery/dist/jquery.js"></script>
    <script src="bower_components/angular/angular.js"></script>
    <script src="bower_components/angular-resource/angular-resource.js"></script>
    <script src="bower_components/angular-route/angular-route.js"></script>
    <!-- endbower -->
    <!-- endbuild -->

        <!-- build:js({.tmp,app}) scripts/scripts.js -->
        <script src="scripts/app.js"></script>
        <script src="scripts/controllers/main.js"></script>
        <script src="scripts/controllers/navbar.js"></script>
        <!-- endbuild -->
</body>

我在app.js中设置了路线

'use strict';

angular.module('orderyourselfApp', [
  'ngResource',
  'ngRoute'
])
  .config(function ($routeProvider, $locationProvider) {
    $routeProvider
      .when('/', {
        templateUrl: 'partials/main',
        controller: 'MainCtrl'
      })
      .when('/login', {
        templateUrl: 'login',
        controller: 'LoginCtrl'
      })
      .otherwise({
        redirectTo: '/'
      });

    $locationProvider.html5Mode(true);
  });

当然，main.js 看起来像这样：

'use strict';

angular.module('orderyourselfApp')

.controller('LoginCtrl', function ($scope, $http) {
    console.log('saysomething');
    $scope.hello = 'Hello world! LoginCtrl';
})

.controller('MainCtrl', function ($scope, $http) {
    console.log('shit is getting real');
    $http.get('/api/awesomeThings').success(function(awesomeThings) {
        $scope.awesomeThings = awesomeThings;
    });
});

现在，问题既奇怪又简单：当我执行 localhost:9000/login 时，我应该进入 login.html 模板和 LoginCtrl，但没有。我一直以index 和MainCtrl 结尾，但结果似乎没有任何改变。

login.html

  <body ng-app="orderyourselfApp">
    <!--[if lt IE 7]>
      <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
    <![endif]-->

    <!-- Add your site or application content here -->
    <div class="container" ng-controller="LoginCtrl">{{hello}}</div> … then the usual stuff

这是哪里出了问题？

【问题讨论】：

你必须在 index.html 的某处使用ngView 指令，然后登录模板就会被插入到那里。所以它不再需要 ng-app

标签： angularjs angularjs-routing ngroute

【解决方案1】：

首先，templateUrl 应该指向您实际部分的相对路径，例如：templateUrl: 'partials/login.html'。

那么，我认为你应该先登陆http://localhost:9000/，然后点击指向http://localhost:9000/login的链接

无论如何，您的部分不应该包含ng-app 声明（它们实际上是部分的）。所以你应该有一个index.html 来定义你的页面模板，还有两个部分：main.html 和login.html，都不应该包含ng-app声明。

以这样的方式结束：

  .config(function ($routeProvider, $locationProvider) {
    $routeProvider
      .when('/', {
        templateUrl: 'partials/main.html',
        controller: 'MainCtrl'
      })
      .when('/login', {
        templateUrl: 'partials/login.html',
        controller: 'LoginCtrl'
      })
      .otherwise({
        redirectTo: '/'
      });

    $locationProvider.html5Mode(true);
  });

index.html 是来自http://localhost:9000/ 的页面登陆

【讨论】：

在 index.html 中也必须有
@blint 你说对了一部分，有效的是将 ng-view 添加到索引中，但不需要在 templateUrl 中添加完整路径。
另一个 +1 给@coni2k 的 ng-view。拯救了我的夜晚！