2014-05-05 11 views
6

Ich habe Probleme mit ui-Router mit Yeoman running grunt.

Wenn ich

grunt serve

das Skript

mit

grunt

arbeitet

betreibe ich habe:

Connected on socket um1BuGgogBUojHlvIawT with id 77936474 
Chrome 30.0.1599 (Linux) Controller: MainCtrl should attach a list of awesomeThings to the scope FAILED 
    Error: [$injector:modulerr] Failed to instantiate module browserApp due to: 
    Error: [$injector:modulerr] Failed to instantiate module ui.router due to: 
    Error: [$injector:nomod] Module 'ui.router' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument. 
    http://errors.angularjs.org/1.2.16/$injector/nomod?p0=ui.router 
     at /home/whisher/browser/app/bower_components/angular/angular.js:78:12 

Was ist das Problem!

:(

bower.json

{ 
    "name": "browser", 
    "version": "0.0.0", 
    "dependencies": { 
    "angular": "~1.2.16", 
    "jquery": "~1.11.0", 
    "bootstrap": "~3.0.3", 
    "angular-bootstrap": "0.10.0", 
    "angular-ui-router": "~0.2.10" 
}, 
    "devDependencies": { 
    "angular-mocks": "1.2.15", 
    "angular-scenario": "1.2.15" 
    } 
} 

index.html

<!doctype html> 
<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,app}) styles/main.css --> 
    <link rel="stylesheet" href="styles/main.css"> 
    <link rel="stylesheet" href="styles/auth.css"> 
    <!-- endbuild --> 
</head> 
    <body ng-app="browserApp">> 
     <div class="navbar navbar-inverse navbar-fixed-top"> 
      <div class="container"> 
       <div class="navbar-header"> 
        <h1><a data-ui-sref="home" class="navbar-brand">Test</a></h1> 
       </div> 
      </div> 
     </div> 
     <div class="jumbotron"> 
      <div class="container"> 
       <div data-ui-view></div> 
      </div> 
     </div> 
     <div class="container"> 
      <div class="footer"> 
       <p>Test</p> 
      </div> 
     </div> 




     <!-- 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/bootstrap/dist/js/bootstrap.js"></script> 
     <script src="bower_components/angular-bootstrap/ui-bootstrap-tpls.js"></script> 
     <script src="bower_components/angular-ui-router/release/angular-ui-router.js"></script> 
     <!-- endbower --> 
     <!-- endbuild --> 
     <!-- Libs --> 

    <script type="text/javascript" src="cordova.js"></script> 

     <!-- build:js({.tmp,app}) scripts/scripts.js --> 
     <script src="scripts/app.js"></script> 
     <script src="scripts/controllers/main.js"></script> 
     <script src="scripts/controllers/signin.js"></script> 
     <script type="text/javascript"> 
      var app = { 
       initialize: function() { 
        this.bindEvents(); 
       }, 
       bindEvents: function() { 
        document.addEventListener('deviceready', this.onDeviceReady, true); 
       }, 

       onDeviceReady: function() { 
        angular.element(document).ready(function() { 
         angular.bootstrap(document); 
        }); 
       } 
      }; 
      app.initialize(); 
     </script> 
     <!-- endbuild --> 
    </body> 
</html> 

app.js

'use strict';

angular.element(document).ready(function() { 
    //Fixing facebook bug with redirect 
    if (window.location.hash === '#_=_') { 
     window.location.hash = '#!'; 
    } 
}); 

angular.module('browserApp', ['ui.router']) 
    .run(['$rootScope','$log',function ($rootScope, $log) { 
     $rootScope.$log = $log; 
    }]) 
    .config(['$stateProvider', '$urlRouterProvider', 
     function($stateProvider, $urlRouterProvider) { 
      // For unmatched routes: 
      $urlRouterProvider.otherwise('/'); 

      // states for my app 
      $stateProvider 
      .state('home', { 
       url: '/', 
       templateUrl: 'views/main.html', 
       controller: 'MainCtrl' 
      }) 
      .state('signin', { 
       url: '/signin', 
       templateUrl: 'views/signin.html', 
       controller: 'SigninCtrl' 
      }); 
     } 
     ]) 
    .config(['$locationProvider', 
     function($locationProvider) { 
      $locationProvider.hashPrefix('!'); 
     } 
     ]) 
    .config(['$httpProvider', 
     function($httpProvider) { 
      $httpProvider.defaults.useXDomain = true; 
      delete $httpProvider.defaults.headers.common['X-Requested-With']; 
     } 
     ]); 

