日期:2014-05-16  浏览次数:20472 次

angularjs requeirjs配置相关

尝试了网上的yeoman generator 生成的脚手架项目不甚理想 


npm install -g generator-angular-require


yo angular-require


就不用那个了,现在在github上找来一个仔细研究下。


目录结构:


符合yeoman脚手架的基本目录结构

重点看一下 script下的目录结构



main.js


/*jshint unused: vars */
require.config({
  baseUrl: '../scripts',
  paths: {
    underscore: '../bower_components/underscore/underscore',
    jquery: '../bower_components/jquery/dist/jquery',
    bootstrap: '../bower_components/company-theme.git/src/js/bootstrap/bootstrap',
    dcjqaccordion: '../bower_components/company-theme.git/src/js/jquery.dcjqaccordion.2.7',
    scrollTo: '../bower_components/company-theme.git/src/js/jquery.scrollTo.min',
    nicescroll: '../bower_components/company-theme.git/src/js/jquery.nicescroll',
    select: '../bower_components/company-theme.git/src/js/bootstrap-select',
    ui: '../bower_components/company-theme.git/src/js/aug-ui',
    angular: '../bower_components/angular/angular',
    'angular-route': '../bower_components/angular-route/angular-route',
    'angular-cookies': '../bower_components/angular-cookies/angular-cookies',
    'angular-sanitize': '../bower_components/angular-sanitize/angular-sanitize',
    'angular-resource': '../bower_components/angular-resource/angular-resource',
    'angular-mocks': '../bower_components/angular-mocks/angular-mocks',
    'angular-scenario': '../bower_components/angular-scenario/angular-scenario'
  },
  shim: {
    underscore: {
      exports: 'underscore'
    },
    bootstrap: {
      deps: [
        'jquery'
      ],
      exports: 'bootstrap'
    },
    dcjqaccordion: {
      deps: [
        'jquery'
      ],
      exports: 'dcjqaccordion'
    },
    scrollTo: {
      deps: [
        'jquery'
      ],
      exports: 'scrollTo'
    },
    nicescroll: {
      deps: [
        'jquery'
      ],
      exports: 'nicescroll'
    },
    select: {
      deps: [
        'jquery'
      ],
      exports: 'select'
    },
    ui: {
      deps: [
        'dcjqaccordion',
        'nicescroll',
        'scrollTo',
        'select'
      ],
      exports: 'ui'
    },
    angular: {
      deps: [
        'jquery'
      ],
      exports: 'angular'
    },
    'angular-route': [
      'angular'
    ],
    'angular-cookies': [
      'angular'
    ],
    'angular-sanitize': [
      'angular'
    ],
    'angular-resource': [
      'angular'
    ],
    'angular-mocks': {
      deps: [
        'angular'
      ],
      exports: 'angular.mock'
    }
  },
  priority: [
    'angular'
  ]
});

//http://code.angularjs.org/1.2.1/docs/guide/bootstrap#overview_deferred-bootstrap
window.name = 'NG_DEFER_BOOTSTRAP!';

require([
  'angular',
  'app',
  'underscore',
  'jquery',
  'bootstrap',
  'dcjqaccordion',
  'scrollTo',
  'nicescroll',
  'select',
  'ui',
  'angular-route',
  'angular-cookies',
  'angular-sanitize',
  'angular-resource',
  'controllers/rootController',
  'services/userService',
  'directives/ngbkFocus'
], function(angular, app) {
  'use strict';
  angular.element().ready(function() {
    angular.resumeBootstrap([app.name]);
  });
});


main.js主要配置了requirejs的基本配置,包括path和shim的配置,shim是为了配置那些不支持amd规范的配置。


angular.element().ready(function() {
    angular.resumeBootstrap([app.name]);
  });

启动angular,或者可以写成另一种方法


require(['domReady!'], function (document) {       

        angular.bootstrap(document, ['app']);

     });

这样写需要在path里面配置

'domReady': '../lib/requirejs-domready/domReady',


app.js