角度布线
Angular routing
最近我做了关于angular入门的angular教程。然后我试着自己做一个小例子,但路由似乎不起作用。当我开始翻页时,我看到的只有白色。只需提及我正在寻找的路径是http://localhost:8000/app/index.html#/title
。我的应用程序如下:
index.html
<!doctype html>
<html lang="en" ng-app="test">
<head>
<meta charset="utf-8">
<title>Test</title>
<link rel="stylesheet" href="css/app.css">
<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css">
<script src="bower_components/jquery/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>
<script src="bower_components/angular-mocks/angular-mocks.js"></script>
<script src="bower_components/angular-animate/angular-animate.js"></script>
<script src="js/app.js"></script>
<script src="js/controllers.js"></script>
</head>
<body>
<div ng-view></div>
</body>
</html>
app.js
var test = angular.module( 'test', [ 'ngRoute', 'testControllers' ] );
test.config( ['$routeProvider',
function($routeProvider) {
$routeProvider.
when('/title', {
templateUrl: 'title.html',
controller: 'TitleCtrl'
}).
otherwise({
redirectTo: '/title'
});
}
]);
controllers.js
var testControllers = angular.module( 'testControllers', [] );
testControllers.controller( 'TitleCtrl', [ '$scope',
function($scope) {
$scope.select_system = [
"MOAB",
"Amoeba",
"Component Library",
"SLURM",
"UniCloud",
"UniCluster",
"UNICORE",
"ProActive"
];
}
]);
模板/title.html
<select ng-repeat="system in select_system">
<option>{{system}}</option>
</select>
我的路径如下:文本示例-应用程序-app/bower_components-app/js/app.js-app/js/controllers.js-templates/title.html
bower.json
{
"name": "TestExample",
"description": "TestProject",
"version": "0.0.0",
"authors": [
"Vyivrain <sashaverhun@rambler.ru>"
],
"license": "MIT",
"ignore": [
"**/.*",
"node_modules",
"bower_components",
"test",
"tests"
],
"private": true,
"dependencies": {
"angular": "1.3.x",
"angular-mocks": "1.3.x",
"jquery": "1.10.2",
"bootstrap": "~3.1.1",
"angular-route": "1.3.x",
"angular-resource": "1.3.x",
"angular-animate": "1.3.x"
}
}
.bowerrc
{
"directory": "app/bower_components",
"interactive": false
}
package.json
{
"name": "TestExample",
"version": "0.0.0",
"description": "TestProject",
"main": "index.js",
"directories": {
"test": "test"
},
"scripts": {
"postinstall": "bower install",
"prestart": "npm install",
"start": "http-server -a 0.0.0.0 -p 8000",
"test": "echo '"Error: no test specified'" && exit 1",
"preupdate-webdriver": "npm install"
},
"author": "Vyivrain",
"license": "BSD-2-Clause",
"dependencies": {
"bower": "~1.3.12",
"http-server": "~0.6.1",
"karma": "~0.12.24",
"karma-chrome-launcher": "~0.1.5",
"karma-jasmine": "~0.1.5",
"protractor": "~1.0.0",
"shelljs": "~0.2.6",
"tmp": "~0.0.23"
}
}
app.js必须如下所示:
var test = angular.module( 'test', [ 'ngRoute', 'testControllers' ] );
test.config( ['$routeProvider',
function($routeProvider) {
$routeProvider.
when('/title', {
templateUrl: 'templates/title.html',
controller: 'TitleCtrl'
}).
otherwise({
redirectTo: '/title'
});
}
]);
在您的route.js中,您似乎错过了编写templateUrl:'templates/title.html'。相反,您编写了templateUrl:'ditle.html'
其他解决方案可能-
在你的index.html底部写下:
<script type="text/ng-template" id="title.html">
<select ng-repeat="system in select_system">
<option>{{system}}</option>
</select>
</script>
通过这种方式,你不必创建一个名为title.html的新文件。如果你的模板很小并且经常使用,这将非常有用。此外,由于没有ajax调用来获取模板,因此渲染速度更快。
但除此之外,请始终在浏览器中查看您的控制台。在出现任何错误的情况下,angular js提供了非常好的日志来检测它。就像在你的情况下一样,你一定收到了一个错误。
检查chrome dev工具网络选项卡,您可能会看到
无法在数据://或文件://模式下发送xhr,仅在https中可用://http://mode
现在,该解决方案要么让您的浏览器在所有模式下为xhr服务,要么让节点服务器或任何其他您喜欢的
如果您可以升级;请升级到Angular 1.5,并使用充分利用组件的新路由器。通过这样做,您将为Angular 2.0发布后的升级做好更多准备。
不显示title.html的原因是因为它没有获得title.html文件的正确路径,也许你把title.html放在了某个文件夹中,通常我们把所有应用程序视图都放在templates文件夹或views文件夹中,所以你必须根据路径进行更改。例如,如果您将视图放在视图文件夹中,则必须像这样更改app.js中的路由模板URL。
var test = angular.module( 'test', [ 'ngRoute', 'testControllers' ] );
test.config( ['$routeProvider',
function($routeProvider) {
$routeProvider.
when('/title', {
templateUrl: 'views/title.html',
controller: 'TitleCtrl'
}).
otherwise({
redirectTo: '/title'
});
}
]);