Angular JS路由不起作用答案

【问题标题】：Angular JS routing not workingAngular JS路由不起作用
【发布时间】：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",[]);

谢谢。

【问题讨论】：

您的控制台是否出现任何错误？

标签： javascript jquery node.js angularjs

【解决方案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