文档章节

AngularJS学习笔记之一: AngularJS入门

阿振
 阿振
发布于 2016/03/21 14:19
字数 1329
阅读 466
收藏 1

一、AngularJS是什么?

AngularJS是由Misko Hevery 和 Adam Abrons 两个人共同创建的,在2009年卖给了Google,它是一个构建动态Web应用的一个Javascript框架,目的是为了克服HTML在构建Web应用程序上的不足而设计的。

二、 AngularJS的四大核心特性

1) MVC

2)   模块化

3)指令系统

4)双向数据绑定

其中指令系统双向数据绑定是AngularJS特有的,主要区别于其他的前端MVC框架,如BackBone

三、AngularJS四大核心特性解析

1、AngularJS的第一个核心特性:MVC

    

MVC是在1979年由Trygve Reenskaug第一次提出

Model:数据模型层

View:视图层,负责展示,一般我们能在页面上看到的都是

Controller:业务逻辑和控制逻辑

MVC的好处是职责很清晰,代码模块化,下面我们来看一段代码

<!DOCTYPE html>
<html ng-app="MyAngular">
<head>
	<meta charset="UTF-8">
	<title>AngularJS MVC</title>
</head>
<body>
	<div ng-controller="HelloAngular">
		<p>{{greeting.text}}, AngularJS</p>
	</div>
</body>
<script src="js/angular-1.4.6.min.js"></script>
<script>
	angular.module('MyAngular', [])
	.controller('HelloAngular', function($scope){
		$scope.greeting = {
			text: 'Hello'
		}
	})
</script>
</html>

从上面代码可以看出,在html标签里,使用ng-app定义了AngularJS的管理边界,也就是说,AngularJS可以管理整个html。

在body中的div里面定义了ng-controller,这就是MVC中的控制器,也就是C,而整个p标签就是我们的视图层,也就是V。

在最下面的script里,我们首先定义了一个AngularJS的模块MyAngular,然后在这个模块上定了控制器HelloAngular,里面的text:'Hello',就是我们的M层。

2、AngularJS的第二个核心特性:模块化

其实在上面的代码中,我们已经使用了AngularJS的模块化,下面我们来用另外一种方式来重写上面的JS代码部分

var myModule = angular.module('MyAngular', []);            //定义模块

myModule.controller('HelloAngular', ['$scope',            //在模块上定义一个控制器方法helloAngular
    function helloAngular($scope) {
        $scope.greeting = {
            text: 'Hello'        
        }
    }
]);

上面第一排的代码为我们定义了一个模块myModel,然后我们利用该模块的controller方法生成一个控制器。请注意,我们在定义controller控制器时,第一个参数是控制器名称,而第二个是在一个方括号里,方括号里的第一个成员是一个变量$scope,第二个成员是一个Function,这个Function的参数也叫$scope,也就是说,这里的代码告诉Angular,请把第一个成员$scope注入到下面的方法中,这里也体现了Angular的依赖注入特性。

下面我们用一张图来说明下AngularJS的模块化

在AngularJS中,一切都是从模块开始的,创建了模块,我们就可以在这个模块上调用各种方法,如Filter、Directive、Controller等。

3、AngularJS的第三个核心特性:指令系统

首先我们来看下下面的代码

<!DOCTYPE html>
<html ng-app="MyModule">
    <head>
        <meta charset="utf-8" />
        <title>AngularJS - 指令系统</title>
    </head>
    
    <body>
        <hello></hello>
    </body>
    <script src="js/angular-1.4.6.min.js"></script>
    <script>
        var MyModule = angular.module('MyModule', []);
        MyModule.directive('hello', function(){
            return {
                restrict: 'E',
                template: '<div>Hi Everyone!</div>',
                replace: true
            }
        });
    </script>    
</html>

上面的HTML代码中,我们可以看到<hello></hello>这样的标签,但是在HTML里,没有定义这杨的标签,浏览器引擎是不认识它的,这时,浏览器会忽略掉这个标签,Angular怎么做呢?在下面的JS代码中,Angular在已定义的模块MyModule上,使用了directive方法,在这个方法中,第一个参数就定义了hello这个标识符,用来说明在HTML中,hello标签的意义,在返回的属性中有一个template,它的作用就是说明这个标签会显示什么样的内容。

4、AngularJS的第四个核心特性:双向数据绑定

目前大多数的前端框架都是单向数据绑定,如jQueryUI、Backbone、Flex等。单向数据绑定是怎么做的呢?一般的做法是我们先生成模板(template),然后从后台获取数据(Model),通过绑定机制,将模板和数据结合起来生成HTML标签插入到文档流中(View)。

