AngularJS理论基础

时间 2019-12-01

原文原文链接

AngularJS理论基础javascript

AngularJs是一个用于设计动态web应用的结构框架。html

它是一个框架，不是类库，是像EXT同样提供一整套方案用于设计web应用。它不只仅是一个javascript框架，由于它的核心实际上是对HTML标签的加强。使你可以用标签完成一部分页面逻辑，具体方式就是经过自定义标签、自定义属性等，这些HTML原生没有的标签/属性在ng中有一个名字：指令（directive）。web应用能为用户提供丰富的操做，可以随用户操做不断更新视图而不进行url跳转。ng官方也声明它更适用于开发CRUD应用，即数据操做比较多的应用，而非是游戏或图像处理类应用。为了实现这些，它引入了一些很是棒的特性，包括模板机制、数据绑定、模块、指令、依赖注入、路由。经过数据与模板的绑定，可以让咱们摆脱繁琐的DOM操做，而将注意力集中在业务逻辑上。前端

AngularJS的四大核心特性：java

1.MVC：Model（数据模型层）-Controller（业务逻辑和控制逻辑）-View（视图层负责展现）程序员

为何须要MVC：职责清晰，代码模块化，有利于代码的复用，有利于后期维护（修改一块功能不影响其余模块）。web

前端MVC的困难：操做DOM的代码必须等待整个页面所有加载完成才能够执行；多个JS文件之间若是出现互相依赖，程序员必须本身解决；JS的原型继承也给前端编程带来不少困难。编程

AngularJS中的controller：json

controller使用过程当中的注意点：前端框架

1：不要试图去复用controller，一个控制器通常只负责一小块的视图；app

2：不要在controller中操做DOM，这不是控制器的职责所在；

3：不要在controller里面作数据格式化，ng有很好用的表单控件；

4:不要在controller里面作数据过滤操做，ng有$filter服务；

5：通常来讲，controller是不会互相调用，控制器之间的交互经过事件进行。

AngularJS中的Module：

2.模块化

<!doctype html>
<html ng-app>
<head>
<mate charset="utf-8">
</head>
<body>
<div ng-controller="HelloAngularJs">//控制器controller
<p>{{greeting.text}},Angular</p>//P标签：视图view ；{{}}：数据模型module   
</div>  
</body>
<script src="js/angular-1.3.0.js"></script>  
<script>
//非模块化
    function HelloAngular($scope){
        $scope.grerting={
            text:'hello'
        };    
    }
//模块化
var myMoudel=angular.module("HelloAngular",[]);
myMoudel.controller("hellorAngular",['$scope',//依赖注入
  function HelloAngular($scope){
        $scope.grerting={
            text:'hello'
        };    
    }    
])
</script>      
</html>

AngularJS依赖注入：和主动获取相反，是对数据的被动接收

　　关于$scope

　　1.$scope是POJO（Plain Old Javascript Object）；
　　2.$scope是有层次关系的；

　　3.$scope是表达式的执行环境（做用域）；

　　4.$scope是树形结构，与DOM标签平行；

　　5.$scope对象会继承父$scope的属性和方法；

　　6.每个Angular应用只有一个根$scope对象（通常位于ng-app上）；

　　7.$scope能够传播事件，相似于DOM事件，能够向上也能够向下；

　　8.$scope不只是MVC的基础，也是后面是想双向数据绑定的基础；

　　9.在主模块加载时就有一个默认的$scope，称为$rootscope（根scope），是全部scope的父做用空间，

　　　　在没有其余指定的scope时都是默认的rootscope，有指定的scope时，运行它自己；

　　10.$scope提供了一些工具方法$watch()、$apply()；

　　11.其余指定的scope时，各自也是在指定的做用空间内起做用。

3.指令系统（特有）

<!doctype html>
<html ng-app="MyModule">//ng-app在一个单页应用中只能出现一个
<head>
<mate charset="utf-8">
</head>
<body>
<hello></hello>  
</body>
<script src="js/angular-1.3.0.js"></script>  
<script>
var myMoudel=angular.module("myModule",[]);
myMoudel.directive("hello",function(){//hello是directive的名称
       return{
　　　　　　restrict:'E',
　　　　　　template:'<div>Hi everyone!</div>'
　　　　　　replace:true
　　　　　　
        };    
    });  
  
</script>      
</html>   //利用Directive实现View的复用

指令(directive)
模板中可使用的东西包括如下四种：

1.指令(directive)：ng提供的或者自定义的标签和属性，用来加强HTML表现力；

2.标记(markup)：即双大括号{{}}，可将数据单向绑定到HTML中；

3.过滤器(filter)：用来格式化输出数据；

4.表单控制：用来加强表单的验证功能。

5.样式相关的指令：

ng-class

<div ng-class=”{redtext:{{red}}, boldtext:{{bold}}, striketext:{{strike}}}” ></div>

ng-style

<div ng-style="{color:'red'}">ng-style测试</div>

6.对于经常使用的表单控件功能，ng也作了封装，方便灵活控制。

　　<1>.ng-checked控制radio和checkbox的选中状态

　　<2>.ng-selected控制下拉框的选中状态

　　<3>.ng-disabled控制失效状态

　　<4>.ng-multiple控制多选

　　<5>.ng-readonly控制只读状态

7.事件绑定相关指令

　<1>.ng-click

　<2>.ng-change

　<3>.-dblclick

　<4>.-mousedown

　<5>.-mouseenter

　<6>.-mouseleave

　<7>.-mousemove

　<8>.-mouseover

　<9>.-mouseup

　<10>.ng-submit

4.双向数据绑定（特有）

<!doctype html>
<html ng-app>
<head>
<mate charset="utf-8">
</head>
<body>
<input ng-module="greeting.text"/>
<p>{{greeting.text}},AngularJS</p>
</body>
<script src="js/angular-1.3.0.js"></script>      
</html>   //复用module

表达式
1.能够作比较；

2.同时逻辑运算均可以使用；

3.加减乘除等等。

过滤器
currency(货币)、date(日期)、filter(子串匹配)、json(格式化json对象)、limitTo(限制个数)、lowercase(小写)、uppercase(大写)、number(数字)、orderBy(排序)

Angularjs与jQuery之间的区别:
Ng:它是一种基于MVVM理念的前端框架，模型与视图相互绑定的方法，利用$scope把模型内的东西显示在视图上，完成相应的双向绑定，不须要对DOM进行任何操做。依赖注入是Ng中的重要理念：想要的东西不须要本身去建立，只须要申明后接收注入。
jQ:它是对js的一种封装，本质上仍是js的方法，仍是对DOM进行了大量的操做。

$watch:
$scope的监听列表，是一个队列。只有和视图绑定的才会添加到监听列表，监听列表不断检测数据的改变，但他会不断的立刻响应检测和改变，因此引出$digest。

$digest:
专门循环监听列表$watch。若是$watch的某一个元素的数据不同，就对该元素数据的改变进行暂时保存，再用回调函数循环检测下一个改变，直到队列中全部的改变中止后再发送。可是在$digest中不能过多的引发改变。

$digest循环的启动条件：$scope的数据的改变必须在Anglurjs的上下文范围。如何保持在Anglurjs的上下文范围，就有了$apply。

$apply:Anglurjs的上下文中的一个对象，能够把不在Anglurjs上下文范围的元素放在$apply中，给他造成一个Anglurjs上下文。