Controller/main.js

'use strict'; 

angular.module('browserApp') 
    .controller('MainCtrl',['$scope' ,function ($scope) { 
    $scope.awesomeThings = [ 
     'HTML5 Boilerplate', 
     'AngularJS', 
     'Karma' 
    ]; 
    }]); 

Gruntfile.js

// Generated on 2014-05-03 using generator-angular 0.8.0 
'use strict'; 

// # Globbing 
// for performance reasons we're only matching one level down: 
// 'test/spec/{,*/}*.js' 
// use this if you want to recursively match all subfolders: 
// 'test/spec/**/*.js' 

module.exports = function (grunt) { 

    // Load grunt tasks automatically 
    require('load-grunt-tasks')(grunt); 

    // Time how long tasks take. Can help when optimizing build times 
    require('time-grunt')(grunt); 

    // Define the configuration for all the tasks 
    grunt.initConfig({ 

     // Project settings 
     yeoman: { 
      // configurable paths 
      app: require('./bower.json').appPath || 'app', 
      dist: 'dist' 
     }, 

     // Watches files for changes and runs tasks based on the changed files 
     watch: { 
      bower: { 
       files: ['bower.json'], 
       tasks: ['bowerInstall'] 
      }, 
      js: { 
       files: ['<%= yeoman.app %>/scripts/{,*/}*.js'], 
       tasks: ['newer:jshint:all'], 
       options: { 
        livereload: true 
       } 
      }, 
      jsTest: { 
       files: ['test/spec/{,*/}*.js'], 
       tasks: ['newer:jshint:test', 'karma'] 
      }, 
      styles: { 
       files: ['<%= yeoman.app %>/styles/{,*/}*.css'], 
       tasks: ['newer:copy:styles', 'autoprefixer'] 
      }, 
      gruntfile: { 
       files: ['Gruntfile.js'] 
      }, 
      livereload: { 
       options: { 
        livereload: '<%= connect.options.livereload %>' 
       }, 
       files: [ 
       '<%= yeoman.app %>/{,*/}*.html', 
       '.tmp/styles/{,*/}*.css', 
       '<%= yeoman.app %>/images/{,*/}*.{png,jpg,jpeg,gif,webp,svg}' 
       ] 
      } 
     }, 

     // The actual grunt server settings 
     connect: { 
      options: { 
       port: 9000, 
       // Change this to '0.0.0.0' to access the server from outside. 
       hostname: 'localhost', 
       livereload: 35729 
      }, 
      livereload: { 
       options: { 
        open: true, 
        base: [ 
        '.tmp', 
        '<%= yeoman.app %>' 
        ] 
       } 
      }, 
      test: { 
       options: { 
        port: 9001, 
        base: [ 
        '.tmp', 
        'test', 
        '<%= yeoman.app %>' 
        ] 
       } 
      }, 
      dist: { 
       options: { 
        base: '<%= yeoman.dist %>' 
       } 
      } 
     }, 

     // Make sure code styles are up to par and there are no obvious mistakes 
     jshint: { 
      options: { 
       jshintrc: '.jshintrc', 
       reporter: require('jshint-stylish') 
      }, 
      all: [ 
      'Gruntfile.js', 
      '<%= yeoman.app %>/scripts/{,*/}*.js' 
      ], 
      test: { 
       options: { 
        jshintrc: 'test/.jshintrc' 
       }, 
       src: ['test/spec/{,*/}*.js'] 
      } 
     }, 

     // Empties folders to start fresh 
     clean: { 
      dist: { 
       files: [{ 
        dot: true, 
        src: [ 
        '.tmp', 
        '<%= yeoman.dist %>/*', 
        '!<%= yeoman.dist %>/.git*' 
        ] 
       }] 
      }, 
      server: '.tmp' 
     }, 

     // Add vendor prefixed styles 
     autoprefixer: { 
      options: { 
       browsers: ['last 1 version'] 
      }, 
      dist: { 
       files: [{ 
        expand: true, 
        cwd: '.tmp/styles/', 
        src: '{,*/}*.css', 
        dest: '.tmp/styles/' 
       }] 
      } 
     }, 

     // Automatically inject Bower components into the app 
     bowerInstall: { 
      app: { 
       src: ['<%= yeoman.app %>/index.html'], 
       ignorePath: '<%= yeoman.app %>/' 
      } 
     }, 

     // Renames files for browser caching purposes 
     rev: { 
      dist: { 
       files: { 
        src: [ 
        '<%= yeoman.dist %>/scripts/{,*/}*.js', 
        '<%= yeoman.dist %>/styles/{,*/}*.css', 
        '<%= yeoman.dist %>/images/{,*/}*.{png,jpg,jpeg,gif,webp,svg}', 
        '<%= yeoman.dist %>/styles/fonts/*' 
        ] 
       } 
      } 
     }, 

     // Reads HTML for usemin blocks to enable smart builds that automatically 
     // concat, minify and revision files. Creates configurations in memory so 
     // additional tasks can operate on them 
     useminPrepare: { 
      html: '<%= yeoman.app %>/index.html', 
      options: { 
       dest: '<%= yeoman.dist %>', 
       flow: { 
        html: { 
         steps: { 
          js: ['concat', 'uglifyjs'], 
          css: ['cssmin'] 
         }, 
         post: {} 
        } 
       } 
      } 
     }, 

     // Performs rewrites based on rev and the useminPrepare configuration 
     usemin: { 
      html: ['<%= yeoman.dist %>/{,*/}*.html'], 
      css: ['<%= yeoman.dist %>/styles/{,*/}*.css'], 
      options: { 
       assetsDirs: ['<%= yeoman.dist %>'] 
      } 
     }, 

     // The following *-min tasks produce minified files in the dist folder 
     cssmin: { 
      options: { 
       root: '<%= yeoman.app %>' 
      } 
     }, 

     imagemin: { 
      dist: { 
       files: [{ 
        expand: true, 
        cwd: '<%= yeoman.app %>/images', 
        src: '{,*/}*.{png,jpg,jpeg,gif}', 
        dest: '<%= yeoman.dist %>/images' 
       }] 
      } 
     }, 

     svgmin: { 
      dist: { 
       files: [{ 
        expand: true, 
        cwd: '<%= yeoman.app %>/images', 
        src: '{,*/}*.svg', 
        dest: '<%= yeoman.dist %>/images' 
       }] 
      } 
     }, 

     htmlmin: { 
      dist: { 
       options: { 
        collapseWhitespace: true, 
        collapseBooleanAttributes: true, 
        removeCommentsFromCDATA: true, 
        removeOptionalTags: true 
       }, 
       files: [{ 
        expand: true, 
        cwd: '<%= yeoman.dist %>', 
        src: ['*.html', 'views/{,*/}*.html'], 
        dest: '<%= yeoman.dist %>' 
       }] 
      } 
     }, 

     // ngmin tries to make the code safe for minification automatically by 
     // using the Angular long form for dependency injection. It doesn't work on 
     // things like resolve or inject so those have to be done manually. 
     ngmin: { 
      dist: { 
       files: [{ 
        expand: true, 
        cwd: '.tmp/concat/scripts', 
        src: '*.js', 
        dest: '.tmp/concat/scripts' 
       }] 
      } 
     }, 

     // Replace Google CDN references 
     cdnify: { 
      dist: { 
       html: ['<%= yeoman.dist %>/*.html'] 
      } 
     }, 

     // Copies remaining files to places other tasks can use 
     copy: { 
      dist: { 
       files: [{ 
        expand: true, 
        dot: true, 
        cwd: '<%= yeoman.app %>', 
        dest: '<%= yeoman.dist %>', 
        src: [ 
        '*.{ico,png,txt}', 
        '.htaccess', 
        '*.html', 
        'views/{,*/}*.html', 
        'images/{,*/}*.{webp}', 
        'fonts/*' 
        ] 
       }, { 
        expand: true, 
        cwd: '.tmp/images', 
        dest: '<%= yeoman.dist %>/images', 
        src: ['generated/*'] 
       }] 
      }, 
      styles: { 
       expand: true, 
       cwd: '<%= yeoman.app %>/styles', 
       dest: '.tmp/styles/', 
       src: '{,*/}*.css' 
      } 
     }, 

     // Run some tasks in parallel to speed up the build process 
     concurrent: { 
      server: [ 
      'copy:styles' 
      ], 
      test: [ 
      'copy:styles' 
      ], 
      dist: [ 
      'copy:styles', 
      'imagemin', 
      'svgmin' 
      ] 
     }, 

     // By default, your `index.html`'s <!-- Usemin block --> will take care of 
     // minification. These next options are pre-configured if you do not wish 
     // to use the Usemin blocks. 
     // cssmin: { 
     // dist: { 
     //  files: { 
     //  '<%= yeoman.dist %>/styles/main.css': [ 
     //   '.tmp/styles/{,*/}*.css', 
     //   '<%= yeoman.app %>/styles/{,*/}*.css' 
     //  ] 
     //  } 
     // } 
     // }, 
     // uglify: { 
     // dist: { 
     //  files: { 
     //  '<%= yeoman.dist %>/scripts/scripts.js': [ 
     //   '<%= yeoman.dist %>/scripts/scripts.js' 
     //  ] 
     //  } 
     // } 
     // }, 
     // concat: { 
     // dist: {} 
     // }, 

     // Test settings 
     karma: { 
      unit: { 
       configFile: 'karma.conf.js', 
       singleRun: true 
      } 
     } 
    }); 


    grunt.registerTask('serve', function (target) { 
     if (target === 'dist') { 
      return grunt.task.run(['build', 'connect:dist:keepalive']); 
     } 

     grunt.task.run([ 
      'clean:server', 
      'bowerInstall', 
      'concurrent:server', 
      'autoprefixer', 
      'connect:livereload', 
      'watch' 
      ]); 
    }); 

    grunt.registerTask('server', function (target) { 
     grunt.log.warn('The `server` task has been deprecated. Use `grunt serve` to start a server.'); 
     grunt.task.run(['serve:' + target]); 
    }); 

    grunt.registerTask('test', [ 
     'clean:server', 
     'concurrent:test', 
     'autoprefixer', 
     'connect:test', 
     'karma' 
     ]); 

    grunt.registerTask('build', [ 
     'clean:dist', 
     'bowerInstall', 
     'useminPrepare', 
     'concurrent:dist', 
     'autoprefixer', 
     'concat', 
     'ngmin', 
     'copy:dist', 
     'cdnify', 
     'cssmin', 
     'uglify', 
     'rev', 
     'usemin', 
     'htmlmin' 
     ]); 

    grunt.registerTask('default', [ 
     'newer:jshint', 
     'test', 
     'build' 
     ]); 
}; 
+0

