Angular JS路由不起作用
Posted
技术标签:
【中文标题】Angular JS路由不起作用【英文标题】：Angular JS routing not working 【发布时间】：2014-05-05 20:56:16 【问题描述】：当我试图点击 show 时，它没有显示任何东西，我在这上面浪费了很多时间，但运气不好，没有人能帮上忙。
文件....
-
app.js
controller.js
index.html
show.html
index.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 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
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
var app = angular.module("Java4sApp",[]);
谢谢。
【问题讨论】：
您的控制台是否出现任何错误？ 【参考方案1】：您需要在创建模块时注入“ngRoute”依赖项。
var app= angular.module('Java4sApp', [
'ngRoute'
]);
还要确保在 index.html 中获得 Angular 路由 js 并添加对它的引用
<script src="scripts/angular-route.js"></script>
一个很好的例子可以找到here
如果这不能解决您的问题，请告诉我
更新
这是一个简单的 plunker，显示 AngularJS 路由
【讨论】：
您好 Thara，已添加，但运气不好，如果可能的话，您能否连接我的系统。 在某些示例中，他们没有添加 ngRoute，这让我有点困惑 Thara。 我在您的代码中看到了很多问题。 1. 我看不到你使用过 ngView 2. 你试图共享多个控制器（这很糟糕）让我安装一个 plunker n 看看 好的，这对你来说似乎是一个不错的选择：plnkr.co/edit/wUhAGG?p=preview。希望这会有所帮助:)。 您是如何解决问题的。如果您发现我的答案是正确且有帮助的，请将其标记为此处解释的答案meta.stackexchange.com/a/5235以上是关于Angular JS路由不起作用的主要内容，如果未能解决你的问题，请参考以下文章