1

我只是想学习 Angular.Js 并被困在这里观看教程。我刚刚使用以下代码创建了一个演示应用程序......我收到了以下错误。任何帮助将不胜感激。

   Error: [$injector:modulerr] Failed to instantiate module demoApp due to:        [$injector:unpr] Unknown provider: $routeProvider



   <!doctype html>
<html lang="en" data-ng-app="demoApp">
<head>

  <meta charset="utf-8">
  <title>My HTML File</title>
  <link rel="stylesheet" href="css/app.css">
  <link rel="stylesheet" href="css/bootstrap.css">


</head>
<body>

<!-- Placeholder for views -->

  <div>
    <div data-ng-view=""> </div>
  </div>

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

<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: '/'
    })
  });



  function SimpleController($scope)
  {
    $scope.customers=[
      {name:'AB',city:'Glasgow', cash:20},
      {name:'CD',city:'United States', cash:30},
      {name:'EF',city:'India', cash:40}
    ];

    $scope.addCustomer = function (){
      $scope.customers.push({
        name: $scope.newCustomer.name,
        city: $scope.newCustomer.city,
        cash: $scope.newCustomer.cash
      });
    };

  }


  demoApp.controller('SimpleController', SimpleController);

</script>

</body>

</html>

view1.html

<div class="container">

    <h2>View1</h2>
    </br>
    Name: 
    <br/>
    <input type="text" data-ng-model="filter.name" />
    </br>
    <ul>
        <li data-ng-repeat="cust in customers | filter:filter.name"> {{ cust.name }} - {{ cust.city }} - {{ cust.cash | currency:{£} }} </li>
    </ul>

    </br>
    Customer name: </br>
    <input type="text" dta-ng-model="newCustomer.name" />
    </br>

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

    Cash: </br>
    <input type="text" data-ng-model="newCustomer.cash" />
    </br>

    <button type="button" data-ng-click="addCustomer()" value="Add Customer" />
    <a href="#/view2">View 2</a>
</div>
4

2 回答 2

0

感谢@charlietfi 的修复。在 Angular 1.2 及更高版本中，将 Routing 注入您的 demoApp 的语法是：

<script>

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

...
于 2014-01-28T00:02:45.830 回答
0

在模块中添加 ngRoute 依赖。

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

还包括 angular-route.js

<script type="text/javascript" src="angular-route.js"></script>
于 2014-02-16T08:10:43.527 回答