Angularjs REQUEIRJS Configuration Related

Source: Internet
Author: User
Tags webp

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

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.