AngularJS简介

最新推荐文章于 2024-06-23 17:16:57 发布

Braver_smile

最新推荐文章于 2024-06-23 17:16:57 发布

阅读量1.4k

点赞数

分类专栏： AngularJS 文章标签： angularjs html

本文链接：https://blog.csdn.net/Braver_Smile/article/details/50924789

版权

AngularJS 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

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的基本使用，以及优势。动图：1-1

<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以及各种教程，博客。