《AngularJS权威教程》笔记（1-2）

最新推荐文章于 2020-06-26 09:47:47 发布

Joyce的前端日常

最新推荐文章于 2020-06-26 09:47:47 发布

阅读量1k

点赞数 3

分类专栏：前端 AngularJS

本文链接：https://blog.csdn.net/joyce_lcy/article/details/41960339

版权

前端同时被 2 个专栏收录

29 篇文章 0 订阅

订阅专栏

AngularJS

5 篇文章 0 订阅

订阅专栏

一、初识AngularJS

1、AngularJS概念

[ 1 ] AngularJS的官方文档是这样介绍它的。完全使用JavaScript编写的客户端技术。同其他历史悠久的Web技术（HTML、CSS和JavaScript）配合使用，使Web应用开发比以往更简单、更快捷。
[ 2 ] AngularJS主要用于构建单页面Web应用。它通过增加开发人员和常见Web应用开发任务之间的抽象级别，使构建交互式的现代Web应用变得更加简单。
[ 3 ] AngularJS的开发团队将其描述为一种构建动态Web应用的结构化框架。

2、所用模型

AngularJS则通过原生的Model-View-Controller（MVC，模型视图控制器）功能增强了 HTML。结果表明，这个选择可以快捷和愉悦地构建出令人印象深刻并且极富表现力的客户端应用。

3、AngularJS文件大小

AngularJS团队非常重视框架文件压缩后的大小，这样使用它就不会付出太多的额外代价（写作本书时，文件压缩后的体积在90KB左右）

4、许可

AngularJS的源码托管在GitHub上，可以免费获取。它基于MIT许可发布，这意味着你可以为AngularJS贡献代码，使其变得更加优秀。

二、数据绑定和第一个AngularJS Web应用

1、Hello World-数据绑定

已将https://ajax.googleapis.com/ajax/libs/angularjs/1.2.13/angular.js下载到本地

<!DOCTYPE html>
<html ng-app>
    <head>
        <script src="js/angular.js"></script>
    </head>
    <body>
        <div ng-controller="MyController">
            <h1>Hello {{ clock }}!</h1>
        </div>
        <script type="text/javascript" src="js/app.js"></script>
    </body>
</html>

apps.js代码如下：

angular.module('myApp',[])
    .run(function($rootScope){
        $rootScope.name="Joyce";
});

2、AngularJS中的数据绑定

[ 1 ] AngularJS创建实时模板来代替视图，而不是将数据合并进模板之后更新DOM。任何一个独立视图组件中的值都是动态替换的。
[ 2 ] 实现上述功能，只需明确设置ng-app属性，ng-app属性声明所有被其包含的内容都属于这个AngularJS应用，只有被具有ng-app属性的DOM元素包含的元素才会受AngularJS影响。
[ 3 ] 自动数据绑定使我们可以将视图理解为模型状态的映射。当客户端的数据模型发生变化时，视图就能反映出这些变化，并且不需要写任何自定义的代码，它就可以工作。
[ 4 ] AngularJS会记录数据模型所包含的数据在任何特定时间点的值而不是原始值。当AngularJS认为某个值可能发生变化时，它会运行自己的事件循环来检查这个值是否变 “脏”。如果该值从上次事件循环运行之后发生了变化，则该值被认为是“脏”值。这也是Angular可以跟踪和响应应用变化的方式。这个过程被称作脏检查（dirty checking）。脏检查是检查数据模型变化的有效手段.当有潜在的变化存在时，AngularJS会在事件循环时执行脏检查来保证数据的一致性。
对比：如果使用KnockoutJS这种通过在数据模型上绑定事件监听器来监听数据变化的框架，这个过程会变得更复杂且低效。处理事件合并、依赖跟踪和大量的事件触发（event firing）是非常复杂的，而且会在性能方面导致额外的问题。

3、数据绑定最佳实践

<!DOCTYPE html>
<html ng-app>
    <head>
        <script src="js/angular.js"></script>
    </head>
    <body>
        <div ng-controller="MyController">
            <h1>Hello {{ clock }}!</h1>
        </div>
        <script type="text/javascript" src="js/app.js"></script>
    </body>
</html>

app.js代码如下：

function MyController($scope, $timeout) {
    var updateClock = function() {
        $scope.clock = new Date();
        $timeout(function() {
            updateClock();
        }, 1000);
    };
    updateClock();
};

Joyce的前端日常

关注

3
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
《AngularJS权威教程》笔记（1-2）

一、初识AngularJS1、AngularJS概念[ 1 ] AngularJS的官方文档是这样介绍它的。完全使用JavaScript编写的客户端技术。同其他历史悠久的Web技术（HTML、CSS和JavaScript）配合使用，使Web应用开发比以往更简单、更快捷。[ 2 ] AngularJS主要用于构建单页面Web应用。它通过增加开发人员和常见Web应用开发任务之间的抽象级别，使构建交互式...
复制链接

扫一扫

专栏目录