該文章為網(wǎng)絡(luò)課 Introduction to MongoDB using the MEAN Stack學(xué)習(xí)筆記。
1. 關(guān)于AngularJS
參見(jiàn)這
2. SPA (Single Page App)
思想：
客戶端向服務(wù)器關(guān)于UI的請(qǐng)求只需要發(fā)送一次昆禽，至此客戶端得到關(guān)于UI的所有文件。之后與服務(wù)器的通信只需要通過(guò)API來(lái)傳輸data约素，不需要再有靜態(tài)網(wǎng)頁(yè)文件的傳輸。-
好處：
- 減少了network traffic
- 切換網(wǎng)頁(yè)時(shí)便贵，加快了網(wǎng)頁(yè)加載的速度
3. Browserify
3.1 思想
將Node.js語(yǔ)法的javascript轉(zhuǎn)換為瀏覽器能夠識(shí)別的javascript語(yǔ)法九府，使得某些用node.js寫的服務(wù)器端代碼可以復(fù)用到前端來(lái)。
3.2 好處
- 可以利用node.js的語(yǔ)法來(lái)寫前端的javascript
- 可以將眾多dependency的js文件browserify成一個(gè)文件凯旋，因此html只需要引用一個(gè)js文件
3.3 方法
- 引用相關(guān)package
"devDependencies": {
"browserify": "10.2.3",
"gulp": "3.8.11",
"gulp-browserify": "0.5.1"
}
browserify來(lái)進(jìn)行瀏覽器化得工作
gulp與gulp-browserify來(lái)進(jìn)行自動(dòng)瀏覽器化工作
- 使用命令
./node_modules/.bin/browserify -o bin/index.js index.js將nodejs文件index.js轉(zhuǎn)化為瀏覽器js文件并存在bin/index.js中
4. Directive
參見(jiàn)這
5. Testing Directive
5.1 思想
Directive是Angular提供的強(qiáng)有力工具之一呀潭，因此對(duì)它的開發(fā)至關(guān)重要钉迷，也就是說(shuō)至非，對(duì)它的測(cè)試至關(guān)重要钠署。利用一個(gè)名叫karma的包裹，可以對(duì)directive進(jìn)行測(cè)試荒椭，這些測(cè)試可以針對(duì)不同的瀏覽器來(lái)進(jìn)行谐鼎。
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語(yǔ)句的
mocha風(fēng)格的測(cè)試
使用chrome進(jìn)行測(cè)試
- 寫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'] //測(cè)試的瀏覽器類型
});
};
- 寫test文件
describe('counterDirective', function() {
var injector;
var element;
var scope;
// 基本setup
beforeEach(function() {
injector = angular.injector(['myApp']); // 手動(dòng)創(chuàng)建injector，相當(dāng)于ng-app
// 需要用到$rootScope與$compile兩個(gè)angular內(nèi)置service
injector.invoke(function($rootScope, $compile) {
scope = $rootScope.$new(); // 手動(dòng)新建一個(gè)scope
element = $compile('<counter-directive></counter-directive>')(scope); //手動(dòng)編譯一個(gè)element directive
scope.$apply();
});
});
// 測(cè)試
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');
});
});
可以看到趣惠，因?yàn)槭菧y(cè)試狸棍，所以在測(cè)試之前，需要手動(dòng)設(shè)置好多東西味悄。而實(shí)際應(yīng)用中草戈，angular已經(jīng)將這些工作執(zhí)行與behind the scene了
6. Services
關(guān)于Service，參見(jiàn)這
6.1 $http
- 使用
// 傳入$scope與$http兩個(gè)內(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進(jìn)行請(qǐng)求侍瑟。
- 測(cè)試
同樣的唐片，使用karma，但是配置有點(diǎn)改動(dòng)涨颜。
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一個(gè)服務(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'
}
});
};
測(cè)試文件上：
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ù)器請(qǐng)求一次费韭，之后由瀏覽器cache起來(lái)，指定的壽命結(jié)束之后才會(huì)重新向服務(wù)器再請(qǐng)求一次庭瑰。
