Angularjs requeirjs Configuration

The scaffolding project generated by yeoman generator on the Internet is not ideal.

Npm install-g generator-angular-require

Yo angular-require

I don't need that anymore. Now I am looking for a closer look at it on github.

Directory structure:

Conforms to the basic directory structure of yeoman scaffolding <喎?http: www.bkjia.com kf ware vc " target="_blank" class="keylink"> VcD4KPHA + 1ti147 + 00rvPwiBzY3JpcHTPwrXExL/CvL3hubk8L3A + fingerprint = "http://www.2cto.com/uploadfile/Collfiles/20140430/20140430090813397.jpg" alt = "\">

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-bootstrapwindow.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 mainly configures basic requirejs configurations, including path and shim configurations. shim is used to configure those that do not support amd specifications.

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

Start angular, Or you can write it as another method.

Require (['domainready! '], Function (document ){

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

});

In this way, you need to configure 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 above app. name is MyApp

This js defines angular routing and all modules and services from the app. For example, controllers and services are self-defined modules. define is used to introduce controllers/controllers and services/services.

There are also some angular built-in module services such as ngRoute,

Note that the module name must be the same as that written during dependency.

The code for storing call APIs in the service folder should be as follows.

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

Customizes a module that provides userService. If you want to use this module in controllers

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

Note that the UserService name must be one to one.

Three common controllers. js, services. js, and filter. js are 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'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 
  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'  ]);};

For details about each configuration item, refer to the previous blog.