AngularJS是什么？

AngularJS是一种构建动态Web应用的结构化框架.主要用于构建单页面Web应用, 增加抽象级别，使构建交互式的现代Web应用变得更加简单。

AngularJS使开发Web应用变得非常简单，同时也降低了构建复杂应用的难度。它提供了开发者在现代Web应用中经常要用到的一系列高级功能，例如：
 解耦应用逻辑、数据模型和视图；
 Ajax服务；
 依赖注入；
 浏览历史（使书签和前进、后退按钮能够像在普通Web应用中一样工作）；
 测试；
 更多功能...

我们可以在AngularJS应用的模板中使用多种标记，包括下面这些。
 指令：将DOM元素增强为可复用的DOM组件的属性或元素。
 值绑定：模板语法{{ }}可以将表达式绑定到视图上。
 过滤器：可以在视图中使用的函数，用来进行格式化。
 表单控件：用来检验用户输入的控件。

1.ng-app和ng-model数据绑定

知识要点：1）.ng-app是一个指令，声明所有被它包含的元素都属于AngularJS 应用，不一定要在html根上，也可以在子dom<br />
2）.input ng-model="name" 数据模型<br />
3）.使用 2个花括号花括号ng-model的属性名 绑定数据
当客户端的数据模型发生变化时，视图就能反映出这些变化，并且不需要写任何自定义的代码，它就可以工作。

<!DOCTYPE html>

<html ng-app>

<head>

    <script src="scripts/angular.min.js"></script>

</head>

<body>

    <input ng-model="name" type="text" placeholder="Your name">

    <h1>Hello {{ name }}</h1>

</body>

</html>

2.ng-controller

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml" ng-app>

<head>

    <title></title>

    <script src="scripts/angular.min.js"></script>

    <script type="text/javascript">

        //刚开始学习，我们把控制器的代码写到了一个在全局命名空间中定义的函数里

        function MyController($scope) {

            var updateScopeClock = function () {

                $scope.myclock = new Date();

            }

            updateScopeClock();

        };

        function MyController2($scope, $timeout) {

            var updateScopeClock = function () {

                $scope.myclock = new Date();

                $timeout(function () { updateScopeClock() }, 1000);

            }

            updateScopeClock();

        };

        //如果对象有多个属性，更新对象某个属性的值，而不是整个对象，这样更好。在这个例子中，相比每秒钟都更新$scope.clock，更新clock.now的值会是更好的选择。

        function MyController3($scope) {

            $scope.myclock = { nowTime: new Date(), timezone: "China" };

            var updateClock = function () {

                $scope.myclock.now = new Date();

            };

            //每一秒调用一次$scope.$apply(updateClock),每秒执行一次updateClock方法，每次更新一下属性的值

            setInterval(function () {

                $scope.$apply(updateClock);

            }, 1000);

            updateClock();

        }

    </script>

</head>

<body>

    <p>

        正如ng-app 声明所有被它包含的元素都属于AngularJS 应用一样，DOM元素上的

        ng-controller声明所有被它包含的元素都属于某个控制器。

    </p>

    <p></p>

    MyController demo，这里绑定的是MyController的myclock:

    <div ng-controller="MyController">

        <h5>{{ myclock }}</h5>

    </div>

    <p></p>

    MyController2 demo，这里绑定的是MyController2的myclock:

    <div ng-controller="MyController2">

        <h5>{{ myclock }}</h5>

    </div>

    <p></p>

    MyController3 demo，这里绑定的是MyController3的myclock:

    <div ng-controller="MyController3">

        <h5>{{myclock.nowTime}}</h5>

    </div>

</body>

</html>

3.模块

在JavaScript中，将函数代码全部都定义在全局命名空间中绝对不是什么好主意，这样做会导致冲突从而使调试变得非常困难，浪费宝贵的开发时间。

生产环境中的控制器代码，一般封装在一个我们称之为模块（module）的单元内。

　　在AngularJS中，模块是定义应用的最主要方式。模块包含了主要的应用代码。一个应用可
以包含多个模块，每一个模块都包含了定义具体功能的代码。
使用模块能给我们带来许多好处，比如：
 保持全局命名空间的清洁；
 编写测试代码更容易，并能保持其清洁，以便更容易找到互相隔离的功能；
 易于在不同应用间复用代码；
 使应用能够以任意顺序加载代码的各个部分。
　　AngularJS允许我们使用angular.module()方法来声明模块，这个方法能够接受两个参数，
第一个是模块的名称，第二个是依赖列表，也就是可以被注入到模块中的对象列表。
angular.module('myApp', []);
这个方法相当于AngularJS模块的setter方法，是用来定义模块的。
调用这个方法时如果只传递一个参数，就可以用它来引用模块。例如，可以通过以下代码来引用myApp模块：
// 这个方法用于获取应用
angular.module('myApp')

