該文章為網(wǎng)絡(luò)課 Introduction to MongoDB using the MEAN Stack學(xué)習(xí)筆記。

1. 關(guān)于AngularJS

參見這

2. SPA (Single Page App)

• 思想：
  客戶端向服務(wù)器關(guān)于UI的請求只需要發(fā)送一次，至此客戶端得到關(guān)于UI的所有文件。之后與服務(wù)器的通信只需要通過API來傳輸data，不需要再有靜態(tài)網(wǎng)頁文件的傳輸。

• 好處：

  1. 減少了network traffic
  2. 切換網(wǎng)頁時，加快了網(wǎng)頁加載的速度

3. Browserify

3.1 思想

將Node.js語法的javascript轉(zhuǎn)換為瀏覽器能夠識別的javascript語法，使得某些用node.js寫的服務(wù)器端代碼可以復(fù)用到前端來。

3.2 好處

1. 可以利用node.js的語法來寫前端的javascript
2. 可以將眾多dependency的js文件browserify成一個文件，因此html只需要引用一個js文件

3.3 方法

• 引用相關(guān)package

  "devDependencies": {
    "browserify": "10.2.3",
    "gulp": "3.8.11",
    "gulp-browserify": "0.5.1"
  }

browserify來進行瀏覽器化得工作
gulp與gulp-browserify來進行自動瀏覽器化工作

• 使用命令./node_modules/.bin/browserify -o bin/index.js index.js將nodejs文件index.js轉(zhuǎn)化為瀏覽器js文件并存在bin/index.js中

4. Directive

參見這

5. Testing Directive

5.1 思想

Directive是Angular提供的強有力工具之一，因此對它的開發(fā)至關(guān)重要，也就是說，對它的測試至關(guān)重要。利用一個名叫karma的包裹，可以對directive進行測試，這些測試可以針對不同的瀏覽器來進行。

5.2 方法

• 引用相關(guān)package

  "devDependencies": {
    "karma": "0.12.16",
    "karma-chai": "0.1.0",
    "karma-chrome-launcher": "0.1.4",
    "karma-mocha": "0.1.4"
  }

chai是提供assert語句的
mocha風(fēng)格的測試
使用chrome進行測試

• 寫karma配置文件karma.local.config.js

module.exports = function(config) {
  config.set({
    files: [ // 需要的文件
      'http://code.jquery.com/jquery-1.11.3.js', 
      'https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular.js',
      './directive.js',
      './test.js'
    ],
    frameworks: ['mocha', 'chai'], // 需要的包公
    browsers: ['Chrome'] //測試的瀏覽器類型
  });
};

• 寫test文件

describe('counterDirective', function() {
  var injector;
  var element;
  var scope;
  
  // 基本setup
  beforeEach(function() {
    injector = angular.injector(['myApp']); // 手動創(chuàng)建injector，相當于ng-app
    
    // 需要用到$rootScope與$compile兩個angular內(nèi)置service
    injector.invoke(function($rootScope, $compile) {
      scope = $rootScope.$new(); // 手動新建一個scope
      element = $compile('<counter-directive></counter-directive>')(scope); //手動編譯一個element directive
      scope.$apply();
    });
  });
  
  // 測試
  it('increments counter when you click', function() {
    assert.equal(element.text(), 'You\'ve clicked this div 0 times');
    element.find('div').click();
    assert.equal(element.text(), 'You\'ve clicked this div 1 times');
  });
});

可以看到，因為是測試，所以在測試之前，需要手動設(shè)置好多東西。而實際應(yīng)用中，angular已經(jīng)將這些工作執(zhí)行與behind the scene了

6. Services

關(guān)于Service，參見這

6.1 $http

• 使用

// 傳入$scope與$http兩個內(nèi)置service
app.controller('MyHttpController', function($scope, $http) {
  // http get
  $http.get('/api/v1/me').success(function(data) {
    $scope.user = data.user;
  });
});

關(guān)于Same Origin Police :
html中的javascript只能夠向與該html同域名下的server進行請求。

• 測試
  同樣的，使用karma，但是配置有點改動。

module.exports = function(config) {
  config.set({
    files: [
      'http://code.jquery.com/jquery-1.11.3.js',
      'https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular.js',
      // 用于mock一個服務(wù)器
      'https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular-mocks.js', 
      './app.js',
      './test.js'
    ],
    frameworks: ['mocha', 'chai'],
    browsers: ['Chrome'],
    proxies : {
      '/': 'http://localhost:3000'
    }
  });
};

測試文件上：

describe('Nav Bar', function() {
  var injector;
  var element;
  var scope;
  var compiler;
  var httpBackend;

  beforeEach(function() {
    // ngMockE2E模塊用于提供虛擬server
    injector = angular.injector(['myApp', 'ngMockE2E']);
    intercepts = {};
    
    // $httpBackend用于提供mock server service
    injector.invoke(function($rootScope, $compile, $httpBackend) {
      scope = $rootScope.$new();
      compiler = $compile;
      httpBackend = $httpBackend;
    });
  });

  it('shows logged in users name', function(done) {
    httpBackend.expectGET('/api/v1/me').respond({
      user: { profile: { username: 'John' } }
    });

    element = compiler('<user-menu></user-menu>')(scope);
    scope.$apply();

    httpBackend.flush(); // 發(fā)送回response
    assert.notEqual(element.find('.user').css('display'), 'none');
    assert.equal(element.find('.user').text().trim(), 'Current User: John');
    done();
  });
});

7. Template

好處： 只需要向服務(wù)器請求一次，之后由瀏覽器cache起來，指定的壽命結(jié)束之后才會重新向服務(wù)器再請求一次。