Angularjs 简介

码界捕手说
• 阅读 3526

Angularjs 简介

INTRODUCTION(介绍)

AngularJS诞生于2009年,由Misko Hevery 等人创建,后为Google所收购。是一款优秀的前端JS框架,已经被用于Google的多款产品当中。AngularJS是为了克服HTML在构建应用上的不足而设计的。AngularJS有着诸多特性,最为核心的是:MVVM、模块化、自动化双向数据绑定、语义化标签、依赖注入等等。

阅读材料

INSPECTION(省视)

MVVM框架

MVVM框架的全称是Model-View-ViewModel,是Microsoft公司提出并在WPF和WinPhone上广泛使用的设计模式。关于MVVM的设计理念可以参考Microsft的文章

[初始化过程]

  1. 设置ViewModel与Model的对应关系,建立ViewModel

  2. 绑定ViewModel到对应的View上并进行渲染

Angularjs 简介

MVVM与传统的MVC框架之间最大的区别在于其接收User Action进行更新的过程不同

传统的MVC更新流程

Angularjs 简介

  1. View接收到用户的User Action, 调用Controller做对应的业务处理

  2. Controller根据业务逻辑更新Model

  3. Model更新完成之后,Controller用新的Model数据去更新View

Angularjs 简介

  1. View|ViewController接收到用户的User Action,调用ViewModel做对应的业务处理数据更新

  2. ViewModel数据更新完成之后进行View的更新

  3. ViewModel数据更新完成之后通知Model进行更新

现在已经更新了,叫MVW(Model-View-Whatever)......whatever

阅读材料

Two-way data binding 双向数据绑定

单向数据绑定: View的更新一定要Model和Template进行Render重绘画面

Angularjs 简介

双向数据绑定:一次性的模板编译,持续更新View

Angularjs 简介

阅读材料

Dirty Checking 脏数据检查

Angularjs 简介

窃以为,这是angularjs里面最牛B的地方

  1. 在渲染的时期,所有做的数据绑定都会被加到$watch列表中

  2. 当发生Event的时候,调用$apply方法去检查数据一致性既ViewModel与Model是否一致(类似于事件触发机制)

  3. 将dirty-checking看做是一个消化系统,消化系统会自己运行消化脏(pai)数(xie)据(wu)

Dependency Injection 依赖注入

在框架中为我们提供了angular.injector(modules)DI注入注射器

myController.$inject = ['$scope', '$alert'];

阅读材料

WHY(为什么)

为什么是Angularjs

  1. 模板功能强大丰富,自带了丰富的声明式的Angular指令;

  2. 完善的前端MVC框架,包含模板,数据双向绑定,路由,模块化,服务,过滤器,依赖注入等所有功能;

  3. 自定义Directive,自定义html标签;

  4. 代码量非常少;

  5. 单元测试;

  6. 丰富的文档和开源资源

TUTORIAL(教程)

RESOURCE(资源)

丰富的资源是当初选择angularjs的重要原因

点赞
收藏
评论区
推荐文章
Johnny21 Johnny21
4年前
30行代码实现Javascript中的 MVC
从09年左右开始,MVC逐渐在前端领域大放异彩,并终于在刚刚过去的2015年随着ReactNative的推出而迎来大爆发:AngularJS、EmberJS、Backbone、ReactJS、RiotJS、VueJS……一连串的名字走马观花式的出现
Stella981 Stella981
3年前
Angular.js 相关记录
1.AngularJS作用域文档:http://docs.angularjs.org/api/ng.$rootScope.Scope(https://www.oschina.net/action/GoToLink?urlhttp%3A%2F%2Fdocs.angularjs.org%2Fapi%2Fng.%24rootScope.Scope)2.
Stella981 Stella981
3年前
AngularJS1.X版本基础
AngularJS(https://www.oschina.net/action/GoToLink?urlhttps%3A%2F%2Fwww.runoob.com%2Fangularjs%2Fangularjstutorial.html) 知识点(https://www.oschina.net/action/GoToLink?urlhtt
Stella981 Stella981
3年前
Grunt学习笔记【8】
本文主要讲如何用Grunt打包AngularJS的模板HTML。一说明AngularJS中使用单独HTML模板文件的地方非常多,例如:自定义指令、nginclude、templateUrl等。通常这些文件都是独立的html文件,AngularJS中使用这些文件都是通过文件路径地址引用的。当用Grunt打包压缩整个项目时,如何处理这些
Stella981 Stella981
3年前
AngularJS 常用指令
AngularJS指令AngularJS有一套完整的、可扩展的、用来帮助web应用开发的指令集,它使得HTML可以转变成“特定领域语言(DSL)”,是用来扩展浏览器能力的技术之一,在DOM编译期间,和HTML关联着的指令会被检测到,并且被执行,这使得指令可以为DOM指定行为,或者改变它。AngularJS指令带有前
Stella981 Stella981
3年前
AngularJs初探
  最近着手开发一个后台系统,前端采用的是AngularJs来与后台交互,对于我们这群jquery疯狂的铁粉,遇到了不少转不过弯的问题,为了更高效的开发应用,在私下的时间收集和改造了一下AngularJS的$http服务,特此分享。$http的post.请求默认的contentTypeapplication/json.提交
Wesley13 Wesley13
3年前
iBase4J nginx配置
  iBase4J朋友推荐我看这个项目的。后台搭建还是比较容易的,但是到了前台就彻底懵逼了。因为对angularjs不熟悉。git上的nginx附件也下不下来。加qq群需要50块。那就自己动手吧。但是网上搜索“nginxangularjs"关键词并没有发现一些有价值的文章。  我首先用了在angularjs中添加全局变量varctx "h
Stella981 Stella981
3年前
AngularJS 指令实践
指令(Directives)是所有AngularJS应用最重要的部分。尽管AngularJS已经提供了非常丰富的指令,但还是经常需要创建应用特定的指令。这篇教程会为你讲述如何自定义指令,以及介绍如何在实际项目中使用。在这篇文章的最后,我会指导你如何使用Angular指令来创建一个简单的记事本应用。概述一个指令用来引入新的HTML语法。指令是DO
Stella981 Stella981
3年前
AngularJS Providers 详解
供应者(Providers)!image(http://static.oschina.net/uploads/img/201501/21113033_37Xb.png)(https://www.oschina.net/action/GoToLink?urlhttp%3A%2F%2Fimages.cnitblog.com%2Fbl
Easter79 Easter79
3年前
TypeScript系列1
1\.简介  随着PC端快速向移动端迁移,移动(体验)优先的概念也越来越响。由于ReactJS目前移动端仅仅支持iOS,因此移动端Web开发框架只能选择:AngularJS/Angula2Ionic框架Cordova。想要学习好Angula2以及阅读其代码,就必须了解和学习TypeScript,也因此需要学习好ES6以
Stella981 Stella981
3年前