Question

我在使用ngRoute时遇到了麻烦。一切看起来都拼写正确，我相信我的语法是正确的。页面没有路由，我得到了进样器：modulerr错误。

的index.html：

<body ng-app='creativeBillingApp' >


<script src="bower_components/jquery/dist/jquery.js"></script>
<script src="bower_components/angular/angular.min.js"></script>
<script src="bower_components/json3/lib/json3.js"></script>
<script src="bower_components/bootstrap/dist/js/bootstrap.js"></script>
<script src="bower_components/angular-resource/angular-resource.js"></script>
<script src="bower_components/angular-cookies/angular-cookies.js"></script>
<script src="bower_components/angular-sanitize/angular-sanitize.js"></script>
<script src="bower_components/angular-animate/angular-animate.js"></script>
<script src="bower_components/angular-touch/angular-touch.js"></script>
**<script src="bower_components/angular-route/angular-route.js"></script>**
<script src="bower_components/plugins/jquery.slimscroll.min.js"></script>
<script src="bower_components/plugins/jquery.easing.min.js"></script>
<script src="bower_components/plugins/appear/jquery.appear.js"></script>
<script src="bower_components/plugins/jquery.placeholder.js"></script>
<script src="bower_components/plugins/fastclick.js"></script>

routes.js

use strict';

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


 app.config(['$routeProvider', function($routeProvider) {
  $routeProvider
   .when('/', {
     templateUrl: 'views/main.html',
     controller: 'MainCtrl'
  })

   .when('/carriers', {
     templateUrl: 'views/carriers.html',
     controller: 'MainCtrl'
  })
  .otherwise({redirectTo: '/'});
 }])

app.js

'use strict';

angular.module('creativeBillingApp', [
    'ngAnimate',
    'ngCookies',
    'ngResource',
    'ngRoute',
    'ngSanitize',
    'ngTouch'
  ]);

完成index.html：

       <!DOCTYPE HTML>
<html ng-app='creativeBillingApp' class="no-js">
  <head>
    <meta charset="utf-8">
    <title></title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width">
    <!-- Place favicon.ico and apple-touch-icon.png in the root directory -->
  <!-- build:css(.) styles/vendor.css -->
    <!-- bower:css -->
    <link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css" />
    <!-- endbower -->
    <!-- endbuild -->
    <!-- build:css(.tmp) styles/main.css -->

<link rel="stylesheet" href="styles/main.css">
<link rel="stylesheet" href="bower_components/www/css/font-awesome.css">
<link rel="stylesheet" href="bower_components/www/css/themify-icons.css"/>
<link rel="stylesheet" href="bower_components/www/css/animate.min.css"/>
<link rel="stylesheet" href="bower_components/www/css/skins/palette.css"/>
<link rel="stylesheet" href="bower_components/www/css/fonts/font.css"/>
<link rel="stylesheet" href="bower_components/www/css/main.css"/>

<script src="bower_components/www/plugins/modernizr.js"></script>
<!-- endbuild -->




  </head>
  <body>



      <!-- main content -->
          <div class="mainContainer" ng-view></div>
          <!-- /main content -->


    </section>

</div>

</script>

<!-- build:js(.) scripts/oldieshim.js -->
<!--[if lt IE 9]>
<script src="bower_components/es5-shim/es5-shim.js"></script>
<script src="bower_components/json3/lib/json3.min.js"></script>
<![endif]-->
<!-- endbuild -->

<!-- build:js(.) scripts/vendor.js -->
<!-- bower:js -->
<script src="bower_components/jquery/dist/jquery.js"></script>
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/json3/lib/json3.js"></script>
<script src="bower_components/bootstrap/dist/js/bootstrap.js"></script>
<script src="bower_components/angular-resource/angular-resource.js"></script>
<script src="bower_components/angular-cookies/angular-cookies.js"></script>
<script src="bower_components/angular-sanitize/angular-sanitize.js"></script>
<script src="bower_components/angular-animate/angular-animate.js"></script>
<script src="bower_components/angular-touch/angular-touch.js"></script>
<script src="bower_components/angular-ui-router/release/angular-ui-router.js"></script>
<script src="bower_components/plugins/jquery.slimscroll.min.js"></script>
<script src="bower_components/plugins/jquery.easing.min.js"></script>
<script src="bower_components/plugins/appear/jquery.appear.js"></script>
<script src="bower_components/plugins/jquery.placeholder.js"></script>
<script src="bower_components/plugins/fastclick.js"></script>
<!-- endbower -->
<!-- endbuild -->





    <!-- build:js({.tmp,app}) scripts/scripts.js -->
    <script src="scripts/app.js"></script>
    <script src="scripts/routes.js"></script>
    <script src="scripts/offscreen.js"></script>
    <script src="scripts/main.js"></script>
    <script src="scripts/controllers/main.js"></script>
    <script src="scripts/filters/reverse.js"></script>
    <script src="scripts/controllers/account.js"></script>
    <script src="scripts/controllers/user.js"></script>


    <!-- endbuild -->
  </body>
 </html>

这是我得到的错误：

  GET http://localhost:9000/bower_components/www/css/main.css.map 404 (Not Found)     (index):220
Uncaught Error: [$injector:modulerr] Failed to instantiate module creativeBillingApp due to:
TypeError: undefined is not a function
at http://localhost:9000/scripts/routes.js:30:8
at Object.invoke (http://localhost:9000/bower_components/angular/angular.js:3869:17)
at http://localhost:9000/bower_components/angular/angular.js:3788:37
at Array.forEach (native)
at forEach (http://localhost:9000/bower_components/angular/angular.js:323:11)
at loadModules (http://localhost:9000/bower_components/angular/angular.js:3775:5)
at createInjector (http://localhost:9000/bower_components/angular/angular.js:3715:11)
at doBootstrap (http://localhost:9000/bower_components/angular/angular.js:1379:20)
at bootstrap (http://localhost:9000/bower_components/angular/angular.js:1394:12)
at angularInit (http://localhost:9000/bower_components/angular/angular.js:1307:5)
http://errors.angularjs.org/1.2.16/$injector/modulerr?p0=creativeBillingApp…2F%2Flocalhost%3A9000%2Fbower_components%2Fangular%2Fangular.js%3A1307%3A5) angular.js:78

Answer 1

您的应用名称creativeBillingApp应注册one time。

从routes.php删除以下行并检查

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

由于app是global variable，您可以直接在routes.js

中使用它

注意：routes.js应在app.js

之后致电

工作演示：http://plnkr.co/edit/dZ9AY0qIXD7YJD1UAt3C?p=preview

ngRoute不工作并接收modulerr

1 个答案: