AngularJS:让 ngRoute 工作

标签 angularjs angularjs-routing ngroute

我正在开发一个新的 Angularjs 网络应用程序,我必须在其中使用 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

这是哪里出错了?

最佳答案

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

那么,我觉得你应该先登陆http://localhost:9000/然后点击链接到 http://localhost:9000/login
无论如何,你的部分不应该包含 ng-app声明(它们实际上是部分的)。所以你应该有一个 index.html这将定义您的页面模板和两个部分:main.htmllogin.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/ 登陆的页面

关于AngularJS:让 ngRoute 工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22811119/

相关文章:

javascript - 如何在最后加载$scope.$?

javascript - 在 angularjs SPA 中重新加载时,脚本和样式表未加载

javascript - ngRoute 不工作

angularjs - ui-select 如果为空则禁用

javascript - 在 AngularJS 中过滤没有 HTML 标签的文本

javascript - 如何计算ng-repeat中动态命名模型名称的总和

angularjs - 如何在 $stateProvider 的 "resolve"中使用工厂?

javascript - 从 php 调用数组

javascript - AngularJS - 在 Controller 名称中使用 NgRoute 的参数

javascript - Angular JS - 使用服务保存\共享数据