AngularJS 1.2.9 ngRoute"未知提供者$ routeProvider错误与requireJS

时间:2014-07-22 05:28:11

标签: javascript angularjs requirejs angular-routing

我正在使用angularJS-1.2.9和angular-route-1.2.9为我的应用程序设置路由,我使用requireJS作为依赖加载器并模块化代码。我已将ngRoute依赖项添加到AngularJS配置中,但仍然在chrome控制台中出现以下错误未捕获错误:[$ injector:modulerr]由于以下原因无法实例化myApp模块:错误:[$ injector:unpr]未知提供者:$ routeProvoider

这是我的代码

main.js

 require.config({
    baseUrl: './js',
    paths: {
        angular: 'libs/angular-1.2.9',
        angularRoute: 'libs/angular-route-1.2.9'
    },
    shim: {
        'angularRoute': {
            deps: ['angular'],
            exports: 'angularRoute'
        },
        'angular': {
            exports: 'angular'
        }
    }
});

require(['angular', 'angularRoute'], function (angular, angularRoute) {
    'use strict';

    var app = angular.module('myApp', ['ngRoute']);
    angular.element(document).ready(function () {
        angular.bootstrap(document, ['myApp']);
    });

    app.controller('indexController', function ($scope, $http) {
        console.log('inside index');
    });
    app.config(
        function ($routeProvoider) {
            $routeProvider.
            when('/', {
                templateUrl: 'index_content.html',
                controller: 'indexController'
            })
        });
});

这是我的html文件

的index.html

<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
        <meta charset="utf-8">
        <script data-main="js/main.js" src="js/libs/require.js"></script>
    </head>
    <body>
        <div ng-view>

        </div>
    </body>
</html>

index_content.html

<p>inside Index content</p>
<h1>testing the ang routes 

这里的问题是什么?为什么它仍然会泄露上述错误?如何解决这个问题??

2 个答案:

答案 0 :(得分:3)

我已经纠正的代码中的$ routeProvider上有一个拼写错误,并将代码放在下面:

代码段:

require(['angular', 'angularRoute'], function (angular, angularRoute) {
'use strict';

var app = angular.module('myApp', ['ngRoute']);
angular.element(document).ready(function () {
    angular.bootstrap(document, ['myApp']);
});

app.controller('indexController', function ($scope, $http) {
    console.log('inside index');
});
app.config(
    function ($routeProvider) { //One typo here
        $routeProvider.
        when('/', {
            templateUrl: 'index_content.html',
            controller: 'indexController'
        })
    });
});

答案 1 :(得分:0)

app.config(
  function ($routeProvider) {
    $routeProvider.
    when('/ResourceItem/:RE_RestoId',{
      templateUrl:'./partials/state-view.html',
      controller: function ($routeParams, ResourceService) {
        this.params = $routeParams;

        var that =  this;
        ResourceService.getResourceItem(this.params.RE_RestoId || "").success(function (data) {
          that.items = data;
        })

        this.addItemTo = function (resource)
        {
          if(!resource.items)
          {
            resource.items = [];
          }
          resource.items.push({TA_Code: this.newResourceItem });
          this.newResourceItem="";
        };

      },
      controllerAs:'ResourceItemCtrl'


    });
});