javascript - 为什么路由在这段代码中不起作用?

标签 javascript angularjs url-routing

这只是一个需要学习的小项目AngularJS ,并且我无法让路由正常工作。根据我查看过的每个教程,我这里的内容应该有效,但不幸的是,它不起作用。如果有人能帮助我找到我的问题并帮助我解决它,我将非常感激。

这是我的索引:

<!DOCTYPE html>
    <html ng-app="danApp">
        <head>
            <script src="Scripts/angular.min.js"></script>
            <script src="Scripts/test.js"></script>
        </head>
        <body>
            <div ng-view></div>
        </body>
    </html>

查看 1

<h1>View 1</h1>
<br><br><br><br>
<div>
   <input type="text" ng-model="nameText" >
      <ul>
         <li ng-repeat="things in info | filter: nameText | orderBy:'name'">
            Name: {{ things.name }} <br> Age: {{ things.age }} <br>
            City: {{ things.city }}
            <br>
         </li>
      </ul>
</div>

查看 2

<h1>View 2</h1>
<br><br><br><br>
<div>
    <input type="text" ng-model="nameText" >
      <ul>
         <li ng-repeat="stuff in parents | filter: nameText | orderBy:'name'">
            Name: {{ stuff.name }} <br> Age: {{ stuff.age }} <br>
            City: {{ stuff.city }}
            <br>
         </li>
      </ul>
</div>

最后,我的模块 Controller 路由代码

"use strict";

 var danApp = angular.module('danApp', []);
               
 danApp.controller("danCtrl", function($scope) {
    $scope.info = [
        {name: 'Daniel', age: '22', city: 'Clarksville'},
        {name: 'Derek', age: '19', city: 'Jacksonville'},
        {name: 'Emily', age: '18', city: 'Erin'},
        {name: 'Denise', age: '27', city: 'Phoenix'}, 
    ];
 });
               
               
 danApp.controller("danCtrl2", function($scope) {
   $scope.parents = [
      {name: 'Lathan', age: '54', city: 'Stewart'},
      {name: 'Candy', age: '54', city: 'Stewart'},
      {name: 'Christine', age: '43', city: 'Erin'}
   ];
 });           
               
               
danApp.config(function ($routeProvider) {
   $routeProvider
      .when('/',
      {
         controller: 'danCtrl',
         templateUrl: 'views/view1.html'
      })
      .when('/view2',
      {
         controller: 'danCtrl2',
         templateUrl: 'views/view2.html'
      })
      .otherwise({redirectTo: '/'});
});

最佳答案

问题是您需要包含 angular-route.jsangular-route.min.js 脚本,该脚本可以从 Angular website 下载。 。在index.html中添加脚本:

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

然后需要将该模块添加到您的模块中:

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

Plunkr

关于javascript - 为什么路由在这段代码中不起作用?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28375543/

相关文章:

c# - 使用复选框通过 javascript 更改对象可见性?

javascript - 在作用域内声明函数并稍后调用它

javascript - 如何将自己的 javascript 文件添加到 nanoc?

php - URL 不显示文件名或扩展名,怎么办? (PHP)

javascript - 单击了折线的哪一段?

javascript - 编辑 html/js 代码并在网页中显示输出

javascript - IE输入清除图标有时不触发change事件

javascript - 在 AngularJS 的 ionic 框架中使用 ui-router

javascript - Angular JS 中的多斜线路由 (1.2.x)

javascript - Flexbox 仅适用于 Chrome