0

为什么我的路线不能正常工作？

我确定我的代码是正确的，但是当我尝试运行它时没有任何事情发生，为什么路由不路由文件？

这是我的主要文件代码

路线.html

<!DOCTYPE html>
<html data-ng-app="MyApp">
    <head>
        <title>Routes</title>

    </head>
    <body>

        <div >
            <!-- my views -->
            <div data-ng-view=""></div>
        </div>

        <a href="#/view1">view 1</a>
        <a href="#/view2">view 2</a>

        <!-- angular -->
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular.min.js"></script>

        <!-- routes -->
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular-route.js"></script>


        <!-- scope -->
        <script>
      var myApp = angular.module("MyApp",[]);

      // define my routes 
      myApp.config(function($routeProvider){
        $routeProvider.when('/',
            {
                templateUrl: 'view1.html',
                controller: 'SimpleController'
            });
          $routeProvider.when('/view2',
            {
                templateUrl: 'view2.html',
                controller: 'SimpleController'
            });
          $routeProvider.otherwise ({redirectTo: '/'});
      });

      // define my controller
      myApp.controller("SimpleController", function($scope)
      {
                // my array 
                $scope.customers=[
                    {name:'astm',city:'Alex'},
                    {name:'tamer',city:'Usa'},
                    {name:'ahmed',city:'Cairo'}
                ];

          // add new persons to my array
          $scope.addPerson = function(){
            $scope.customers.push(
            {
                name: $scope.newPerson.name,
                city: $scope.newPerson.city
            });
          };

      });

        </script>

    </body>
</html>

这是第一个视图文件 view1.html

<div class="container">
    <h2>View 1</h2>
    Name :
    <br>
    <input type="text" data-ng-model="filter.name">
    <br>
    <ul class="list-group">
        <li class="list-group-item" data-ng-repeat="person in customers | filter:filter.name | orderBy:'name' ">
            {{ person.name}} live in {{ person.city}}
        </li>   
    </ul>

    <br>

    <h2>Add new person</h2>

    Name :
    <br>
    <input type="text" data-ng-model="newPerson.name">

    <br>
    City :
    <br>
    <input type="text" data-ng-model="newPerson.city">

    <br>
    <button data-ng-click="addPerson()">Add person</button>

    <a href="#/view2">view 2</a>

</div>

这是第二个视图文件 view2.html

<div class="container">
    <h2>View 2</h2>
    City :
    <br>
    <input type="text" data-ng-model="city">
    <br>
    <ul class="list-group">
        <li class="list-group-item" data-ng-repeat="person in customers | filter:city | orderBy:'city' ">
            {{ person.name}} live in {{ person.city}}
        </li>   
    </ul>

    <a href="#/view1">view 1</a>

</div>
4

1 回答 1

1

您尚未在应用程序中添加 ngRoute 的依赖项..

 var myApp = angular.module("MyApp",['ngRoute']);

      // define my routes 
      myApp.config(function($routeProvider){
        $routeProvider.when('/',
            {
                templateUrl: 'view1.html',
                controller: 'SimpleController'
            });
          $routeProvider.when('/view2',
            {
                templateUrl: 'view2.html',
                controller: 'SimpleController'
            });
          $routeProvider.otherwise ({redirectTo: '/'});
      });

      // define my controller
      myApp.controller("SimpleController", function($scope)
      {
        // my array 
                $scope.customers=[
                    {name:'astm',city:'Alex'},
                    {name:'tamer',city:'Usa'},
                    {name:'ahmed',city:'Cairo'}
                ];

          // add new persons to my array
          $scope.addPerson = function(){
            $scope.customers.push(
            {
                name: $scope.newPerson.name,
                city: $scope.newPerson.city
            });
          };

      });

这是工作的plunkr

于 2015-07-22T13:08:10.770 回答