第2页
AngularJS 在 Coding 的实践
彭博 @ coding.net / Techparty, Guangzhou 2014
彭博 @ coding.net / Techparty, Guangzhou 2014
第3页
关于 Coding
第4页
关于 Coding
第5页
关于 Coding
团队协作 + Git + PaaS + QC
团队协作 + Git + PaaS + QC
第6页
为何选择 AngularJS
1、Data-binding 2、模块化设计 / 依赖注⼊入 3、良好的⽂文档
1、Data-binding 2、模块化设计 / 依赖注⼊入 3、良好的⽂文档
第7页
Data-binding
<input type=“text” ng-model=“name”/> <span ng-click=“changeName()”>
Hello {{name}} </span>
angular.module(‘app’) .controller(‘MainController’, function($scope){
$scope.name = ‘Coding’; $scope.changeName = function(){
$scope.name = ‘Moto’; } });
<input type=“text” ng-model=“name”/> <span ng-click=“changeName()”>
Hello {{name}} </span>
angular.module(‘app’) .controller(‘MainController’, function($scope){
$scope.name = ‘Coding’; $scope.changeName = function(){
$scope.name = ‘Moto’; } });
第8页
Data-binding
<input type=“text” name=“name”/> <span id=“change-name”>
Hello <span id=“name”></span> </span>
$(function(){ var input = $(‘input[name=“name”]’); input.on(‘change’, function(){ var value = $(this).val(); $(‘#id’).val(value); }); $(‘#change-name’).on(‘click’, function(){ var value = input.val(); $(‘#id’).val(‘Moto’); });
});
<input type=“text” name=“name”/> <span id=“change-name”>
Hello <span id=“name”></span> </span>
$(function(){ var input = $(‘input[name=“name”]’); input.on(‘change’, function(){ var value = $(this).val(); $(‘#id’).val(value); }); $(‘#change-name’).on(‘click’, function(){ var value = input.val(); $(‘#id’).val(‘Moto’); });
});
第9页
模块化设计
angular.module(‘app’)
.controller(‘MainController’, function(){ //…
})
.service(‘MainService’, function(){ return {sayHello:function(){…}}
});
angular.module(‘app’)
.controller(‘MainController’, function(){ //…
})
.service(‘MainService’, function(){ return {sayHello:function(){…}}
});
第10页
模块化设计 / 依赖注⼊入
angular.module(‘app’)
.controller(‘MainController’, function(MainService){ MainService.sayHello();
})
.service(‘MainService’, function(){ return {sayHello:function(){…}}
});
angular.module(‘app’)
.controller(‘MainController’, function(MainService){ MainService.sayHello();
})
.service(‘MainService’, function(){ return {sayHello:function(){…}}
});
第11页
良好的⽂文档 https://docs.angularjs.org/api
第12页
良好的⽂文档 https://docs.angularjs.org/api
第13页
使⽤用 AngularJS 的 Coding.net 第⼀一次，/pp，4 个 JS 请求
第14页
使⽤用 AngularJS 的 Coding.net 第⼀一次，/pp，4 个 JS 请求
第15页
使⽤用 AngularJS 的 Coding.net 第⼀一次，/pp，4 个 JS 请求
第16页
使⽤用 AngularJS 的 Coding.net 1 个 HTML 请求
第17页
使⽤用 AngularJS 的 Coding.net /user , 不再有 HTML 请求
第18页
使⽤用 AngularJS 的 Coding.net 不再有 JS 请求
第19页
Single Page App , 前后端完全分离 后端与前端都在 Coding 上管理
第20页
Single Page App , 前后端完全分离 后端与前端都在 Coding 上管理
第21页
Single Page App , 前后端完全分离 后端与前端都在 Coding 上管理
第22页
QC 质量管理分析下的 Coding 前端项⺫⽬目
第23页
QC 质量管理分析下的 Coding 前端项⺫⽬目
第24页
QC 质量管理分析下的 Coding 前端项⺫⽬目
第25页
AngularJS 使⽤用情况
时间
7个⽉月
route 数
*.js(coffee)
237(⽂文件)/ 31872(⾏行) by cloc
API 180+
时间
7个⽉月
route 数
*.js(coffee)
237(⽂文件)/ 31872(⾏行) by cloc
API 180+
第27页
AngularJS 项⺫⽬目结构
第28页
AngularJS 项⺫⽬目结构
src app user task common constants directives filters services vendor
应⽤用主⺫⽬目录
⻚页⾯面模块
常量 指令 过滤器 通⽤用服务 Bower 依赖
src app user task common constants directives filters services vendor
应⽤用主⺫⽬目录
⻚页⾯面模块
常量 指令 过滤器 通⽤用服务 Bower 依赖
第29页
frontend https://github.com/bountysource/frontend
第30页
管理依赖（58）
1. Static web (Connect) 2. Watch & Compile
(Coffee & Sass)
3. Build for release
(uglify,cssmin,htmlmin,md5…)
1. Static web (Connect) 2. Watch & Compile
(Coffee & Sass)
3. Build for release
(uglify,cssmin,htmlmin,md5…)
第31页
Problems / Solutions
第32页
Problems / Solutions
1. jQuery 到 AngularJS 的思维转换 2. Directive 使⽤用不当 3. View 和 Controller 过于复杂 4. Watcher 过多(>2000+)
1. jQuery 到 AngularJS 的思维转换 2. Directive 使⽤用不当 3. View 和 Controller 过于复杂 4. Watcher 过多(>2000+)
第33页
jQuery vs. AngularJS
直接操作
Dom
通过 Directive 操作
直接操作
Dom
通过 Directive 操作
第34页
jQuery vs. AngularJS
//html <input type=“text” name=“name”/> //js $(‘input[name=“name”]’).val(‘H5’);
//html <input type=“text” name=“name”
ng-model=“name”/> //js $scope.name = “H5”;
//html <input type=“text” name=“name”/> //js $(‘input[name=“name”]’).val(‘H5’);
//html <input type=“text” name=“name”
ng-model=“name”/> //js $scope.name = “H5”;
第35页
Directive 常规的组织⽅方式
'use strict';
angular.module(‘directives') //directive definition .directive('cg${directive}', [
function () { return { link: function (scope, element, attrs) { //spaghetti code }, templateUrl: ''
} } ])
'use strict';
angular.module(‘directives') //directive definition .directive('cg${directive}', [
function () { return { link: function (scope, element, attrs) { //spaghetti code }, templateUrl: ''
} } ])
第36页
Directive 更好的组织⽅方式
'use strict';
angular.module(‘directives') //directive definition .directive('cg${directive}', [
function () { return { link: function (scope, element, attrs) {
}, templateUrl: '', controller: '${directive}Controller' } } ])
'use strict';
angular.module(‘directives') //directive definition .directive('cg${directive}', [
function () { return { link: function (scope, element, attrs) {
}, templateUrl: '', controller: '${directive}Controller' } } ])
第37页
Directive 更好的组织⽅方式
'use strict';
angular.module(‘directives') //directive definition .directive('cg${directive}', [
function () { return { link: function (scope, element, attrs) {
}, templateUrl: '', controller: '${directive}Controller' } } ])
//relevant controller .controller('${directive}Controller', [
'${DS}scope', '${directive}Service', function(${DS}scope, ${directive}Service){
} ])
'use strict';
angular.module(‘directives') //directive definition .directive('cg${directive}', [
function () { return { link: function (scope, element, attrs) {
}, templateUrl: '', controller: '${directive}Controller' } } ])
//relevant controller .controller('${directive}Controller', [
'${DS}scope', '${directive}Service', function(${DS}scope, ${directive}Service){
} ])
第38页
Directive 更好的组织⽅方式
'use strict';
angular.module(‘directives') //directive definition .directive('cg${directive}', [
function () { return { link: function (scope, element, attrs) {
}, templateUrl: '', controller: '${directive}Controller' } } ])
//relevant controller .controller('${directive}Controller', [
'${DS}scope', '${directive}Service', function(${DS}scope, ${directive}Service){
} ])
//relevant service .service('${directive}Service', [
function(){
} ]);
'use strict';
angular.module(‘directives') //directive definition .directive('cg${directive}', [
function () { return { link: function (scope, element, attrs) {
}, templateUrl: '', controller: '${directive}Controller' } } ])
//relevant controller .controller('${directive}Controller', [
'${DS}scope', '${directive}Service', function(${DS}scope, ${directive}Service){
} ])
//relevant service .service('${directive}Service', [
function(){
} ]);
第39页
Directive 使⽤用不当
'use strict';
angular.module(‘directives') //directive definition .directive('cg${directive}', [
function () { return { link: function (scope, element, attrs) {
//JQUERY code
}, templateUrl: '' } } ])
'use strict';
angular.module(‘directives') //directive definition .directive('cg${directive}', [
function () { return { link: function (scope, element, attrs) {
//JQUERY code
}, templateUrl: '' } } ])
第40页
Directive 使⽤用不当
//in link function of directive var ohtml = [];
ohtml.push(‘<table class="blob-code-view blob-code-diff”>’);
ohtml.push(‘<tbody><tr class="blobline">');
ohtml.push(‘<td class="blob-nums">'); ohtml.push(lhtml.join(‘’)); ohtml.push(‘</td><td class="blob-code">');
//in link function of directive var ohtml = [];
ohtml.push(‘<table class="blob-code-view blob-code-diff”>’);
ohtml.push(‘<tbody><tr class="blobline">');
ohtml.push(‘<td class="blob-nums">'); ohtml.push(lhtml.join(‘’)); ohtml.push(‘</td><td class="blob-code">');
第41页
Directive 使⽤用不当
return { link: function(){ }, controller: function(){ //provide variables for template }, templateUrl: ‘path/to/the/template.html’,
}
return { link: function(){ }, controller: function(){ //provide variables for template }, templateUrl: ‘path/to/the/template.html’,
}
第42页
View 过于复杂 —— 逻辑
<i class=“ui remove icon” ng-if=“task.owner.id === USER.id && !task.updating && task.status !== STATUS.done”>
</i>
<i class=“ui remove icon” ng-if=“task.owner.id === USER.id && !task.updating && task.status !== STATUS.done”>
</i>
第43页
View 过于复杂 —— 逻辑
<i class=“ui remove icon” ng-if=“canRemove(task);”>
</i>
//in a related Controller $scope.canRemove = function(task){
return task.owner.id === USER.id && !task.updating && task.status !== STATUS.done
};
<i class=“ui remove icon” ng-if=“canRemove(task);”>
</i>
//in a related Controller $scope.canRemove = function(task){
return task.owner.id === USER.id && !task.updating && task.status !== STATUS.done
};
第44页
View 过于复杂 —— 结构
massive 793 lines
task.js (444 lines) index.html (174 lines) list.html (175 lines)
massive 793 lines
task.js (444 lines) index.html (174 lines) list.html (175 lines)
第45页
View 过于复杂 —— 结构
directives 400 lines
item.js (150 lines) item.html (35 lines)
member_picker.js (100 lines) member_picker.html (42 lines)
creator.js (62 lines) creator.html (11 lines)
directives 400 lines
item.js (150 lines) item.html (35 lines)
member_picker.js (100 lines) member_picker.html (42 lines)
creator.js (62 lines) creator.html (11 lines)
第46页
View 过于复杂 —— 结构
directives 400 lines
item.js (150 lines) item.html (35 lines)
member_picker.js (100 lines) member_picker.html (42 lines)
creator.js (62 lines) creator.html (11 lines)
directives 400 lines
item.js (150 lines) item.html (35 lines)
member_picker.js (100 lines) member_picker.html (42 lines)
creator.js (62 lines) creator.html (11 lines)
第47页
View 过于复杂 —— 结构
directives 400 lines
item.js (150 lines) item.html (35 lines)
member_picker.js (100 lines) member_picker.html (42 lines)
creator.js (62 lines) creator.html (11 lines)
directives 400 lines
item.js (150 lines) item.html (35 lines)
member_picker.js (100 lines) member_picker.html (42 lines)
creator.js (62 lines) creator.html (11 lines)
第48页
View 过于复杂 —— 结构
directives 400 lines
item.js (150 lines) item.html (35 lines)
member_picker.js (100 lines) member_picker.html (42 lines)
creator.js (62 lines) creator.html (11 lines)
directives 400 lines
item.js (150 lines) item.html (35 lines)
member_picker.js (100 lines) member_picker.html (42 lines)
creator.js (62 lines) creator.html (11 lines)
第49页
View 过于复杂 —— 结构
directives 400 lines
item.js (150 lines) item.html (35 lines)
member_picker.js (100 lines) member_picker.html (42 lines)
creator.js (62 lines) creator.html (11 lines)
directives 400 lines
item.js (150 lines) item.html (35 lines)
member_picker.js (100 lines) member_picker.html (42 lines)
creator.js (62 lines) creator.html (11 lines)
第50页
Controller 过于复杂 WebStorm — File and Code Templates
第51页
Controller 过于复杂 WebStorm — File and Code Templates
第52页
Watcher 过多(>2000+)
watchers: 3+
<div class=“activity” data-type=“Depo” ng-if=“activity.type === ‘Depo’”>
<div ng-if=“activity.action === ‘commit’”> </div> <div ng-if=“activity.action === ‘fork’”> </div> <!—— more like above…… ——> </div>
watchers: 3+
<div class=“activity” data-type=“Depo” ng-if=“activity.type === ‘Depo’”>
<div ng-if=“activity.action === ‘commit’”> </div> <div ng-if=“activity.action === ‘fork’”> </div> <!—— more like above…… ——> </div>
第53页
Watcher 过多(>2000+)
watchers: 3+
<div class=“activity” data-type=“Depo” ng-if=“activity.type === ‘Depo’”>
<div ng-if=“activity.action === ‘commit’”> </div> <div ng-if=“activity.action === ‘fork’”> </div> <!—— more like above…… ——> </div>
watchers: 3+
<div class=“activity” data-type=“Depo” ng-if=“activity.type === ‘Depo’”>
<div ng-if=“activity.action === ‘commit’”> </div> <div ng-if=“activity.action === ‘fork’”> </div> <!—— more like above…… ——> </div>
第54页
Watcher 过多(>2000+)
watchers: 3+
<div class=“activity” data-type=“Depo” ng-if=“activity.type === ‘Depo’”>
<div ng-if=“activity.action === ‘commit’”> </div> <div ng-if=“activity.action === ‘fork’”> </div> <!—— more like above…… ——> </div>
watchers: 3+
<div class=“activity” data-type=“Depo” ng-if=“activity.type === ‘Depo’”>
<div ng-if=“activity.action === ‘commit’”> </div> <div ng-if=“activity.action === ‘fork’”> </div> <!—— more like above…… ——> </div>
第55页
Watcher 过多(>2000+)
watchers: 4+
<div class=“activity” data-type=“Task” ng-if=“activity.type === ‘Task’”>
<!—— …… ——> </div> <!—— more like above…… ——>
watchers: 4+
<div class=“activity” data-type=“Task” ng-if=“activity.type === ‘Task’”>
<!—— …… ——> </div> <!—— more like above…… ——>
第56页
Watcher 过多(>2000+)
watchers: 5+
<div class=“activity” data-type=“Attachment” ng-if=“activity.type === ‘Attachment’”>
<!—— …… ——> </div> <!—— more like above…… ——>
watchers: 5+
<div class=“activity” data-type=“Attachment” ng-if=“activity.type === ‘Attachment’”>
<!—— …… ——> </div> <!—— more like above…… ——>
第57页
Watcher 过多(>2000+)
watchers: 6+
<div class=“activity” data-type=“ProjectMember” ng-if=“activity.type === ‘ProjectMember’”>
<!—— …… ——> </div> <!—— more like above…… ——>
watchers: 6+
<div class=“activity” data-type=“ProjectMember” ng-if=“activity.type === ‘ProjectMember’”>
<!—— …… ——> </div> <!—— more like above…… ——>
第58页
Watcher 过多(>2000+)
watchers: 6+ * 20
<div class=“activity” data-type=“ProjectMember” ng-if=“activity.type === ‘ProjectMember’”>
<!—— …… ——> </div> <!—— more like above…… ——>
watchers: 6+ * 20
<div class=“activity” data-type=“ProjectMember” ng-if=“activity.type === ‘ProjectMember’”>
<!—— …… ——> </div> <!—— more like above…… ——>
第59页
Watcher 过多(>2000+)
watchers: 120+
<div class=“activity” data-type=“ProjectMember” ng-if=“activity.type === ‘ProjectMember’”>
<!—— …… ——> </div> <!—— more like above…… ——>
watchers: 120+
<div class=“activity” data-type=“ProjectMember” ng-if=“activity.type === ‘ProjectMember’”>
<!—— …… ——> </div> <!—— more like above…… ——>
第60页
Bindonce
https://github.com/Pasvaz/bindonce
https://github.com/Pasvaz/bindonce
第61页
Bindonce ng-directive —> bo-directive
https://github.com/Pasvaz/bindonce
https://github.com/Pasvaz/bindonce
第62页
减少 Watchers —— 使⽤用 Bindonce
watchers: 3+
<div class=“activity” data-type=“Depo” ng-if=“activity.type === ‘Depo’”>
<div ng-if=“activity.action === ‘commit’”> </div> <div ng-if=“activity.action === ‘fork’”> </div> <!—— more like above…… ——> </div>
watchers: 3+
<div class=“activity” data-type=“Depo” ng-if=“activity.type === ‘Depo’”>
<div ng-if=“activity.action === ‘commit’”> </div> <div ng-if=“activity.action === ‘fork’”> </div> <!—— more like above…… ——> </div>
第63页
减少 Watchers —— 使⽤用 Bindonce
watchers: 0
<div class=“activity” data-type=“Depo” bindonce=“activity” bo-if=“activity.type === ‘Depo’”>
<div bo-if=“activity.action === ‘commit’”> </div> <div bo-if=“activity.action === ‘fork’”> </div> <!—— more like above…… ——> </div>
watchers: 0
<div class=“activity” data-type=“Depo” bindonce=“activity” bo-if=“activity.type === ‘Depo’”>
<div bo-if=“activity.action === ‘commit’”> </div> <div bo-if=“activity.action === ‘fork’”> </div> <!—— more like above…… ——> </div>
第64页
总结
虽踩坑⽆无数，但⽆无怨⽆无悔。 AngularJS ，你值得拥有...
虽踩坑⽆无数，但⽆无怨⽆无悔。 AngularJS ，你值得拥有...
第66页
We want you!
第67页
We want you!
第68页
Thank you!