该文章为网络课 Introduction to MongoDB using the MEAN Stack学习笔记。
1. 关于AngularJS
参见这
2. SPA (Single Page App)
思想：
客户端向服务器关于UI的请求只需要发送一次，至此客户端得到关于UI的所有文件。之后与服务器的通信只需要通过API来传输data，不需要再有静态网页文件的传输。-
好处：
- 减少了network traffic
- 切换网页时，加快了网页加载的速度
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('<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');
});
});
可以看到，因为是测试，所以在测试之前，需要手动设置好多东西。而实际应用中，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('<user-menu></user-menu>')(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起来，指定的寿命结束之后才会重新向服务器再请求一次。
