1、&&前端，是一种GUI软件
在一个Web系统中，用户通过浏览器上网，输入URL的那一刻起，就意味着通过HTTP协议发送一个远程请求，服务端会将一个URL请求映射到一个具体的URL，然后将关联的资源分别返回给浏览器端，浏览器拿到了这些资源之后，负责解释、执行并呈现（渲染）。
从本质上讲，所有Web应用都是一种运行在网页浏览器中的软件，这些软件的图形用户界面（Graphical User Interface，简称GUI）即为前端。【1】
2、&&传统前端文件
HTML（现在常用HTML5），标记语言，负责呈现网页的结构以及内容。打个比方，一栋房子，它有多少层，每一层里面，有几间房间，卧室、厨房、卫生间的分布，玻璃窗户的分布，房子的结构和房子的内容【2】。可以通过静态HTML标记呈现，也可以通过JavaScript编程动态展现。对于JS来说，一个完整的HTML文档就是一棵树，称之为DOM（DocumentObject Model，文档对象模型），对DOM的操作称为DOM操作。
JQuery的DOM操作示例：
&var p_txt =$(&p&).attr(&title&);
CSS（常用CSS3），样式语言，负责网页内容的显示样式。还是上面的例子，一个房子里面某个房间的墙的颜色，窗户的风格等等。
JavaScript，脚本语言。脚本实际上就是为整个HTML Document增加了动态交互的能力。不同的浏览器有着不同的JavaScript实现，所以实现JavaScript跨浏览器兼容成为了后来评论一个JS框架是否实用的一个基本的标准。
3、&&JS框架
3.1前端框架类型
&&&&&&&&&&&&&&& && 图1 常用的一些前端框架
共同特性：
·&&&&&&&&&&选择器（Selector）
·&&&&&&&&&&DOM 遍历
·&&&&&&&&&&DOM 操作
·&&&&&&&&&&实用（Utility）函数
·&&&&&&&&&&事件处理
·&&&&&&&&&&Ajax
3.2 JS框架定义
&& JavaScript框架或库是一组能轻松生成跨浏览器兼容的JavaScript 代码的工具和函数,每一个库都在众多流行的Web 浏览器的现代版本上进行了可靠的测试.
3.3 为什么要用JS框架？
JavaScript框架或库是一组能轻松生成跨浏览器兼容的 JavaScript 代码；另一个比较有说服力的理由是标准化的跨浏览器 Ajax 请求（Ajax
请求是一个异步 HTTP
请求，通常发送给服务器端脚本，后者返回 XML、JSON、HTML
或普通文本格式的响应）。
4、&&AngularJS
AngularJS由 Google 的员工 MiskoHevery 从 2009 年开始着手开发，2012年发布版本1.0。该项目目前已由 Google 正式收购，有一个全职的开发团队继续开发和维护这个库。并且在2014年秋天发布了2.0版本，2016年9月发布了2.0最终版。
4.1 AngularJS的核心概念
&&&&&&&&&&&&&& 图2 AngularJS的七个核心概念【3】
Modules(模块)：
在前端开发过程中，通常的做法都是将处理业务逻辑的代码写在一个单独的JS文件中，然后在HTML页面中引入该文件。这样会带来新的问题，我们的控制器全都定义在全局的命名空间中。假设我们有一个公共的JS文件，在登录页面和密码修改页面都引入这个JS，A开发人员和B开发人员碰巧对控制器的命名都是UserController，这样就会导致命名冲突（全局变量污染）【4】。而且我们在新增一个控制器的时候总是要担心是不是已经有了一个同名的控制器，代码的扩展性变得很差。
AngularJS允许我们使用angular.module()方法来声明模块，这个方法接受两个参数，第一个是我们定义的模块名称，第二个是依赖列表，也就是可以被注入到模块中的对象列表。
Angular.module(‘myApp’,[]);
对于上述例子，我们可以将不同的控制器封装在不同的模块中，然后在对应的HTML文档中用ng-app指令来指定引用所需要的模块。
&&&&&&&&&&&&&&&& 图3 模块的引用
&&&&&&&&&&&&&&&& 图4 模块的定义
使用模块带来的好处：1、保持全局命名空间的清洁；2、易于在不同的应用间复用代码；3、使应用能够以任意顺序加载代码的各个部分。
Components（组件）：
组件是Angular2.0中最基本的一个概念。一个组件包含一个视图即我们用来展示信息或者完成用户交互的页面。 技术上来讲， 一个组件就是一个控制模板视图的类， 在开发应用中会写很多组件。
一个应用中总是存在一个根(主)组件，根组件中包含了其他组件。简而言之，每一个Angular 2应用都有一棵对应的组件树。我们应用的组件树看起来是这样的：
&&&&&&&&&&&&&&&& 图5 组件树【5】
Template（模板）：
AngularJS的主旨即快速创建单页面应用，所谓单页面就是说真正的页面只有一个，其中变化的只是模板和数据。在AngularJS中，一个模板就是一个HTML文件，HTML模板将会被浏览器解析到DOM中，DOM然后成为AngularJS编译器的输入，AngularJS将会遍历DOM模板来生成一些指令。
ng-If是个对于模板很重要的指令，它是基本的条件表达，满足条件时则存在，不满足则不存在。通过它可以轻松的让模板基于数据呈现不同结构。
ng-Repeat则是另一重要指令，能循环创建DOM。可以说只要数据中有数组等结构，这一指令就必不可少
ng-Class是样式层面上的主要指令，它的值可以是存放class名的变量，也可以是带有条件的对象
这些基本的指令构成了一套很有效的模板逻辑，我们可以消除掉各种HTML的重复性代码，还能在单个模板中呈现出无数的形式。
以下为一个例子，ng-repeat指令来循环图片数组并且加入img模板
&&&&&&&&&&&&& 图6 模板示例
Dependency Injection（依赖注入）：
一个对象通常有三种方式可以获得对其依赖的控制权，分别是在内部创建依赖；通过全局变量进行引用；通过参数进行传递。我们所说的依赖注入就是通过第三种方式实现的。
DI的代码逻辑：需要什么对象，声明一下即可，由外界的框架创建这些对象，然后根据每个形参的名称来查找依赖对象并且注入进来。若声明形参名称有错误，则无法提供该对象。
&&&&&&&&&&&&& 图7 依赖注入示例
如果没有明确的声明，AngularJS会假定参数名称就是依赖的名称。因此，它会在内部调用函数对象的ToString()方法，分析并提取出函数参数列表，然后通过$injector（AngularJS中的一种服务）将这些参数注入进对象实例【6】。
Services（服务）：
在 AngularJS 中，服务是一个函数或对象，可在AngularJS 应用中使用。AngularJS 内建了一共30 多个服务。
首先是一个单例，即无论这个服务被注入到任何地方，对象始终只有一个实例。 其次服务被定义在一个模块中，所以其使用范围是可以被我们管理的，避免全局变量污染。
AngularJS中几种服务示例：
$http：用于处理 XMLHttpRequest
$location：提供当前URL的信息
$routeProvider：配置路由
$log：日志服务
&& 定义服务有三种方式：使用系统内置的$provide服务；使用Module的factory方法；使用Module的service方法【7】。
//使用factory方法
app.factory('remoteData',function(){
&&&var data = {name:'n',value:'v'};
//使用service方法
app.service('remoteData',function(){
&&&this.name = 'n';
&&&this.value = 'v';
Data Binding(数据绑定)：
&& 在传统的web框架中，控制器将多个模型中的数据和模板组合在一起形成视图，并将其提供给用户，如果没有任何自定义的JavaScript组件，这样的视图只会体现出它渲染时模型暴露出的数据。AngularJS创建了一个实时模板来代替视图，任何一个独立视图组件中的值都是动态替换的，这是AngularJS中最重要的功能之一。
图8 数据绑定
图9 数据绑定演示
&&& 所谓的双向绑定，无非是从界面的操作能实时反映到数据，数据的变更能实时展现到界面。
&& &div ng-controller=&CounterCtrl&&
&&& &spanng-bind=&counter&&&/span&
&&& &buttonng-click=&counter=counter+1&&increase&/button&
function CounterCtrl($scope) {
&&& $scope.counter = 1;
&&& The&ng-Bind&attribute tells Angular to replace the text content ofthe specified HTML element with the value of a given expression, and to updatethe text content when the value of that expression changes.
&& AngularJS选择了dirty check。简单来说就是给每个需要绑定的元素加个watcher，缓存下OldValue，然后定时遍历所有的watcher，比较NewValue和OldValue，如果变化了做更新操作。
&& 一、浏览器事件循环和AngularJS拓展
我们的浏览器一直在等待事件，比如用户交互。假如你点击一个按钮或者在输入框里输入东西，事件的回调函数就会在javascript解释器里执行，然后你就可以做任何DOM操作，等回调函数执行完毕时，浏览器就会相应地对DOM做出变化。 Angular拓展了这个事件循环，生成一个有时成为angular context的执行环境。
二、、watch队列（watch list）
每次你绑定一些东西到你的UI上时你就会往$watch队列里插入一条$watch。$watch就是那个可以检测它监视的model里时候有变化的东西。当我们的模版加载完毕时，也就是在linking阶段（Angular分为compile阶段和linking阶段），Angular解释器会寻找每个directive，然后生成每个需要的$watch。
三、$digest循环
当浏览器接收到可以被angular context处理的事件时，digest循环就会触发，digest将会遍历我们的watch队列，然后询问它是否有属性和值的变化，直到$watch队列都检查过。这就是所谓的dirty-checking。当所有的$watch都检查完了，如果有至少一个更新过，这个循环就会再次触发，直到所有的$watch都没有变化。这样就能够保证每个model都已经不会再变化，如果循环超过10次的话，它将会抛出一个异常，防止无限循环。 当$digest循环结束时，DOM相应地变化【8】。
Directive（指令）
指令本质上就是AngularJS扩展具有自定义功能的HTML元素的途径，是一个封装的组件，传入参数也通过在html标签中设置属性来实现，而不需要去修改JS代码。就像一个函数一样，可以到处的调用（复用），并且设置不同的属性（参数）来实现不同的功能。
在HTML中要用内置指令ng-app标记出应用的根节点，这个指令需要以属性的形式来使用，因此可以将它写到任何位置，但是写到&html&的开始标签上是最常规的做法。所有内置指令的命名空间都使用ng作为前缀，比如之前所说的ng-repeat、ng-app、ng-If等。因此我们在自定义指令命名时，为了防止命名空间冲突，不要在自定义指令前加ng前缀。
自定义的指令一般有四种表现形式:
1、作为一个新的HTML元素来使用。
&hello&&/hello&或者&hello/&
2、作为一个元素的属性来使用
&div hello&&/div&
3、作为一个元素的类来使用
&divclass=&hello&&&/div&
4、作为注释来使用
&!--directive: hello--&
下面是定义一个最简单指令的示例代码
var app =angular.module('app',[])
app.directive('hello',function(){
restrict:'AECM',
template:'&button&clickme&/button&'
1、restrict[string]这个属性，主要是用来规定指令在HTML代码中可以使用什么表现形式。A代表属性、E代表元素、C代表类、M代表注释。
2、template[string orfunction]这个属性，规定了指令被Angular编译和链接（link）后生成的HTML标记，这个属性可以简单到只有一个HTML文本在里面，也可以特别复杂，当该属性的值为function的时候，那么该方法返回的就是代表模板的字符串。
在定义指令的时候，除了以上最基础的两个属性外，我们还会使用很多其它的属性，
1、priority[number]属性，这个属性是来规定自定义的指令的优先级的，当一个DOM元素上面有一个以上的指令的时候，就需要去比较指令的优先级了，优先级高的指令先执行。
2、terminal[boolean]属性，该参数用来定义是否停止当前元素上比本指令优先级低的指令，如果值为true，就是正常情况，按照优先级高低的顺序来执行，如果设置为false，就不会执行当前元素上比本指令优先级低的指令【9】。
[1]/fouber/blog/issues/10 百度工程师张云龙前端工程-基础篇
[2]/fecktty2013/p/4800645.html周信达 小菜的前端编程散谈
[3]https://gf-rd.gitbooks.io/angular-2-step-by-step/content/chapters/1.2.htmlAngularJS的七个核心概念图片来源
[4]http://blog.csdn.net/rongbo_j/article/details/AngularJS轻松入门（四）模块化
[5]/a/9594#articleHeader4AngularJS核心概念之组件树& 图片来源
[6]/tangshiwei/p/5496268.htmlAngularJS学习笔记之依赖注入
[7]/lijin/p/5938443.html走进AngularJS----服务
[8]/blog/2013/08/watch-how-the-apply-runs-a-digest/&&& AngularJS Tips
[9]/ww-ervin-72/p/5296788.htmlAngularJS中的指令
本文已收录于以下专栏：
相关文章推荐
Angular-CLI
应用的命令行界面原型基于 ember-cli 项目.注意这个项目仍在完善进行时。现在我们的命令行界面已经处于beta版本。
如果你想协助我们，那这个项目还有很多需要...
modal 模态框 二次封装
Angularjs是目前最常用、功能极强，被广泛应用于生产实践中的一套框架，是为了克服HTML在构建应用上的不足而设计的。
Angularjs，正是看到了互联网发展的需要，设计出来这款方便做网络AP...
本文作者Tal Gleichger是拥有8年实战经验的资深全栈Web开发者，也是SocialBelong的CTO及联合创始人。在移动开发成为大势所趋之后，转战移动应用开发，在深度接触Hybrid Ap...
angular.js和ionic框架搭建一个webApp
注：本文适合对angular.js有基础的同学
这是本系列文章的开篇，本系列文章均是转载，目的是方便自己查阅，并且以后方便改动
1.安装nodejs
    
sudo apt-getinstall git-core g++ curl
$ git clonegit:///creationix/nvm.gi...
(持续更新)
写在最前面，从实习到毕业后这大半年来都是在现在所在的公司工作，才开始接触公司的项目时，后端都是用的熟悉的知识，然后前端却用了从来没听说过得angularjs，从开始接触到现在，也算是会...
1.用AngularJs app种子初步搭载好框架之后就需要我们手动往里面填充一些东西了，首先打开我们的app文件夹下面的index.html,加入一些我们需要用的js和css（当然是bootstra...
在网上很多AngularJS的项目示例中，目录结构都是简单的按照controller，view，service分层的，其实这种目录结构在大一点的项目中根本没法用，因为实际项目的controller可能...
他的最新文章
讲师：刘文志
讲师：陈伟
您举报文章：
举报原因：
原文地址：
原因补充：
(最多只允许输入30个字)在 SegmentFault，解决技术问题
每个月，我们帮助 1000 万的开发者解决各种各样的技术问题。并助力他们在技术能力、职业生涯、影响力上获得提升。
一线的工程师、著名开源项目的作者们，都在这里：
获取验证码
已有账号？
问题对人有帮助，内容完整，我也想知道答案
问题没有实际价值，缺少关键内容，没有改进余地
跟angular结合比较好的手机前端框架有哪些？ 用过ionic 觉得有点多大。比较适合做企业级应用。或者跟phonegap一起做混合应用这个还不错。而，angular material
或者angular MObile UI 这些呢又不太适合中国人的审美。想问下有没有比较小。且适合中国人审美的前端框架呢？
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
其实用Angular 1.x做手机Web应用有点太重量级了，一般现在用Angular 1.x做PC端的Web应用还是很不错的；如果可以的话，使用Angular 2或者Vue.js可能会更好。
以下几个可以试试，应该都还算轻量一点：1.，这个用过，感觉还可以。2.，这个没用过，看介绍还不错。3.。4.
分享到微博？
关闭理由：
删除理由：
忽略理由：
推广（招聘、广告、SEO 等）方面的内容
与已有问题重复（请编辑该提问指向已有相同问题）
答非所问，不符合答题要求
宜作评论而非答案
带有人身攻击、辱骂、仇恨等违反条款的内容
无法获得确切结果的问题
非开发直接相关的问题
非技术提问的讨论型问题
其他原因（请补充说明）
我要该，理由是：登录以解锁更多InfoQ新功能
获取更新并接收通知
给您喜爱的内容点赞
关注您喜爱的编辑与同行
966,690 九月 独立访问用户
语言 & 开发
架构 & 设计
文化 & 方法
您目前处于：
基于AngularJS的企业软件前端架构
基于AngularJS的企业软件前端架构
1&他的粉丝
日. 估计阅读时间:
：Facebook、Snapchat、Tumblr等背后的核心技术
Author Contacted
语言 & 开发
37 他的粉丝
架构 & 设计
196 他的粉丝
0 他的粉丝
0 他的粉丝
0 他的粉丝
前端开发框架
0 他的粉丝
相关厂商内容
相关赞助商
告诉我们您的想法
允许的HTML标签: a,b,br,blockquote,i,li,pre,u,ul,p
当有人回复此评论时请E-mail通知我
编辑能检查下排版的质量么？
Re: 编辑能检查下排版的质量么？
企业领域，Flex要比HTML适合
“关于Web应用组件化的文章”有链接不？
允许的HTML标签: a,b,br,blockquote,i,li,pre,u,ul,p
当有人回复此评论时请E-mail通知我
允许的HTML标签: a,b,br,blockquote,i,li,pre,u,ul,p
当有人回复此评论时请E-mail通知我
赞助商链接
架构 & 设计
文化 & 方法
<及所有内容，版权所有 &#169;
C4Media Inc.
服务器由 提供, 我们最信赖的ISP伙伴。
北京创新网媒广告有限公司
京ICP备号-7
找回密码....
InfoQ账号使用的E-mail
关注你最喜爱的话题和作者
快速浏览网站内你所感兴趣话题的精选内容。
内容自由定制
选择想要阅读的主题和喜爱的作者定制自己的新闻源。
设置通知机制以获取内容更新对您而言是否重要
注意：如果要修改您的邮箱，我们将会发送确认邮件到您原来的邮箱。
使用现有的公司名称
修改公司名称为：
公司性质：
使用现有的公司性质
修改公司性质为:
使用现有的公司规模
修改公司规模为：
使用现在的国家
使用现在的省份
Subscribe to our newsletter?
Subscribe to our industry email notices?
我们发现您在使用ad blocker。
我们理解您使用ad blocker的初衷，但为了保证InfoQ能够继续以免费方式为您服务，我们需要您的支持。InfoQ绝不会在未经您许可的情况下将您的数据提供给第三方。我们仅将其用于向读者发送相关广告内容。请您将InfoQ添加至白名单，感谢您的理解与支持。作者：vienwu
react是facebook推出一个用来构建用户界面的js库。官方介绍的三大特性如下：
just the ui
把react只当作一个ui组件就好，等同于传统mvc中的view。
virtual dom
react在编程模型和传统dom之间添加了一层，称之为虚拟dom。好处非常多，性能更好，可以在node环境下完成渲染（解决seo问题），可以更好的用于开发native apps。
反应式的单向数据绑定，比传统数据绑定更简单，简单的使用js事件触发改变组件状态也可以实现双向绑定的效果。
什么是angularjs
angularjs是google推出的一个前端js框架，面世已有几年时间，非常成熟，目前已经有非常多的第三方模块，基本上可以解决前端工程领域的各方面的问题。网上的资料也非常多，这里就不做过多介绍。
reactjs和angularjs
reactjs是非常纯粹的组件式开发，所有的页面元素均由各大小组件组合而成。再插上虚拟dom的翅膀，实现了一处代码多平台执行的效果，关键是这货性能还不错。但是呢，除了组件以外，这货其他什么功能也没有，你需要重新造出所有的缺失的轮子或者选择第三方的轮子。
angularjs则是一个完整的框架，意味着不需要太多的工作，就可以使用于大部分的业务场景。简单好用的module和依赖注入系统，controller中定义的数据和事件，service实现不同组件之间共享数据，filter处理筛选数据，forms支持表单和复杂的表单验证，简单的动画模块animations，强大的directive实现指令和指令的嵌套，可以很轻松的实现reactjs的组件及组件组合功能。ui组件有bootstrap for angular，路由有ui-router，还有promise模块$q，还有原生的$resource模块直接支持标准的restful接口，集成的单元测试，等等，哇哇，功能好多的样子，又到但是的环节，话说很多初学者会被很多angularjs的名词折磨的晕头转向。。。
如果要拿reactjs来开发应用，你还需要做很多额外的工作。而如果使用angularjs的话，就可以直接开始工作了。
两者之间其实无法直接拿来比较，毕竟react只是view的解决方案，而angularjs是包含mv*的完整框架。
抛开跨平台和性能因素，就功能而言，angularjs已经包含了reactjs的功能，只需要一个自定义directive加controller就可以轻松实现组件效果。
如果是一个大型项目，使用angularjs无疑更可靠。强大的功能带来一定的学习成本，但这一切都是值得的。而使用react的话，你首先需要考虑一个问题，数据怎么管理？用哪个mvc库？接下来还有一堆问题等着你。
如果只是一个小型项目，那就看心情吧。
再单独说下关于数据的问题，react还搞出了一个叫做flux的概念。简单看了一下react的flux模型，这不就是个观察者模式嘛。而angular至少支持了三种数据共享方式，包括service，事件，rootScope直接添加一个object，可以分别适应各种不同的场景。
我们来看看react和angular实现组件的方式有什么不一样。。
很多人包括我刚看到jsx时会想一个问题，我靠，这货是什么玩意？
js已经有了coffeescript、typescript等，以后还有es6，难道还要学一个这玩意？
还好，除了jsx外，我们也可以直接用js甚至coffee来编写，虽然麻烦了点。
你只要记住，在react的世界，jsx的语法比js写起来更方便更容易理解就好了，具体用什么取决于你自己。
注1：为了便于没有jsx基础的jser理解，本文所有react示例均使用编译后的js代码。
注2：用coffee写更爽。
第一个组件，hello系列，先看react的实现
var HelloMessage = React.createClass({displayName: "HelloMessage",
render: function() {
return React.createElement("div", null, "Hello ", this.props.name);
React.render(
React.createElement(HelloMessage, {name: "John"}),
document.getElementById('container')
看一看angular正常的方式：
template.html
controller
var app = angular.module('app');
app.controller('testController',["$scope",function($scope){
$scope.name = 'John';
再看一看用angular式组件，使用directive
var app = angular.module('app');
app.directive('myComponent',function(){
link:function(scope,element,attrs){
var name = attrs.
element.text('Hello ' + name);
&myComponent name="John"&
react的组件组合非常简单，使用React.createElement方法即可。例如给上面定义的HelloMessage的外层添加一个div，可以这样写：
var HelloMessageWithDiv = React.createClass({
displayName:'HelloMessageWithDiv',
render:function(){
return React.createElement(
React.createElement(HelloMessage, {name: "John"})
angular也很简单，直接写html即可
react对dom的封装都在React.DOM命名空间下，而coffeescipt支持解构赋值语法，所以用coffee的写法也可以媲美jsx的语法，例如：
{div,h1,h2,h3,h4,input,span} = React.DOM
React.render(
div null,'head.',
div null,'nav',
li null,'li1'
li null,'li2'
div null,'container',
h1 null,'title'
div null,'content'
h2 null,'h2'
,document.getElementById 'container' )
为什么用react
虽然目前react非常之火爆，但说实话，我也不知道在现在环境中用react有什么意义。在使用angularjs开发几个项目之后，如果需要转向react，只有以下几点可能会吸引我：
足够好的性能
跨平台开发的统一体验。这个还得等react-android出来后才知道。
兼容其他js库，在现有项目中就可以使用
而对于angularjs，我认为目前angularjs已经足够好用了，除了以下几个显著的问题：
性能问题，目前angularjs在移动端的性能确实不够，因为它实在太大了。这个问题是最致命的。
只能在angular的框架下开发，第三方库要兼容angular都需要做一些工作。
对于angularjs其他所谓的缺点，其实大多可以解决，只是难易程度不同，例如SEO/构建等都可以解决。上手难易程度来说，angularjs确实比react难很多，但这和一个工具是否好用没有关系，例如正则。
网上看到大家都在鼓吹react如何如何，又有很多人抛弃了angular投向react的怀抱。说实话有点吹的太过了。react只是让组件式开发和复用更加简单好用，外加逆天的性能，仅此而已。
最后，到底应该用什么，看你的心情吧，我要赶去改bug了。。
原文链接：
此文已由作者授权腾讯云技术社区发布，转载请注明，获取更多云计算技术干货，可请前往
原文链接：
欢迎大家关注腾讯云技术社区-，我们将持续在博客园为大家推荐技术精品文章哦~
阅读(...) 评论()