Ash*_*esh 8 angularjs angularjs-routing ngroute
我正在开发一个新的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
哪里出错了？
nga*_*ull 12
首先,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/
| 归档时间： |
|
| 查看次数： |
51069 次 |
| 最近记录： |