Angularjs REQUEIRJS Configuration Related

Tried the online yeoman generator generated scaffolding project is not very ideal

NPM install-g Generator-angular-require

Yo Angular-require

That's not the case, and now we're looking for a detailed study on GitHub.

Folder structure:

Basic folder structure conforming to yeoman scaffolding

Focus on the folder structure under 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 '}, Boo Tstrap: {deps: [' jquery '], exports: ' Bootstrap '}, Dcjqaccordion: {deps: [' JQ Uery '], exports: ' Dcjqaccordion '}, ScrollTo: {deps: [' jquery '], exports: ' Scrol LTo '}, 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 '], ' Ang Ular-sanitize ': [' AngulAr '], ' angular-resource ': [' angular '], ' angular-mocks ': {deps: [' angular '], E Xports: ' Angular.mock '}, Priority: [' angular ']});//http://code.angularjs.org/1.2.1/docs/guide/bootstrap#over View_deferred-bootstrapwindow.name = ' ng_defer_bootstrap! '; require ([' angular ', ' app ', ' underscore ', ' jquery ', ' Bootstrap ', ' dcjqaccordion ', ' scrollTo ', ' nicescroll ', ' Sele '   CT ', ' 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 mainly configures the basic configuration of the Requirejs, including the configuration of path and shim, Shim is to configure those configurations that do not support AMD specifications.

Angular.element (). Ready (function () {
Angular.resumebootstrap ([app.name]);
});

Start angular, or be able to write another way

Require ([' domready! '], function (document) {

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

});

This writing needs to be configured in 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 ')              });            }      ]);});

Note that the app.name above is MyApp.

This JS defines the routing of angular and the modules and services that the entire app has such as controllers and services are custom module needs define is to introduce Controllers/controllers and services/services

Other angular built-in module services such as Ngroute,

Note that the module's name is written on a dependency.

The code for the call API is primarily placed under the service directory, which should be the norm.

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

You define a module that provides userservice. Suppose you want to use this module in controllers to

define ([' Controllers/controllers ', ' Services/userservice '],  function (controllers) {    Controllers.controller (' Rootctrl ', [' $scope ', ' userservice ',      function ($scope, UserService, $http) {        $ Scope.name = Userservice.getuser ();    }]);});

Note that the name of UserService is to be kept one.

The reason why there are three kinds of common controllers.js and Services.js and Filter.js is convenient for Requirejs.

Gruntfile.js file

Generated on 2014-04-25 using Generator-angular-require 0.1.13 ' use strict ';//# globbing//for performance reasons we ' r E only matching one level down://' test/spec/{,*/}*.js '//Use the If you want to recursively match all subfolders://' tes   T/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 '], op tions: {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 is up to par and there is n      o Obvious mistakes Jshint: {options: {jshintrc: '. Jshintrc ', Reporter:require (' Jshint-stylish ') }, all: [' gruntfile.js ', ' <%= yeoman.app%>/scripts/{,*/}*.js '], test: {O Ptions: {jshintrc: ' test/.jshintrc '}, src: [' test/spec/{,*/}*.js '}},//empties fol            DERs to start fresh clean: {dist: {files: [{dot:true, src: ['. tmp ',  ' <%= yeoman.dist%>/* ', '!<%= yeoman.dist%>/.git* '}]}, server: '. tmp '},//ADDVendor 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: {HT ML: ' <%= yeoman.app%>/index.html ', Ignorepath: ' <%= yeoman.app%>/'}},//Renames files F or browser caching purposes Rev: {dist: {files: {src: [' <%= yeoman.dist%>/sc Ripts/{,*/}*.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 Useminprepar E-Configuration usemin: {html: [' <%= yeoman.dist%>/{,*/}*.html '], CSS: [' <%= yeoman.dist%>/sty Les/{,*/}*.css '], options: {assetsdirs: [' <%= yeoman.dist%> ']}},//the following *-min T          asks 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, Removecomme Ntsfromcdata:true, Removeoptionaltags:true}, files: [{expand:true, CWD: ' &lt       ;%= 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: [' <%= Yeoma        N.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/r equirejs/**/* ', ' images/{,*/}*. {WEBP} ', ' fonts/* '}, {expand:true, CWD: '. Tmp/images ', dest: ' & lt;%= yeoman.dist%>/images ', src: [' generated/* ']}, {expand:true, Dot:tru E, CWD: ' <%= yeoman.app%> ', dest: ' <%= yeoman.dist%>/fonts ', src: [' bower_compone        nts/company-theme.git/src/css/fonts/* '], flatten:true}]}, styles: {expand:true, CWD: ' <%= yeoman.app%>/styles ', dest: '. tmp/styles/', src: ' {, */}*.css '}},//Run som e tasks in parallel to speed up the build process concurrent: {server: [' copy:styles '], test: [' CopY:styles '], dist: [' copy:styles ', ' imagemin ', ' Svgmin ']},//By default, you R ' index.html ' <!--usemin block--and would take care of//minification.    These next options is pre-configured if you don't wish//to use the usemin blocks. Cssmin: {options: {keepspecialcomments: ' 0 '}, Dist: {files: {' <%= Yeoman.dis          T%>/styles/main.css ': ['. Tmp/styles/{,*/}*.css ', ' <%= yeoman.app%>/styles/{,*/}*.css ' }}},//uglify: {//dist: {//files: {//' <%= yeoman.dist%>/sc  Ripts/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:functio N () {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%>/script            S ', 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 ', ' conn  Ect: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-contri  B-REQUIREJS) would take care of the This//' uglify ', ' requirejs:dist ', ' rev ', ' usemin ', ' htmlmin ']; Grunt.registertask (' Default ', [' newer:jshint ', ' test ', ' build ']);

Detailed each configuration can refer to the once blog, not much to say.

Angularjs REQUEIRJS Configuration Related