[轉] Sails+AngularJs+Mocha整合

By combining the power of Sailsjs + Angular.js + Mocha, we will get the most full funtional and powerful web framework.

  • Sails.js will work itself as a backend on connecting DB and being a socket update.
  • Angular.js will be the promising front-end which you can stab MV** to your own UI
  • Mocha will help you testing your code

    Requirements

    • Sails.js – v0.10.0-rc7

    How?

    1. Create a new Sails app sails new myapp
    2. Adding angular-seed to sails
      2.1 Wipe out the contents under myapp/assets
      2.2 clone (angular-seed)[https://github.com/angular/angular-seed] and copy the contents under app to replace myapp/assets
      2.3 Copy angular-seed/bower.json to myapp/bower.json
      2.4 Add myapp/.bowerrc telling it to set bower folder as root directory

      { "directory": "./bower_components"}

      2.5 Setting sails to copy angular js to .tmp/public/js/dependencies and .tmp/public/styles which will appear on index.html by changing tasks/config/copy.js as follow:

      module.exports = function(grunt) {
        grunt.config.set('copy', {
            dev: {
                files: [{
                    expand: true,
                    cwd: './assets',
                    src: ['**/*.!(coffee|less)'],
                    dest: '.tmp/public'
                },{
                    expand: true,
                    cwd: './bower_components',
                    src: [
                        'angular/angular.js', 'angular-route/angular-route.js','angular-mocks/angular-mocks.js', 'angular-loader/angular-loader.js',
                    ],
                    flatten: true,
                    dest: '.tmp/public/js/dependencies'
                }]
            },
            build: {
                files: [{
                    expand: true,
                    cwd: '.tmp/public',
                    src: ['**/*'],
                    dest: 'www'
                }]
            }
            });
            grunt.loadNpmTasks('grunt-contrib-copy');
        };

      Try to run sails lift and go to localhost:1337. If you see sourcecode, you will see all angular js have been included in the page.
      2.6 Adding automatic bower install for npm in package.json

      • npm install bower --save
      • Added "postinstall": "./node_modules/.bin/bower install" under "scripts" topics as follow:
      "scripts": {
          "start": "node app.js",
          "debug": "node debug app.js",
          "postinstall": "./node_modules/.bin/bower install"
      },

      2.7 Run ‘npm install’ then you should see ./bower_components folder created

    3. Added bootstrap
      3.1 run bower install --save bootstrap on root directory
      3.2 set sails to copy bootstrap css/js to .tmp/public/js/dependencies and .tmp/public/styles which will appear on index.html. So, your tasks/config/copy.js becomes:

      module.exports = function(grunt) {
      
           grunt.config.set('copy', {
               dev: {
                   files: [{
                       expand: true,
                       cwd: './assets',
                       src: ['**/*.!(coffee|less)'],
                       dest: '.tmp/public'
                   },{ 
                       expand: true,
                       cwd: './bower_components',
                       src: [
                      // add angular js
                       'angular/angular.js', 'angular-route/angular-route.js','angular-mocks/angular-mocks.js', 'angular-loader/angular-loader.js',
                       // add bootstrap & jquery js
                       'bootstrap/dist/js/bootstrap.js','jquery/dist/jquery.js'
                       ],
                       flatten: true,
                       dest: '.tmp/public/js/dependencies'
                   },{ // add bootstrap css
                       expand: true,
                       cwd: './bower_components',
                       src: [
                       'bootstrap/dist/css/bootstrap.css',
                       'bootstrap/dist/css/bootstrap-theme.css'
                       ],
                       flatten: true,
                       dest: '.tmp/public/styles'
                   }]
               },
               build: {
                   files: [{
                       expand: true,
                       cwd: '.tmp/public',
                       src: ['**/*'],
                       dest: 'www'
                   }]
               }
           });
      
           grunt.loadNpmTasks('grunt-contrib-copy');
       };

      So, if you run sails lift again, you should see the difference in index.html.

    4. Return some sails file back to assets
      4.1 make folder assets/js/dependencies
      4.2 put back sails.io.js to assets/js/dependcies
      4.3 put back importer.less to assets/styles
    5. Then, let’s reorder all files in index.html by changing tasks/pipeline.js for js/css variables as follows:
      var cssFilesToInject = [  
        'styles/bootstrap.css',
        'styles/bootstrap-theme.css',
        'styles/**/*.css'
      ];
      
      var jsFilesToInject = [  
        'js/dependencies/sails.io.js',
        'js/dependencies/angular.js',
        'js/dependencies/angular-route.js',
        'js/dependencies/jquery.js',
        'js/dependencies/**/*.js',
        'js/app.js',
        'js/services.js',
        'js/controllers.js',
        'js/filters.js',
        'js/directives.js',
        'js/**/*.js'
      ];

      If you run sails lift and see index.html sourcecode, you should see it reorder as we defined.

    6. Start Angular base template by
      6.1 Adding ng-app="myApp" to html tag -> <html ng-app="myApp">
      6.2 Adding following code before <%- body %>

      <ul class="menu">  
          <li><a href="#/view1">view1</a></li>
          <li><a href="#/view2">view2</a></li>
      </ul>

      You should see Angular already integrated with Sails.

    7. Lastly, let’s delete files we don’t use anymore:
      assets/index.html  
      assets/index-async.html  

      Because sails will create index.html for us from views/layout.ejs

      Let’s Rock! You can now start making API backend using sails and make a change on UI via Angularjs under assets.

文章來源: https://www.youtube.com/playlist?list=PLf8i4fc0zJByWVBmMk8uJ0UEhTIGMnmPQ