开发大型应用时，我们会创建多个模块来承载业务逻辑。将复杂的功能分割成不同的模块，有助于单独为它们编写测试。

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <title></title>

    <script src="scripts/angular.min.js"></script>

    <script type="text/javascript">

        var myModule = angular.module('myModule', []);

        myModule.run(function ($rootScope) {

            $rootScope.name = "World";

        });

    </script>

</head>

<body>

    <div ng-app="myModule">

        Hi {{name}}

    </div>

</body>

</html>

4.作用域

作用域（scope）①是构成AngularJS应用的核心基础，在整个框架中都被广泛使用，因此了解它如何工作是非常重要的。

$scope对象在AngularJS中充当数据模型，但与传统的数据模型不一样，$scope并不负责处理和操作数据，它只是视图和HTML之间的桥梁，它是视图和控制器之间的胶水。。在应用将视图渲染并呈献给用户之前，视图中的模板会和作用域进行连接，然后应用会对DOM进行设置以便将属性变化通知给AngularJS。

作用域提供了监视数据模型变化的能力。它允许开发者使用其中的apply机制，将数据模型的变化在整个应用范围内进行通知。我们在作用域的上下文中定义和执行表达式，同时它也是将
事件通知给另一个控制器和应用其他部分的中介。
将应用的业务逻辑都放在控制器中，而将相关的数据都放在控制器的作用域中，这是非常完美的架构。
作用域有以下的基本功能：
 提供观察者以监视数据模型的变化；
 可以将数据模型的变化通知给整个应用，甚至是系统外的组件；
 可以进行嵌套，隔离业务功能和数据；
 给表达式提供运算时所需的执行环境。
开发AngularJS应用的大部分工作内容，就是构建作用域及其相关的功能。

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <title></title>

    <script src="scripts/angular.min.js"></script>

    <script type="text/javascript">

        var myModule = angular.module('myModule', []);

        myModule.run(function ($rootScope) {

            $rootScope.name = "this is rootScope.name,World";

        });
 　　　　//告诉angular，要生成一个控制器,注入

        myModule.controller('myController', function ($scope) {

            $scope.name = "this is scope.name";//$scope.name就是数据模型

        });

    </script>

</head>

<body>

    <div>

        <p>

            $rootScope是AngularJS中最接近全局作用域的对象。在$rootScope上附加太多业务逻并不是好主意，这与污染JavaScript的全局作用域是一样的。

        </p>

        我们可以不将变量设置在$rootScope上，而是用控制器显式创建一个隔离的子$scope对象，把它设置到这个子对象上。使用ng-controller指令可以将一个控制器对象附加到DOM元素上，

        如下所示：

    </div>

    <div ng-app="myModule">

        rootScope name: {{name}} <br />

        <div ng-controller="myController">

            scope.name {{name}}

        </div>

    </div>

</body>

</html>

$scope对象的生命周期处理有四个不同阶段。
4.4.1 创建
在创建控制器或指令时，AngularJS会用$injector创建一个新的作用域，并在这个新建的控
制器或指令运行时将作用域传递进去。

4.4.2 链接
当Angular开始运行时，所有的$scope对象都会附加或者链接到视图中。所有创建$scope对象的函数也会将自身附加到视图中。这些作用域将会注册当Angular应用上下文中发生变化时需要运行的函数。
这些函数被称为$watch函数，Angular通过这些函数获知何时启动事件循环。

4.4.3 更新
当事件循环运行时，它通常执行在顶层$scope对象上（被称作$rootScope），每个子作用域都执行自己的脏值检测。每个监控函数都会检查变化。如果检测到任意变化，$scope对象就会触发指定的回调函数。

4.4.4 销毁
当一个$scope在视图中不再需要时，这个作用域将会清理和销毁自己。尽管永远不会需要清理作用域（因为Angular会为你处理），但是知道是谁创建了这个作用域还是有用的，因为你可以使用这个$scope上叫做$destory()的方法来清理这个作用域。

