知乎专栏使用 AngularJS 框架有什么经验心得？
- - 知乎每日精选最近做的某个项目的 UI 部分 Mobile Campus （Google Drive 可能需要跨墙）. 代码： https://github.com/morlay/angular-mobile-ui. ## DOM 的整体 or 零散. AngularJS 与 jQuery 等传统操作 DOM 的思想有所不同，.
知乎专栏使用 AngularJS 框架有什么经验心得？
标签：
知乎
专栏
angularjs
| 发表时间：2013-08-20 13:58 | 作者：墨磊
出处：http://www.zhihu.com
谢提醒，之前还没注意到这个。
最近做的某个项目的 UI 部分 Mobile Campus （Google Drive 可能需要跨墙）
代码： https://github.com/morlay/angular-mobile-ui
然后，说说我的一些做法。可能不够完善，毕竟还在折腾中。
## DOM 的整体 or 零散
首先是这篇神贴：
javascript - How do I "think in AngularJS" if I have a jQuery background?
AngularJS 与 jQuery 等传统操作 DOM 的思想有所不同，
对于 jQuery 等，一般是先有完整 DOM 然后在这些 DOM 的基础上进行二次调教。
而 AngularJS 等框架则是 根据 数据模型 以及其对应的 DOM 模版，然后通过模版像搭积木那样组合页面。
显然的，前者在 SEO 上有天然优势；而后者，搜索引擎还只能拿到某个模版，而无内容。
暂时没想到有什么特别好的解决方案，或许，对于内容页，可以继续使用传统方式，而只在需要更多交互的地方应用 AngularJS，特别是在移动端应用上。
同理适用于各种 前端的 MVC 框架，后端只要为前端提供数据接口，而不再需要为其拼接 HTML.
## 模块化
AngularJS 也是遵循 AMD 的。（AMD 是啥，参考： 使用 AMD、CommonJS 及 ES Harmony 编写模块化的 JavaScript ）
虽然它也可以按照传统代码方式来写（其首页介绍的用法 AngularJS — Superheroic JavaScript MVW Framework ），但是，既然都提供了这么一种模块的方法，为何不用上呢 （参考下他已有的较成熟衍生库 https://github.com/angular-ui/bootstrap ）。
而且，这种写法还可以方便做代码的合并与压缩，在后面 Grunt 自动化 一节中，就会提到使用 Nodejs/Grunt 来自动的做这些事情。
## 可复用模版 or 业务逻辑模版
今年 Google 开发者大会中 提到的 Polymer（ Welcome - Polymer ）
这货让人感觉像是 Angular Directives 的进化。
而 Directives 做的事，就是把一堆 DOM 封装为一条或者一组 自定义的 HTML标签，作为可复用的模版，以供组装业务调用。 Demos 可参看： Angular directives for Twitter's Bootstrap
当然，为了方便修改，很多时候在做 directive 的时候需要将 template 用 templateUrl 代替，
不用担心文件的碎片化，不利于前端加载 Grunt 自动化 一节 会提到如何合并这些碎片化的 模版。
Directives 是作为可复用的模版，
而业务逻辑则是一般是一个业务对应一个 html 及其的 controller.
## 作用域间的通信
上节提到了一个 html 及其的 controller，一个完整应用自然会包含很多的业务子块。
自然会有很多很多 cotrollers.
AngularJS 提供了 方法， $scope 或者 $rootScope 的 $broadcast $emit / $on
至于他们之间的差别，可参考这个 Demo, Chrome F12 ，你可以看到结果。
https://googledrive.com/host/0Bwdui5aYcEA9SzN2WDJ4cXZRTTA/index.html
## 数据池
除了作用域间的传值外，还有个方法是统一的管理一个数据池，
对于没有业务交叉的 controller，若是有公有数据的需要，都从这个数据池中取，
而这个数据池更可以直接作为和后端数据的统一交互口，及本地缓存管理的地方。
## Grunt 自动化
Grunt（ Grunt: The JavaScript Task Runner ）出现以后，我是发现 Git 上面基本上前端相关的项目上都多了个 Gruntfile.js，可见他确实好用。
不太喜欢大多数项目中把所有任务都丢在一个文件里的方式。
所以，利用 node.js 的特性，将任务集也分解开来。
在 https://github.com/morlay/angular-mobile-ui 这里可以看到对应的代码。
这里只说说，如何按照 angular module 的依存关系自动合并对应文件。
https://github.com/morlay/angular-mobile-ui/blob/develop/grunt/subTasks/angular-concat-modules.js
首先是模块的命名，使得它能够和它的路径一致性。
第二，除了特殊的，全局公用的模块外，
其他模块在各自业务组件中建立引用关系。
避免载入多余的模块。
把 app.main 作为了入口文件，
并配置它的全局引用，ngMobile 和 tpls（可复用模版转换而成的 js）
通过 `grunt angular-concat-modules` 和 `grunt script-uglify`
当然，这里更是直接做了任务，`grunt release` 一条指令搞定一切。
而，对于 angular 模版转换为 js 有现成的 grunt-angular-templates 可用，
这里不细说了，详看代码。
## 测试工具
最后的，关于测试工具，官方有提供 Karma - Spectacular Test Runner for Javascript
但没用过，也不知道怎么用，希望有同行给予补充与介绍。
其他的，在 API 文档里写得挺详细的。
P.S.
至于知乎，并非完全 Angular 的方式，
希望能够进一步，至少在不需要 SEO 的部分。
继续折腾去了，还有很多东西要弄。
— 完 —
本文作者： 墨磊
【知乎日报——比新闻更多】听亲历者和内行专家八仙过海谈新闻，离现场更近一点。
下载知乎新 app - 知乎日报客户端（Android / iPhone 同步上架）：
http://daily.zhihu.com/download
此问题还有 3 个回答，查看全部。
延伸阅读：
如何设计大型网站的前端 JavaScript 框架？
知乎网站前端使用了什么技术和框架？
最近做的某个项目的 UI 部分 Mobile Campus （Google Drive 可能需要跨墙）
代码： https://github.com/morlay/angular-mobile-ui
然后，说说我的一些做法。可能不够完善，毕竟还在折腾中。
## DOM 的整体 or 零散
首先是这篇神贴：
javascript - How do I "think in AngularJS" if I have a jQuery background?
AngularJS 与 jQuery 等传统操作 DOM 的思想有所不同，
对于 jQuery 等，一般是先有完整 DOM 然后在这些 DOM 的基础上进行二次调教。
而 AngularJS 等框架则是 根据 数据模型 以及其对应的 DOM 模版，然后通过模版像搭积木那样组合页面。
显然的，前者在 SEO 上有天然优势；而后者，搜索引擎还只能拿到某个模版，而无内容。
暂时没想到有什么特别好的解决方案，或许，对于内容页，可以继续使用传统方式，而只在需要更多交互的地方应用 AngularJS，特别是在移动端应用上。
同理适用于各种 前端的 MVC 框架，后端只要为前端提供数据接口，而不再需要为其拼接 HTML.
## 模块化
AngularJS 也是遵循 AMD 的。（AMD 是啥，参考： 使用 AMD、CommonJS 及 ES Harmony 编写模块化的 JavaScript ）
虽然它也可以按照传统代码方式来写（其首页介绍的用法 AngularJS — Superheroic JavaScript MVW Framework ），但是，既然都提供了这么一种模块的方法，为何不用上呢 （参考下他已有的较成熟衍生库 https://github.com/angular-ui/bootstrap ）。
angular.module('app', [
'moduleA',
'moduleB',
])
.controller('MainCtrl', [
'$scope',
function ($scope) {
}]);
而且，这种写法还可以方便做代码的合并与压缩，在后面 Grunt 自动化 一节中，就会提到使用 Nodejs/Grunt 来自动的做这些事情。
## 可复用模版 or 业务逻辑模版
今年 Google 开发者大会中 提到的 Polymer（ Welcome - Polymer ）
这货让人感觉像是 Angular Directives 的进化。
而 Directives 做的事，就是把一堆 DOM 封装为一条或者一组 自定义的 HTML标签，作为可复用的模版，以供组装业务调用。 Demos 可参看： Angular directives for Twitter's Bootstrap
当然，为了方便修改，很多时候在做 directive 的时候需要将 template 用 templateUrl 代替，
不用担心文件的碎片化，不利于前端加载 Grunt 自动化 一节 会提到如何合并这些碎片化的 模版。
Directives 是作为可复用的模版，
而业务逻辑则是一般是一个业务对应一个 html 及其的 controller.
## 作用域间的通信
上节提到了一个 html 及其的 controller，一个完整应用自然会包含很多的业务子块。
自然会有很多很多 cotrollers.
AngularJS 提供了 方法， $scope 或者 $rootScope 的 $broadcast $emit / $on
$scope.$emit('eventA',msg);
$scope.$broadcast('eventA',msg);
$rootScope.$on('eventA',function(event,msg){
console.log(msg);
});
至于他们之间的差别，可参考这个 Demo, Chrome F12 ，你可以看到结果。
https://googledrive.com/host/0Bwdui5aYcEA9SzN2WDJ4cXZRTTA/index.html
## 数据池
除了作用域间的传值外，还有个方法是统一的管理一个数据池，
对于没有业务交叉的 controller，若是有公有数据的需要，都从这个数据池中取，
而这个数据池更可以直接作为和后端数据的统一交互口，及本地缓存管理的地方。
## Grunt 自动化
Grunt（ Grunt: The JavaScript Task Runner ）出现以后，我是发现 Git 上面基本上前端相关的项目上都多了个 Gruntfile.js，可见他确实好用。
不太喜欢大多数项目中把所有任务都丢在一个文件里的方式。
所以，利用 node.js 的特性，将任务集也分解开来。
在 https://github.com/morlay/angular-mobile-ui 这里可以看到对应的代码。
这里只说说，如何按照 angular module 的依存关系自动合并对应文件。
https://github.com/morlay/angular-mobile-ui/blob/develop/grunt/subTasks/angular-concat-modules.js
首先是模块的命名，使得它能够和它的路径一致性。
第二，除了特殊的，全局公用的模块外，
其他模块在各自业务组件中建立引用关系。
避免载入多余的模块。
把 app.main 作为了入口文件，
并配置它的全局引用，ngMobile 和 tpls（可复用模版转换而成的 js）
通过 `grunt angular-concat-modules` 和 `grunt script-uglify`
当然，这里更是直接做了任务，`grunt release` 一条指令搞定一切。
而，对于 angular 模版转换为 js 有现成的 grunt-angular-templates 可用，
这里不细说了，详看代码。
## 测试工具
最后的，关于测试工具，官方有提供 Karma - Spectacular Test Runner for Javascript
但没用过，也不知道怎么用，希望有同行给予补充与介绍。
其他的，在 API 文档里写得挺详细的。
P.S.
至于知乎，并非完全 Angular 的方式，
希望能够进一步，至少在不需要 SEO 的部分。
继续折腾去了，还有很多东西要弄。
— 完 —
本文作者： 墨磊
【知乎日报——比新闻更多】听亲历者和内行专家八仙过海谈新闻，离现场更近一点。
下载知乎新 app - 知乎日报客户端（Android / iPhone 同步上架）：
http://daily.zhihu.com/download
此问题还有 3 个回答，查看全部。
延伸阅读：
如何设计大型网站的前端 JavaScript 框架？
知乎网站前端使用了什么技术和框架？
相关 [知乎 专栏 angularjs] 推荐：
学习AngularJS实例
- - Web前端 - ITeye博客怎么样快速学习AngularJS. 相信很多初学者都有过或者类似的疑问，其实这个问题没有标准的答案，每个人的技术背景、工作经验等等都不经相同，所以学习AngularJS的切入点肯定也就不同，我之前初略使用过knockoutjs，当我第一眼看到AngularJS的Helloworld案例后，顿时就被声明式的语法和强大的双向绑定特性所吸引.
AngularJS表单验证
- - JavaScript - Web前端 - ITeye博客 通过AngularJS我们不仅可以隐藏/显示错误提示消息，高亮输入框，还可以通过编写指令来随心所欲的控制表单验证方式. $scope.reset=function(){ //表单重置. 表单验证 .
表单验证
. AngularJS基本特性介绍
- - ITeye博客使用AngularJS非常简单，如下：. 以指令ng-app定义AngularJS的作用域，然后引入angular-1.0.1.min.js，这就是AngularJS的Hello World，简单但是无用. HTML执行表达式（Expressions）. AngularJS允许在HTML直接执行表达式，如下：.
angularjs与服务器交互
- - CSDN博客Web前端推荐文章真正的应用需要和真实的服务器进行交互，移动应用和新兴的Chrome桌面应用可能是个例外，但是对于此外的所有应用来说，无论你是想把数据持久化到云端，还是需要与其他用户进行实时交互，都需要让应用与服务器进行交互. 为了实现这一点，Angular提供了一个叫做$http的服务. 它提供了一个可扩展的抽象方法列表，使得与服务器的交互更加容易.
AngularJS与服务器交互
- - JavaScript - Web前端 - ITeye博客 对于AJAX应用（使用XMLHttpRequests）来说，向服务器发起请求的传统方式是：获取一个XMLHttpRequest对象的引用、发起请求、读取响应、检查状态码，最后处理服务端的响应. }else if(xmlhttp.status == 400) { //或者可以是任何以4开头的状态码.
广告点击率预估是怎么回事？ - 知乎专栏
- -2016-11-08 欧阳辰 互联居. 点击率预估是广告技术的核心算法之一，它是很多广告算法工程师喜爱的战场. 一直想介绍一下点击率预估，但是涉及公式和模型理论太多，怕说不清楚，读者也不明白. 所以，这段时间花了一些时间整理点击率预估的知识，希望在尽量不使用数据公式的情况下，把大道理讲清楚，给一些不愿意看公式的同学一个Cook Book.
从零开始掌握Python机器学习：十四步教程 - 知乎专栏
- -Python 可以说是现在最流行的机器学习语言，而且你也能在网上找到大量的资源. 你现在也在考虑从 Python 入门机器学习吗. 本教程或许能帮你成功上手，从 0 到 1 掌握 Python 机器学习，至于后面再从 1 到 100 变成机器学习专家，就要看你自己的努力了. 本教程原文分为两个部分，机器之心在本文中将其进行了整合，原文可参阅：7 Steps to Mastering Machine Learning With Python 和 7 More Steps to Mastering Machine Learning With Python.
使用AngularJS构建大型Web应用
- - InfoQ cnAngularJS是由Google创建的一种JS框架，使用它可以扩展应用程序中的HTML词汇，从而在web应用程序中使用HTML声明动态内容. 在该团队工作的软件工程师 Brian Ford近日撰写了一篇 blog，分享了如何使用AngularJS构建大型Web应用的经验. 这些经验对于使用其他JS框架构建大型应用的开发者也极具借鉴意义.
使用angularJS的三个重要原因
- - Web前端 - ITeye博客如果你不熟悉什么是Angular.js的话，小编我强烈推荐你阅读 Javascript教程：AngularJS的五个超酷特性. 简单来说Angular.js是google开发者设计和开发的一套前端开发框架，帮助你简化前端开发的负担. 当然，这里有很多其它的前端开发框架，但是如何选择合适的前端框架对于我们这些开发人员来说就不是那么容易了.