MEAN Stack - AngularJS

该文章为网络课 Introduction to MongoDB using the MEAN Stack学习笔记。

1. 关于AngularJS

参见这

2. SPA (Single Page App)

思想：
客户端向服务器关于UI的请求只需要发送一次，至此客户端得到关于UI的所有文件。之后与服务器的通信只需要通过API来传输data，不需要再有静态网页文件的传输。
好处：
1. 减少了network traffic
2. 切换网页时，加快了网页加载的速度

3. Browserify

3.1 思想

将Node.js语法的javascript转换为浏览器能够识别的javascript语法，使得某些用node.js写的服务器端代码可以复用到前端来。

3.2 好处

可以利用node.js的语法来写前端的javascript
可以将众多dependency的js文件browserify成一个文件，因此html只需要引用一个js文件

3.3 方法

引用相关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转化为浏览器js文件并存在bin/index.js中

4. Directive

参见这

5. Testing Directive

5.1 思想

Directive是Angular提供的强有力工具之一，因此对它的开发至关重要，也就是说，对它的测试至关重要。利用一个名叫karma的包裹，可以对directive进行测试，这些测试可以针对不同的浏览器来进行。

5.2 方法

引用相关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风格的测试
使用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']); // 手动创建injector，相当于ng-app
    
    // 需要用到$rootScope与$compile两个angular内置service
    injector.invoke(function($rootScope, $compile) {
      scope = $rootScope.$new(); // 手动新建一个scope
      element = $compile('')(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');
  });
});

可以看到，因为是测试，所以在测试之前，需要手动设置好多东西。而实际应用中，angular已经将这些工作执行与behind the scene了

6. Services

关于Service，参见这

6.1 $http

使用

// 传入$scope与$http两个内置service
app.controller('MyHttpController', function($scope, $http) {
  // http get
  $http.get('/api/v1/me').success(function(data) {
    $scope.user = data.user;
  });
});

关于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一个服务器
      '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('')(scope);
    scope.$apply();

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

7. Template

好处：只需要向服务器请求一次，之后由浏览器cache起来，指定的寿命结束之后才会重新向服务器再请求一次。