AngularJS：让ngRoute工作

发布时间：2020-12-17 07:29:27 所属栏目：安全来源：网络整理

导读：我正在开发一个新的 Angularjs webapp,我必须使用ngRoute.我首先有点困惑,因为在我的情况下路由根本不起作用 – 我总是在index和MainCtrl上结束. 在index.html中,我已经包含了所有依赖项,如下所示： body ng-app="orderyourselfApp" !--[if lt IE 7] p class

我正在开发一个新的 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',$http) {
    console.log('shit is getting real');
    $http.get('/api/awesomeThings').success(function(awesomeThings) {
        $scope.awesomeThings = awesomeThings;
    });
});

现在,问题很奇怪和简单：当我做localhost：9000 / login时,我应该进入login.html模板和LoginCtrl,但没有.我一直在索引和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.html和login.html,它们都不应该包含ng-app声明.

结束这样的事情：

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

    $locationProvider.html5Mode(true);
  });

使用index.html从http：// localhost：9000 /登陆页面

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!