javascript - Angular JS路由不起作用

标签 javascript jquery node.js angularjs

当我试图点击显示时,它没有显示任何东西,我在这上面浪费了很多时间,但没有人能帮上忙。

文件....

  1. 应用程序.js
  2. controller.js
  3. index.html
  4. 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",[]);

谢谢。

最佳答案

您需要在创建模块时注入(inject)“ngRoute”依赖项。

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

还要确保您获得 Angular 路由 js 并在您的 index.html 中添加对它的引用

<script src="scripts/angular-route.js"></script>

可以找到一个很好的例子here

如果这不能解决您的问题,请告诉我

更新

这是一个简单的 plunker 显示 AngularJS 路由

关于javascript - Angular JS路由不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22678229/

相关文章:

javascript - 使用 Javascript 在 TestComlete 中处理对象不存在错误

javascript - 如果 winWidth < 500,则光滑的 slider 会删除最后一张幻灯片

javascript - 异步等待众多之一

node.js - 将node.js应用程序部署到Firebase时504超时

javascript - 在 React 渲染 svg 之前,以编程方式将样式添加到 svg 中?

javascript - 如何保存树的顺序?

javascript - 使用数学优化使用 jQuery 修改 CSS 值的语法

jquery - 如何使输入字段中的某些文本不可编辑?

jquery - 如何创建多行轮播?

javascript - 如何通过 Protractor 处理Firefox中的下载文件保存对话框