angularjs学习笔记之简单介绍

前端之家收集整理的这篇文章主要介绍了angularjs学习笔记之简单介绍前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

一.angularjs简介

AngularJS 是一个为动态WEB应用设计的结构框架。它能让你使用HTML作为模板语言,通过扩展HTML的语法,让你能更清楚、简洁地构建你的应用组件。它的创新点在于,利用 数据绑定 和 依赖注入,它使你不用再写大量的代码了。这些全都是通过浏览器端的Javascript实现,这也使得它能够完美地和任何服务器端技术结合。

说了这么多,估计你啥都没有理解。。。对吗?别着急,我来说说他的几个特点吧:模块化,数据双向绑定,依赖注入,指令。下面我们就跟着这几个特点进行学习。

二.angularjs基于MVC概念

所谓MVC,就是module(数据模型),view(视图),controller(控制器)

其实angularjs就是将这三个模块相结合,下面是我画的一张模型图,先大致看一下:

三.结合解释

上面也提到了,angularjs的特点是:模块化,依赖注入,双向绑定和指令。现在我来结合上图跟大家说明一下:

模块化:上图中的下面的filter,directive...四个方块就是module的四个代表性的方法(后面会跟大家一一讲解每个函数用法功能),也可以理解为各自的小模块,每个模块功能不同,但是分工明确,结构清晰,实现了模块化。

依赖注入:上面说到的四个小模块,看似是独立分开的,但是它们两两之间都有相互依赖的关系,可以互相引用,实现强大的功能(后面会详细介绍如何引用),这就是依赖注入。

指令:从上图中也可以看出,指令就是图中的directive方法了。angularjs中有很多自带的指令,比如ng-app(指定angularjs的作用域),ng-model(定义一个数据的模型,实现双向绑定),ng-repeat(重复一个标签),ng-change(监听标签的值有没有变化)等等,而这里的directive就是最重要的功能就是自定义指令(也有教程说是html的扩展)。

双向绑定:双向绑定就是上图中的module和view,也就是数据和视图双向绑定。会用到刚才提到的ng-model指令。

四.看一个简单的双向绑定的例子。

index.html:

<Meta charset="UTF-8"> Document

猜你在找的JavaScript相关文章