können Sie uns Ihre HTML-und Controller-Code zeigen? –

+0

Ich habe den Beitrag aktualisiert – Whisher

+0

Kannst du die gruntfile hinzufügen? –

Antwort

15

Was von Yeoman erzeugt versagt ist Ihr Standard-Test. Standardmäßig fügt yeoman angular-router als Routing-Tool hinzu. Wenn Sie sich dafür entscheiden, ein anderes Tool wie den ui-router zu verwenden, müssen Sie es in Ihrer bower.json anzeigen (wie Sie es bereits getan haben), da grunt diese Abhängigkeiten verwendet, um sowohl finales Skript als auch index.html zu erzeugen (erforderliche Skripte werden hinzugefügt).

Es gibt noch einen anderen Platz, den Sie ändern müssen, damit Tests bestanden werden. Es ist die Datei karma.conf.js. Dort müssen Sie ui-Router-js-Datei in "Dateien" Array

files: [ 
    'bower_components/angular/angular.js', 
    'bower_components/angular-mocks/angular-mocks.js', 
    'bower_components/angular-animate/angular-animate.js', 
    'bower_components/angular-cookies/angular-cookies.js', 
    'bower_components/angular-resource/angular-resource.js', 
    'bower_components/angular-route/angular-route.js', //remove this 
    'bower_components/angular-ui-router/release/angular-ui-router.js', //add this 
    'bower_components/angular-sanitize/angular-sanitize.js', 
    'bower_components/angular-touch/angular-touch.js', 
    'app/scripts/**/*.js', 
    'test/mock/**/*.js', 
    'test/spec/**/*.js' 
], 
+0

Danke für die Antwort Ich bin ein wenig beschäftigt in dem Moment, wenn ich Freizeit habe Ich werde es überprüfen + 1 für den Hinweis :) – Whisher

+1

Brilliant, aus irgendeinem Grund konnte ich das selbst nicht herausfinden - das war der einzige Ort, an dem ich diese Information fand! – SharkofMirkwood

+0

Auch für mich war es der einzige Ort, an dem ich Infos gefunden habe und auch meine Arbeit mit Abhängigkeiten von einem Yeoman Fullstack Projekt gelöst hat. Es wurde nicht von dir generiert. Danke – ackuser

Verwandte Themen