AngularJS理论基础

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

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

AngularJS的四大核心特性：

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

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

前端MVC的困难：操作DOM的代码必须等待整个页面全部加载完成才可以执行；多个JS文件之间如果出现互相依赖，程序员必须自己解决；JS的原型继承也给前端编程带来很多困难。

AngularJS中的controller：

controller使用过程中的注意点：

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

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上下文。

AngularJS理论基础的更多相关文章

  1. AngularJS 初学笔记（理论基础）

    AngularJS 是一个 JavaScript 框架.它是一个以 JavaScript 编写的库. AngularJS 通过 ng-directives 扩展了 HTML. ng-app 指令定义一 ...

  2. 通过AngularJS实现前端与后台的数据对接（二）——服务（service，$http）篇

    什么是服务? 服务提供了一种能在应用的整个生命周期内保持数据的方法,它能够在控制器之间进行通信,并且能保证数据的一致性. 服务是一个单例对象,在每个应用中只会被实例化一次(被$injector实例化) ...

  3. AngularJs之九（ending......)

    今天继续angularJs,但也是最后一篇关于它的了,基础部分差不多也就这些,后续有机会再写它的提升部分. 今天要写的也是一个基础的选择列表: 一:使用ng-options,数组进行循环. <d ...

  4. AngularJS过滤器filter-保留小数，小数点-$filter

    AngularJS      保留小数 默认是保留3位 固定的套路是 {{deom | number:4}} 意思就是保留小数点 的后四位 在渲染页面的时候 加入这儿个代码 用来精确浮点数,指定小数点 ...

  5. Angular企业级开发(1)-AngularJS简介

    AngularJS介绍 AngularJS是一个功能完善的JavaScript前端框架,同时是基于MVC(Model-View-Controller理念的框架,使用它能够高效的开发桌面web app和 ...

  6. 模拟AngularJS之依赖注入

    一.概述 AngularJS有一经典之处就是依赖注入,对于什么是依赖注入,熟悉spring的同学应该都非常了解了,但,对于前端而言,还是比较新颖的. 依赖注入,简而言之,就是解除硬编码,达到解偶的目的 ...

  7. 步入angularjs directive（指令）--点击按钮加入loading状态

    今天我终于鼓起勇气写自己的博客了,激动与害怕并存,希望大家能多多批评指导,如果能够帮助大家,也希望大家点个赞!! 用angularjs 工作也有段时间了,总体感觉最有挑战性的还是指令,因为没有指令的a ...

  8. 玩转spring boot——结合AngularJs和JDBC

    参考官方例子:http://spring.io/guides/gs/relational-data-access/ 一.项目准备 在建立mysql数据库后新建表“t_order” ; -- ----- ...

  9. 玩转spring boot——结合jQuery和AngularJs

    在上篇的基础上 准备工作: 修改pom.xml <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi=&q ...

随机推荐

  1. 通知（NSNotificationCenter）

    // 监听加载更多的通知 [[NSNotificationCenter defaultCenter] addObserver:self selector:@selector(loadMoreDeals ...

  2. 构建工具之 - Gradle一般使用常见问答

    Gradle借助Groovy语言作为其配置脚本,使得Gradle变的十分强大,几乎是无所不能,我们在掌控这个强大且功能繁多的工具时也比较困难和凌乱,因此本文记录一些使用过程常见的配置,以备不时之需! ...

  3. python_way day17 jQuery表单验证，事件绑定，插件，文本框架，正则表达式

    python_way day17 1.jQuery表单验证 dom事件绑定 jquery事件绑定 $.each return值的判断 jquery扩展方法 2.前段插件 3.jDango文本框架 4. ...

  4. LINQ之路 3：C# 3.0的语言功能（下）

    在LINQ介绍一篇中,我们已经看到了隐式类型变量var,扩展方法(Extension method)和Lambda表达式的身影.没错,他们正是LINQ技术的基石,是他们让LINQ的实现成为可能,并且简 ...

  5. 设计js通用库

    设计js通用库的四个步骤: 1.需求分析:分析库需要完成的所有功能. 2.编程接口:根据需求设计需要用到的接口及参数.返回值. 3.调用方法:支持链式调用,我们期望以动词方式描述接口. (ps:设计链 ...

  6. Matlab中的persistent变量

    persistent, 用于定义persistent变量.persistent变量对于声明它的函数来说是局部的,但是当退出该函数时,该变量仍然保存在内存中,数值并不变.persistent变量与全局变 ...

  7. ios 开发之 Xcode6 No valid signing identities (i.e. certificate and private key pair) matching...

    之前的项目用证书真机测试过,我想再无证书Build,出现下面的报错提示! 下面的team我无法改成None!一点击None选的还是Unhonw name(JPGE28K3W9)这个是报错的关键 最后由 ...

  8. POJ 3468 线段树裸题

    这些天一直在看线段树,因为临近期末,所以看得断断续续,弄得有些知识点没能理解得很透切,但我也知道不能钻牛角尖,所以配合着刷题来加深理解. 然后,这是线段树裸题,而且是最简单的区间增加与查询,我参考了A ...

  9. 向java全台推送数据等

    (1)http://www.cnblogs.com/xdp-gacl/p/3789624.html (2)VenusWebHelper  等等 public void test(){ String f ...

  10. java 多线程7（线程的停止）

    notify(): 是很温和的唤醒线程的方法,它不可以指定清除哪一个异常 interrupt(): 粗暴的方式,强制清除线程的等待状态,被清除的线程会接收到一个InterruptedException ...