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

define(['angular', 'controllers/controllers',
'services/services', 'filters/filters',
'directives/directives'], function (angular) {
return angular.module('MyApp', ['controllers', 'services','filters', 'directives','ngCookies','ngResource','ngSanitize','ngRoute'])
.config(['$routeProvider',
function($routeProvider) {
$routeProvider.when('/', {
templateUrl: 'views/root.html',
controller: 'RootCtrl'
});
}
]);
});

注意上面的app.name就是MyApp
这个js定义了angular的路由和整个app所以来的模块和服务，例如controllers和services这些是自己定义的module需要define是引入controllers／controllers和services／services

还有一些angular内置的模块服务例如ngRoute，

注意module的名字要个依赖时写的一样。

service文件夹下主要放置call api的代码，规范应该是这样的。

define(['services/services'],
function(services) {
services.factory('UserService', [
function($http) {
return {
getUser: function() {
return 'testUser';
}
};
}]);
});

自定义了一个提供userService的module，如果想在controllers里用到这个module可以

define(['controllers/controllers', 'services/userService'],
function(controllers) {
controllers.controller('RootCtrl', ['$scope', 'UserService',
function($scope, UserService,$http) {

$scope.name = UserService.getUser();
}]);
});

注意UserService的名字要保持一至。

之所以有三种common的controllers.js 和 services.js 和 filter.js是为了requirejs时方便一些。

GruntFile.js文件

// Generated on 2014-04-25 using generator-angular-require 0.1.13
'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: {
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}'
]
},
less: {
files: ['**/*.less'],
tasks: [ 'less'],
options: {
livereload: true
}
}
},

// 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
'bower-install': {
app: {
html: '<%= 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 %>'
}
},

// 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
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 %>'
}]
}
},

// Allow the use of non-minsafe AngularJS files. Automatically makes it
// minsafe compatible so Uglify does not destroy the ng references
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',
'bower_components/requirejs/**/*',
'images/{,*/}*.{webp}',
'fonts/*'
]
}, {
expand: true,
cwd: '.tmp/images',
dest: '<%= yeoman.dist %>/images',
src: ['generated/*']
},
{
expand: true,
dot: true,
cwd: '<%= yeoman.app %>',
dest: '<%= yeoman.dist %>/fonts',
src: ['bower_components/company-theme.git/src/css/fonts/*'],
flatten: true
}]
},
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: {
options: {
keepSpecialComments: '0'
},
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
}
},

// Settings for grunt-bower-requirejs
bower: {
app: {
rjsConfig: '<%= yeoman.app %>/scripts/main.js',
options: {
exclude: ['requirejs', 'json3', 'es5-shim']
}
}
},

replace: {
test: {
src: '<%= yeoman.app %>/../test/test-main.js',
overwrite: true,
replacements: [{
from: /paths: {[^}]+}/,
to: function() {
return require('fs').readFileSync(grunt.template.process('<%= yeoman.app %>') + '/scripts/main.js').toString().match(/paths: {[^}]+}/);
}
}]
}
},

less: {
dist: {
expand: true,
cwd: "<%= yeoman.app %>/styles",
src: "{,*/}*.less",
dest: ".tmp/styles",
ext: ".css"

}
},
// r.js compile config
requirejs: {
dist: {
options: {
dir: "<%= yeoman.dist %>/scripts/",
modules: [{
name: 'main'
}],
preserveLicenseComments: false, // remove all comments
removeCombined: true,
baseUrl: '<%= yeoman.app %>/scripts',
mainConfigFile: '<%= yeoman.app %>/scripts/main.js',
optimize: 'uglify2',
uglify2: {
mangle: false
}
}
}
}
});

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

grunt.task.run([
'clean:server',
'bower-install',
'concurrent:server',
'autoprefixer',
'connect:livereload',
'less',
'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',
'less',
'bower-install',
'bower:app',
'replace:test',
'useminPrepare',
'concurrent:dist',
'autoprefixer',
'concat',
'ngmin',
'copy:dist',
'cdnify',
'cssmin',
// Below task commented out as r.js (via grunt-contrib-requirejs) will take care of this
// 'uglify',
'requirejs:dist',
'rev',
'usemin',
'htmlmin'
]);

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

具体每项的配置可以参考以前的博客，就不多说了。