这样的单向数据绑定有什么问题吗?如果我们的数据有变化,那么按照这种流程,我们不得不重新将模板和新的数据再次生成HTML插入到文档流中,也就是需要重构HMTL页面。

那么AngularJS中的双向数据绑定又是怎么回事呢?

双向数据绑定认为,视图和数据是对应的,借助事件机制,当视图发生变化时,数据模型也会发生相应的变化,而当数据模型发生变化时,视图会自动更新,这种场景应用最典型的就是我们的表单,当用户在表单中完成输入后,数据模型就会立刻拿到用户输入,下面我们用一段代码来说明下

<!DOCTYPE html>
<html ng-app>
    <head>
        <meta charset="utf-8">
    </head>
    <body>
        <div>
            <input type="text" ng-model="greeting.text">
            <p>{{greeting.text}}, AngularJS</p>
        </div>
    </body>
    <script src="js/angular-1.4.6.min.js"></script>
</html>

当我们在表单中任意输入后,下面的p标签会马上显示出用户输入,代码中的双大括号( {{}} )表示一个取值表达式。

© 著作权归作者所有

共有 人打赏支持
阿振
粉丝 10
博文 55
码字总数 58791
作品 0
成都
高级程序员
私信 提问
《AngularJS学习整理》系列分享专栏

《AngularJS学习整理》系列分享专栏 《AngularJS学习整理》已整理成PDF文档,点击可直接下载至本地查阅 https://www.webfalse.com/read/201748.html 文章 教你用AngularJS框架一行JS代码实现...

开元中国2015
11/09
0
0
AngularJS 中文资料+工具+库+Demo 大搜集

中文学习资料: 中文资料且成系统的就这么多,优酷上有个中文视频。 http://www.cnblogs.com/lcllao/archive/2012/10/18/2728787.html 翻译的官方的Guide http://www.ituring.com.cn/miniboo...

liaolzy2
2015/05/31
0
0
AngularJS 将再发布一个重要版本 然后进入长期支持阶段

Angular 团队的早期开成员之一 Pete Bacon Darwin 近日在 Angular 博客公布了一个消息,他说道: 目前团队正在开发 AngularJS 1.7.0,而 1.7 的开发周期将一直持续到 2018 年 6 月 30 日。7...

局长
01/31
6.2K
7
angular.js 1.3.17/1.4.2 发布

其中:1.3.17 更新内容如下: Bug Fixes +- **$browser:** prevent infinite digest if changing hash when there is no hashPrefix + ([61a3fb67](https://github.com/angular/angular.js/......

oschina
2015/07/07
2.6K
9
OSChina 技术专题之 AngularJS 更新版(201412)

Angular JS (Angular.JS) 是一组用来开发Web页面的框架、模板以及数据绑定和丰富UI组件。它支持整个开发进程,提供web应用的架构,无需进行手工DOM操作。 AngularJS很小,只有60K,兼容主流浏...

OSC编辑部
2014/10/17
11.1K
26

没有更多内容

加载失败,请刷新页面

加载更多

盘点愚人节各大网站彩蛋,谁最爱恶搞?

如今的愚人节俨然已是各品牌宣传了一个重要节日,同时,也成为了各大互联网科技企业凑热闹,比拼创意和策划的节日。跟小编一起看看有哪些有趣的策划吧! Google地图变成吃豆人游戏 每年愚人节...

临江仙卜算子
19分钟前
0
0
Java7/8 中的 HashMap 和 ConcurrentHashMap 全解析

本文分析的是源码,所以至少读者要熟悉它们的接口使用,同时,对于并发,读者至少要知道 CAS、ReentrantLock、UNSAFE 操作这几个基本的知识,文中不会对这些知识进行介绍。Java8 用到了红黑树...

java菜分享
20分钟前
0
0
玩手机与做实验

看过这样一个故事:说的是在二十世纪二十年代初的一个深夜,担任英国剑桥大学卡文迪许实验室主任的卢瑟福来实验室检查,发现一位学生还在做实验。卢瑟福就问他:“你上午做什么了?”学生回答...

Bob2100
53分钟前
4
0
Kafka流式处理

Kafka Streams 初识流式处理 什么是数据流 数据流(也叫事件流)是无边界数据集的抽象表示。无边界意味着无限和持续增长。无边界数据集之所以是无限的,是因为随着时间的推移,新记录会不断加...

东都大狼狗
今天
8
0
Mysql主从复制(拓展博客文章扩充知识面)

#不停库不锁表在线主从配置 使用 Xtrabackup 在线对MySQL做主从复制 1.数据量大的话还是建议使用工具例如xtrabackup,mysqldump比较适合操作10G以下的数据备份复制。 2.做业务之前考虑清楚具...

robertt15
今天
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部