ngRoute 无法工作,但没有向控制台报告错误。
如果控制台没有错误,如何跟踪 ngRoute 程序的执行?
我看到了使用 $locationProvider.html5Mode(true) 的示例,我不明白何时应该使用它,但我不认为它是使 ngRoute 工作所必需的。
index.html 有导航链接和 ngView :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<script src="bower_components/angular/angular.js"> </script>
<script src="bower_components/angular-route/angular-route.js"> </script>
<script src="main.js"> </script>
</head>
<body ng-app="Main">
<ul>
<li> <a href="#content/first"> first partial </a> </li>
<li> <a href="#content/second"> second partial </a> </li>
</ul>
<div ng-view></div>
</body>
</html>
main.js 定义路由器和 Controller :
var Main = angular.module('Main', ['ngRoute']);
function router($routeProvider) {
var route = {templateUrl: 'partials/default.html'};
$routeProvider.when('', route);
route = {
templateUrl: 'partials/first.html',
controller: 'first'
};
$routeProvider.when('content/first', route);
route = {
templateUrl: 'partials/second.html',
controller: 'second'
};
$routeProvider.when('content/second', route);
}
Main.config(['$routeProvider', router]);
Main.controller('first', function($scope) {
$scope.list = [1,2,3,4,5];
});
Main.controller('second', function($scope) {
$scope.list = [1,2,3];
});
partials 只需使用 ngRepeat:
<header> First content </header>
<p ng-repeat="iter in list">
first
</p>
已解决: 我的问题是我的整个应用程序位于/ang/前缀下,在将该前缀添加到 url 后,现在它正在工作。 不应该有一种方法可以使用相对网址吗?我想应该有,我会尝试修复它。
问题并不在于每个人都建议的不同语法,而且令人担忧的是,许多 JS 开发人员实际上并不理解他们在各处使用的一行语法。
最佳答案
请检查此代码 HTML 代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.5/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.5/angular-route.js"> </script>
<script src="script.js"> </script>
</head>
<body ng-app="Main">
<ul>
<li> <a href="#/content/first"> first partial </a> </li>
<li> <a href="#/content/second"> second partial </a> </li>
</ul>
<div ng-view></div>
</body>
</html>
Js文件
var app = angular.module('Main', ['ngRoute']);
app.config(['$routeProvider', '$locationProvider', function ($routeProvider, $locationProvider) {
$routeProvider.
when('/content/first', {
templateUrl: 'first.html',
controller: 'first'
}).
when('/content/second', {
templateUrl: 'second.html',
controller: 'second'
});
}]);
app.controller('first', function($scope) {
$scope.list = [1,2,3,4,5];
});
app.controller('second', function($scope) {
$scope.list = [1,2,3];
});
首页 HTML
<header> First content </header>
<p ng-repeat="item in list">
{{item}}
</p>
这是您的工作代码 click
关于AngularJS ngRoute 不工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27395374/