Question

您好我是angular js的新手，并且正在尝试使用路由提供商创建一个网页。角度脚本在没有声明路由提供程序功能的情况下工作正常。但是当我添加它时，它会在angular.min.js文件中出现错误＆＃34; Uncaught Object＆＃34;我有三个html页面。 index.html页面包含所有脚本，并且带有ng-view的div，view1.html和view2.html是包含html内容的主文件。我是角度js的新手，只是为了演示目的我在html中编写角度脚本。请帮助我。

的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>

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

Answer 1

您需要安装ng-route依赖

将此添加到您的脚本代码

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

然后将依赖项注入您的模块

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

希望这有帮助。

Answer 2

您需要添加脚本

 <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 个答案: