AngularJS路由器代码无法正常工作(AngularJS router code not working)

我已经检查了Stack溢出和许多其他博客，但我无法解决我在AngularJS代码中的路由问题。 我没有收到任何错误，但路由似乎根本没有发生。 有人可以帮我解决这个问题吗？ 主要的index.html就在这里

<!DOCTYPE html> <html lang="en"> <head> <title>AngularJS Routing example</title> </head> <body data-ng-app="sampleApp"> <div class="container"> <div class="row"> <div class="col-md-3"> <ul class="nav"> <li><a href="#AddNewOrder"> Add New Order </a></li> <li><a href="#ShowOrders"> Show Order </a></li> </ul> </div> <div class="col-md-9"> <div data-ng-view></div> </div> </div> </div> <script src="angular.min.js"></script> <script src="angular-route.js"></script> <script src="app.js"></script> </body> </html>

我已将完整的代码上传到Plunker AngularJS Routing

任何帮助将不胜感激。

谢谢，Smitha

I have checked Stack overflow and many other blogs but I was not able to resolve the routing issue that I have in my AngularJS code. I'm not getting any error but the routing doesn't seem to be happening at all. Can anyone please help me fix this issue? The main index.html is here

<!DOCTYPE html> <html lang="en"> <head> <title>AngularJS Routing example</title> </head> <body data-ng-app="sampleApp"> <div class="container"> <div class="row"> <div class="col-md-3"> <ul class="nav"> <li><a href="#AddNewOrder"> Add New Order </a></li> <li><a href="#ShowOrders"> Show Order </a></li> </ul> </div> <div class="col-md-9"> <div data-ng-view></div> </div> </div> </div> <script src="angular.min.js"></script> <script src="angular-route.js"></script> <script src="app.js"></script> </body> </html>

I have uploaded the complete code to Plunker AngularJS Routing

Any help would be greatly appreciated.

Thanks, Smitha

最满意答案

由于缺少angular-route.js，plunker无法工作。 但是我能看到你忘记给角度依赖 - ngRoute

var sampleApp = angular.module('sampleApp', ['ngRoute']);

这个官方教程展示了如何使用路由器https://docs.angularjs.org/tutorial/step_07

我已经更新了你的plunker有效的变化

http://plnkr.co/edit/BBG3XH3akxfAKMzjT71E?p=preview

主要问题 - 版本mishmash - 上传角度 - 1.3.x，上传角度溃败 - 1.2-x链接角度到html - 1.0-7

我已将它们更改为cdn 1.3.3

接下来的事情 - 模板的错误链接 - 即使它可以在localhost上工作 - 在plunker中，不能在模板名称的开头。

我已经更改了它应该在ng-href中开始＃的链接。

多数民众赞成。

The plunker doesnt work because of missing angular-route.js. But What can I see you have forgotten to give angular dependency - ngRoute

var sampleApp = angular.module('sampleApp', ['ngRoute']);

This oficial tutorial shows how to use the router https://docs.angularjs.org/tutorial/step_07

I have updated your plunker with changes which works

http://plnkr.co/edit/BBG3XH3akxfAKMzjT71E?p=preview

Main problem - version mishmash - uploaded angular - 1.3.x, uploaded angular-rout - 1.2-x linked angular to html - 1.0-7

I have changed them to cdn 1.3.3

Next thing - wrong links to templates - even if it could work on localhost - in plunker there cant be / on begining of templates name.

I have changed also links it should start # in ng-href.

Thats basically all.

AngularJS路由器代码无法正常工作(AngularJS router code not working)

我已经检查了Stack溢出和许多其他博客，但我无法解决我在AngularJS代码中的路由问题。 我没有收到任何错误，但路由似乎根本没有发生。 有人可以帮我解决这个问题吗？ 主要的index.html就在这里

<!DOCTYPE html> <html lang="en"> <head> <title>AngularJS Routing example</title> </head> <body data-ng-app="sampleApp"> <div class="container"> <div class="row"> <div class="col-md-3"> <ul class="nav"> <li><a href="#AddNewOrder"> Add New Order </a></li> <li><a href="#ShowOrders"> Show Order </a></li> </ul> </div> <div class="col-md-9"> <div data-ng-view></div> </div> </div> </div> <script src="angular.min.js"></script> <script src="angular-route.js"></script> <script src="app.js"></script> </body> </html>

我已将完整的代码上传到Plunker AngularJS Routing

任何帮助将不胜感激。

谢谢，Smitha

I have checked Stack overflow and many other blogs but I was not able to resolve the routing issue that I have in my AngularJS code. I'm not getting any error but the routing doesn't seem to be happening at all. Can anyone please help me fix this issue? The main index.html is here

<!DOCTYPE html> <html lang="en"> <head> <title>AngularJS Routing example</title> </head> <body data-ng-app="sampleApp"> <div class="container"> <div class="row"> <div class="col-md-3"> <ul class="nav"> <li><a href="#AddNewOrder"> Add New Order </a></li> <li><a href="#ShowOrders"> Show Order </a></li> </ul> </div> <div class="col-md-9"> <div data-ng-view></div> </div> </div> </div> <script src="angular.min.js"></script> <script src="angular-route.js"></script> <script src="app.js"></script> </body> </html>

I have uploaded the complete code to Plunker AngularJS Routing

Any help would be greatly appreciated.

Thanks, Smitha

最满意答案

由于缺少angular-route.js，plunker无法工作。 但是我能看到你忘记给角度依赖 - ngRoute

var sampleApp = angular.module('sampleApp', ['ngRoute']);

这个官方教程展示了如何使用路由器https://docs.angularjs.org/tutorial/step_07

我已经更新了你的plunker有效的变化

http://plnkr.co/edit/BBG3XH3akxfAKMzjT71E?p=preview

主要问题 - 版本mishmash - 上传角度 - 1.3.x，上传角度溃败 - 1.2-x链接角度到html - 1.0-7

我已将它们更改为cdn 1.3.3

接下来的事情 - 模板的错误链接 - 即使它可以在localhost上工作 - 在plunker中，不能在模板名称的开头。

我已经更改了它应该在ng-href中开始＃的链接。

多数民众赞成。

The plunker doesnt work because of missing angular-route.js. But What can I see you have forgotten to give angular dependency - ngRoute

var sampleApp = angular.module('sampleApp', ['ngRoute']);

This oficial tutorial shows how to use the router https://docs.angularjs.org/tutorial/step_07

I have updated your plunker with changes which works

http://plnkr.co/edit/BBG3XH3akxfAKMzjT71E?p=preview

Main problem - version mishmash - uploaded angular - 1.3.x, uploaded angular-rout - 1.2-x linked angular to html - 1.0-7

I have changed them to cdn 1.3.3

Next thing - wrong links to templates - even if it could work on localhost - in plunker there cant be / on begining of templates name.

I have changed also links it should start # in ng-href.

Thats basically all.