javascript Angular JS 路由不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/22678229/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Angular JS routing not working
提问by jassu
While i am trying to click on showits not showing any thing, i have wasted lot of time on this, but no luck can some one help.
当我试图点击显示它没有显示任何东西时，我已经浪费了很多时间，但没有运气可以帮助。
Files....
文件....
- app.js
- controller.js
- index.html
- show.html
- 应用程序.js
- 控制器.js
- 索引.html
- 显示.html
index.html
索引.html
<html ng-app='Java4sApp'>
<head>
<title>Angular Js Tutorials _ Java4s</title>
<script type="text/javascript" src="angular.min.js"></script>
<script type="text/javascript" src="app.js"></script>
<script type="text/javascript" src="controllers.js"></script>
</head>
<body>
<div ng-controller='Java4sController'>
Settings :
<a href="#add">Add Details</a> | <a href="#show">Show Details</a>
<div ng-view></div>
</div>
</body>
</html>
show.html
显示.html
<html ng-app='Java4sApp'>
<head>
<title>Angular Js Tutorials _ Java4s</title>
<script type="text/javascript" src="angular.min.js"></script>
<script type="text/javascript" src="app.js"></script>
<script type="text/javascript" src="controllers.js"></script>
</head>
<body>
<div ng-controller='Java4sController'>
<input type="text" ng-model="myModel" />
<ul>
<li ng-repeat='person in people | filter:myModel'>{{person.name}}</li>
</ul>
</div>
</body>
</html>
controller.js
控制器.js
app.config(['$routeProvider', function($routeProvider) {
$routeProvider.
when('/add', {
controller: 'Java4sController',
templateUrl: '/add.html'
}).
when('/show', {
controller: 'Java4sController',
templateUrl: '/show.html'
}).
otherwise({
redirectTo: '/index.html'
});
}]);
app.controller("Java4sController",function($scope){
$scope.people = [
{name: 'Siva', city: 'Cary'},
{name: 'Teja', city: 'Raleigh'},
{name: 'Reddy', city: 'Durham'},
{name: 'Venky', city: 'Denver'},
{name: 'Arun', city: 'Texas'}
];
});
app.js
应用程序.js
var app = angular.module("Java4sApp",[]);
Thank you.
谢谢你。
回答by Tharaka
You need to inject the 'ngRoute' dependency when you are creating your module.
创建模块时，您需要注入“ngRoute”依赖项。
var app= angular.module('Java4sApp', [
'ngRoute'
]);
Also make sure you obtain Angular routing js and add a reference to it, in your index.html
还要确保您获得了 Angular 路由 js 并在您的 index.html 中添加了对它的引用
<script src="scripts/angular-route.js"></script>
A good example can be found here
一个很好的例子可以在这里找到
Please let me know if this doesn't fix your problem
如果这不能解决您的问题，请告诉我
UPDATE
更新
This is a simple plunkerthat shows AngularJS Routing
这是一个显示 AngularJS 路由的简单plunker
