AngularJS:获取ngRoute工作 [英] AngularJS: Getting ngRoute working
问题描述
我工作的一个新的Web应用程序Angularjs,我不得不使用ngRoute。我有点糊涂第一,因为路由没有在我的情况在所有的工作 - 我总是在首页
和MainCtrl
I'm working on a new Angularjs webapp where I have to use ngRoute. I'm a bit confused first, because routing doesn't work at all in my case – I always end up at index
and MainCtrl.
在的index.html 我已经包括像这样所有的依赖关系:
in index.html I've included all dependencies like so:
<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);
});
和ofcourse,main.js看起来是这样的:
And ofcourse, main.js looks like this:
'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;
});
});
现在,这个问题很奇怪,很简单:当我做一个本地主机:9000 /登录,我应该得到的login.html的模板和LoginCtrl,但没有。我一直在首页
和 MainCtrl
并没有什么结束了似乎改变的结果。
Now, the issue is weird and simple: when I do a localhost:9000/login, I should get to the login.html template and LoginCtrl, but no. I keep ending up at index
and MainCtrl
and nothing seems to change the result.
的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
在哪里这个问题呢?
Where's this going wrong?
推荐答案
首先, templateUrl
应指向您的实际部分的相对路径,例如: templateUrl:'谐音/ login.html的
First off, templateUrl
should point to your actual partial's relative path, for example: templateUrl: 'partials/login.html'
.
然后,我想你应该在第一次土地的http://本地主机:9000 /
,然后按照链接的http://本地主机:9000 /登录
Then, I think you should first land on http://localhost:9000/
and then follow a link to http://localhost:9000/login
反正你谐音不应该包含 NG-应用
声明(他们实际上是局部的)。所以,你应该有一个 index.html的
,将定义页面模板,和两个谐音: main.html中
和的login.html
, 既不的,其中应该包含 NG-应用
声明。
Anyway, you partials should not contain the ng-app
declaration (they actually are partial). So you should have an index.html
that would define your page's template, and two partials: main.html
and login.html
, neither of which should contain the ng-app
declaration.
在结束这样的:
.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://本地主机:9000 /
With index.html being the page's landing from http://localhost:9000/
这篇关于AngularJS:获取ngRoute工作的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!