AngularJs学习笔记-AngularJS权威教程学习笔记的更多相关文章

  1. 学习笔记-AngularJs（十）

    前面一直在说自定义指令,但是却一直没有一次系统地去了解,现在需要我们一起来学习如何去使用自定义指令,去丰富html标签.属性,实现多元化.多功能的标签(或是属性).辣么,啥是指令?要了解指令,首先需要 ...

  2. 学习笔记-AngularJs（九）

    到目前为止,我们所做的学习案例都是没有加任何动画效果的,对于以往来说,我们经常会去使用一些动画插件或是css框架(如:animate.css)来点缀我们的网页,这样显得生动,高大上,那么接下来我们可以 ...

  3. 学习笔记-AngularJs（七）

    在学习笔记-AngularJs(六)提及了事件处理器和过滤器以及它们的例子,而我们知道之前我是使用$http服务去获得我们需要的json数据,但是$http是比较底层的用法,有时候我们想把获取json ...

  4. 学习笔记-AngularJs（六）

    在学习笔记-AngularJs(五),通过引入bootstrap.css进行改写整个样式,这时学习项目也变得好看多了,现在我们又需要目录再进行一次改变,如下图: 这样就符合之前讲的对学习目录进行布置了 ...

  5. 学习笔记-AngularJs（三）

    学习笔记-AngularJs(二)写了个所有程序语言入门时都必须要写的Hello World,那么从现在开始做那个之前说过的互联网大佬介绍的学习例子,当然这里开始会慢慢按照之前说过的目录来搭建这个学习 ...

  6. 学习笔记-AngularJs（二）

    在接下来学习angularjs中,我按照的就是之前 学习笔记-AngularJs(一)所讲的目录来搭建一个学习的项目,做一个互联网大佬人物简介的例子,当然也可以使用angualrjs上面提供的官方例子 ...

  7. angularjs学习第七天笔记（系统指令学习）

    您好,接着在昨天对简单指令学习了解以后,今天开始学习了解angularjs中的系统指令 系统指令大部分都是以ng开始,这也是为什么在自定义指令命名时不要以ng开始的原因所在 系统指令在学习了分成两个部 ...

  8. angularjs学习第六天笔记（指令简介学习）

    您好,由于周末有事情,没哟学习angularjs,几天晚上开始继续学习angularjs,坚持加油每一天.谢谢 接着上周五学习了表单验证以后,今天开始学习angularjs中一个非常重要的模块:指令 ...

  9. Hadoop权威指南学习笔记二

    MapReduce简单介绍 声明:本文是本人基于Hadoop权威指南学习的一些个人理解和笔记,仅供学习參考,有什么不到之处还望指出,一起学习一起进步. 转载请注明:http://blog.csdn.n ...

随机推荐

  1. No deleted LINE chat messages recovered on iOS 9.1 after UFED extraction

    The evidence is iPhone 5s with iOS 9.1 and not jail breaked. I use UFED to do advanced logical extra ...

  2. Linux下yum安装MPlayer 或 LVC视频播放器

    添加第三方源 su -c 'rpm -ivh http://download1.rpmfusion.org/free/fedora/rpmfusion-free-release-stable.noar ...

  3. js动态改变图片热区坐标，手机端图片热区自适应

    <img id='banner1' src="images/banner.jpg" usemap="#banner" border="0&quo ...

  4. Android IOS WebRTC 音视频开发总结（四六）-- 从另一个角度看国内首届WebRTC大会

    文章主要从开发者角度谈国内首届WebRTC大会,支持原创,文章来自博客园RTC.Blacker,支持原创,转载必须说明出处,更多详见www.rtc.help. -------------------- ...

  5. 一款安卓ShowcaseView视图源码效果

    该源码是从源码天堂那边转载过来的,大家可以看看一下吧啊,一款安卓ShowcaseView视图源码效果,非常不错的,特别是在做引导时使用. 源码下载地址:http://code.662p.com/vie ...

  6. MySQL安装图文教程

    下载 1.下载地址: http://www.mysql.com/downloads/ 2.下载图解 下载社区版本就可以,社区版里有我们的想要的几乎全部功能.只不过 商业版的mysql会提供一定高级的解 ...

  7. C# 鼠标悬停在datagridview的某单元格，显示悬浮框效果

    今天在做项目时,看到一软件做的悬浮框效果不错,从网上搜罗了一些资料,未见到有十分好的解决办法,只能自已动手,利用datagridview 的ToolTipText 来达到此效果. 以下是我简单实现的代 ...

  8. 利用js的for循环实现一个简单的“九九乘法表”

    For循环九九乘法表 for循环是javascript中一种常用的循环语句,可以很好的解决在程序中需要重复执行某些语句,利用for循环实现简单的“九九乘法表”的效果: 让循环从小到大,依次排序,并计算 ...

  9. HTTP协议的URI及各种方法

    每个Web服务器资源都有一个名字,这样客户端就可以说明他们感兴趣的资源是什么了,服务器资 源名被统称为:统一资源标识符(Uniform Resource Identifier, URI) Joe的五金 ...

  10. Centos6.5环境下安装SVN 整合Apache+SSL

    弄了两天,终于在服务器上初步搭建起来了SVN(版本1.8). 服务器系统:Centos6.5 64位,搭建过程中全部采用源码编译安装(configure/make/make install),推荐大家 ...