javascript - 为什么 foodModule not defined 错误？ Angular js

Question

你好，我已经把它从路由文件中分离出来了。但它给模块未定义错误。谁能猜出问题所在？

主要.js

var foodModule = angular.module('scratchpad',['ui.router','ngResource']);

路由.js

console.log('route.js included successfully');


foodModule.config(function($stateProvider,$httpProvider) {

    $stateProvider.state('home',{
    url:'/home',
    templateUrl:'templates/food.html',
        controller:'addUserController'
  })
  .state('scratchpad',{
        url:'/scratchpad',
        templateUrl:'templates/scratchpad.html',
        controller:'scratchListController'
    })
    .state('addNewScratch',{
        url:'/addNewScratch',
        templateUrl:'templates/addNewScratch.html',
        controller:'addScratchController'
    })
    .state('scratchpad.viewScratch',{
        url:'/scratchpad/:id/view',
        templateUrl:'templates/viewScratch.html',
        controller:'viewScratchController'
    })
}).run(function($state){
    $state.go('home');
});

错误:

Uncaught ReferenceError: foodModule is not defined

Answer 1

不要缓存你的 Angular 模块，你会把东西泄漏到全局范围内。而是这样做:

对于 main.js:

//Just declare the module
angular.module('scratchpad',['ui.router','ngResource']);

对于路由 js... 这样做:

angular.module('scratchpad')
  .config(function($stateProvider,$httpProvider) {

    $stateProvider.state('home',{
    url:'/home',
    templateUrl:'templates/food.html',
        controller:'addUserController'
  })
  .state('scratchpad',{
        url:'/scratchpad',
        templateUrl:'templates/scratchpad.html',
        controller:'scratchListController'
    })
    .state('addNewScratch',{
        url:'/addNewScratch',
        templateUrl:'templates/addNewScratch.html',
        controller:'addScratchController'
    })
    .state('scratchpad.viewScratch',{
        url:'/scratchpad/:id/view',
        templateUrl:'templates/viewScratch.html',
        controller:'viewScratchController'
    })
}).run(function($state){
    $state.go('home');
});

更好的是，将它们包裹在里面 IIFE .

参见 John Papa's Angular style guide为了更好的解释...

我建议也使用 gulp/grunt 将它们捆绑在一起，以便它们按正确的顺序排列并提供捆绑服务。除非您使用像 require/system js 这样的模块加载器，否则不能保证 main js 将首先执行。之前在 IE 中被类似的东西咬过。也许this article可以阐明这个问题，但没有什么是好的构建系统无法解决的，所以是的......