AngularJS的起源和发展史
好久没有发布文章了,由于野哥最近实在太忙。今天抽出来点时间,把最近研究的一个框架给大家整理一下。AngularJS作为目前市面上很火的一个前段框架,它的故事也不少。
首先,我们简单的看一下:
AngularJS为了克服HTML在构建应用上的不足而设计。HTML是一门很好的为静态文本展示设计的声明式语言,但要构建WEB应用的话它就显得很乏力了。所以AngularJS(以下使用ng代替)试图成为WEB应用中的一种端对端的解决方案,2009年由Misko Hevery等人创建,后又被Google所收购。
AngularJS版本介绍
- 目前最新版本AngularJS全新2.0版
- ng放弃了对IE8的兼容问题
- 引入单项数据绑定
- 删掉过时的API(为了迎接全新的2.0版)
AngularJS五大核心特性
1 MVC
- model: 模型层,主要负责数据的存储,我们通常叫做数据模型。
- view: 视图层,主要负责数据的显示,以及所有可视化界面的搭建。
- controller: 控制层,主要负责业务逻辑和控制逻辑
1.1 MVC模式为什么会独立于23种设计模式之外呢?
首先MVC这么分层是为了将数据(Model)和视图(View)分离开来,然后用控制器(Controller)来粘合M和V之间的关系,它已经成为观察者模式(Observer),策略模式(Strategy)和组合模式(Composite)三个设计模式的演变。
1.2 MVC的好处:
- 1.使应用模块化,便于管理;
- 2.可以复用,降低代码冗余;
- 3.逻辑更加清晰。
2 模块化
Module的常用属性
- Config
- Filter
- Directive
- Factory/Service/Provider/Value
- Controller
模块化的好处
- JavaScript中应避免使用全局函数,因为他们很容易被其他脚本文件覆盖。 AngularJS模块让所有函数的作用域在该模块下,避免了该问题;
- 模块是应用控制器的容器;
- 易拆分,易控制,易复用。
3 指令系统
- ng-app: 声明AngularJS应用;
- ng-model: 把元素值(比如输入域的值)绑定到应用程序;
- ng-bind: 把应用程序数据绑定到HTML视图;
- ng-init: 初始化AngularJS应用程序变量。
- 自定义指令,例如:自定义一个标签
指令系统的本质很类似于taglib(以上几个指令知识简单的给大家介绍一下,接下来咱们会逐一进行讲解)
4 双向数据绑定
目前很多前端框架只支持单项数据绑定:jQueryUI、BackBone、Flex等。
说双向数据绑定之前,我们先说一下单项数据绑定,如下图所示:简单点说,单项数据绑定主要是将数据模型绑定到视图中,方便视图展示模型中数据。缺点:一旦生成UI,那么不再变化。
双向数据绑定,如下图:
依旧简单点说一下,双向数据绑定就是在单项数据绑定的基础上,又将试图层(通常是表单元素)与数据层建立反向链接,进而反向影响数据。好处:model和view互相影响。
5 依赖注入
提起依赖注入,一定会引出来另外的一个词,叫做控制反转。这里我们从概念上线进行分析一下。 依赖注入是从应用程序的角度在描述,可以把依赖注入描述完整点:应用程序依赖容器创建并注入它所需要的外部资源;而控制反转是从容器的角度在描述,描述完整点:容器控制应用程序,由容器反向的向应用程序注入应用程序所需要的外部资源。
以下,借用一个小的练习向大家展示一下AngularJS的基本使用,以及优势。
<div ng-app="myApp" ng-controller="myCtrl" ng-init="first=9; last=5;">
<p>在输入框中尝试输入:</p>
<!--通过数据双向绑定,来获取输入框内的数,并与first、second进行绑定,最后通过表达式first * last得到结果显示在最后一个p标签内-->
<p>第一个数字:<input type="text" ng-model="first"></p>
<p>第二个数字:<input type="text" ng-model="last"></p>
<!--{{}}表达式-->
<p>{{first * last}}</p>
<!--JS部分代码如下:模块化,并可以设置初始值-->
var app = angular.module('myApp',[]);
app.controller('myCtrl', function ($scope) {
// $scope.first = 8;
// $scope.last = 5;
});
以上一个简单的例子,可以很简单的证明AngularJS的有点,想有更输入的研究,请持续关注未来几天Angular的博客。现在ng更多的应用于大型的应用中,并且和风头正旺的react不分上下,有融合的趋势。所以AngularJS的学习必须而且重要。
喜欢的可以扫一扫二维码关注微信,会持续更新AngularJS以及各种教程,博客。