AngularJs学习笔记-AngularJS权威教程学习笔记

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()的方法来清理这个作用域。

原文地址:https://www.cnblogs.com/sen068/p/4947446.html