添加路由提供程序时出现未捕获的对象错误答案

【问题标题】：Uncaught Object Error when adding route provider添加路由提供程序时出现未捕获的对象错误
【发布时间】：2014-08-28 16:25:41
【问题描述】：

您好，我是 Angular js 的新手，正在尝试使用路由提供程序创建网页。如果没有路由提供程序函数的声明，角度脚本可以正常工作。但是当我添加它时，它会给出一个错误“angular.min.js 文件中的未捕获对象”我有三个 html 页面。 index.html 页面包含所有脚本和一个带有ng-view 的div，view1.html 和view2.html 是包含html 内容的主要文件。我是 angular js 的新手，只是为了演示目的，我在 html 中编写了 angular 脚本。请帮帮我。

index.html

<!DOCTYPE html>
    <html data-ng-app="demoApp">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title></title>

         <script src="angular.min.js" type="text/javascript"></script>
    </head>
    <body>
        <div data-ng-controller="SimpleController">
            <!-- Placeholder for views -->
            <div data-ng-view=""></div>
        </div>

        <script>
            var demoApp = angular.module('demoApp', []);

            demoApp.config(function ($routeProvider) {
              $routeProvider
                .when('/',
                  {
                    controller: 'SimpleController', 
                    templateUrl: 'Partials/view1.html'
                  })
                .when('/view2',
                  {
                    controller: 'SimpleController', 
                    templateUrl: 'Partials/view2.html'
                  })
                .otherwise({ redirectTo: '/' });
            });

            demoApp.controller('SimpleController', function ($scope) {
              $scope.customers=[
                {name:'paresh', city: 'bangalore'},
                {name:'alpha', city: 'sanfrancisco'},
                {name:'roger', city: 'boulder'}
              ];

              $scope.addCustomer = function(){
                $scope.customers.push(
                  {
                    name  : $scope.newCustomer.name,
                    city: $scope.newCustomer.city
                  });
              };
            });
        </script>
    </body>
</html>

view1.html

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

    <br>
    customer name<br>
    <input type="text" data-ng-model="newCustomer.name"/>
    customer city<br>
    <input type="text" data-ng-model="newCustomer.city"/>
    <br>
    <button data-ng-click="addCustomer()">Add customer</button>
    <a href="#/view2">view 2</a>
</div>

view2.html

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

请帮我解决这个问题。谢谢你

【问题讨论】：

标签： javascript angularjs

【解决方案1】：

你需要添加脚本

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

然后将依赖注入到你的模块中：

  var demoApp = angular.module('demoApp', ['$routeProvider']);
  demoApp.config(function ($routeProvider) {
          $routeProvider
            .when('/',
              {
                controller: 'SimpleController', 
                templateUrl: 'Partials/view1.html'
              })
            .when('/view2',
              {
                controller: 'SimpleController', 
                templateUrl: 'Partials/view2.html'
              })
            .otherwise({ redirectTo: '/' });
        });

【讨论】：

这行得通。非常感谢。真的很感激。

【解决方案2】：

需要安装ng-route依赖

将此添加到您的脚本标签

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

然后将依赖注入到你的模块中

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

希望这会有所帮助。

【讨论】：