AngularJS前端框架的简述

1.AngularJS简介

AngularJS 诞生于2009年,由Misko Hevery 等人创建,后为Google所收购。是一款优秀的前端JS框架,已经被用于Google的多款产品当中。AngularJS有着诸多特性,最为核心的是:MVC、模块化、自动化双向数据绑定、依赖注入等等。

2.AngularJS的四大特征

mvc模式------model view controller
双向绑定
依赖注入
模块化设计

3.入门demo

1.1.表达式

入门小Demo-1 {{100+100}}

结果是:200
知识点总结:
表达式的写法是{{表达式 }} 表达式可以是变量或是运算式
ng-app 指令 作用是告诉子元素一下的指令是归angularJs的,angularJs会识别的
ng-app 指令定义了 AngularJS 应用程序的 根元素。
ng-app 指令在网页加载完毕时会自动引导(自动初始化)应用程序。

1.2.双向绑定
AngularJS前端框架的简述AngularJS前端框架的简述
知识点总结:
ng-model 指令用于绑定变量,这样用户在文本框输入的内容会绑定到变量上,而表达式可以实时地输出变量。

1.3.初始化指令
我们如果希望有些变量具有初始值,可以使用ng-init指令来对变量初始化
AngularJS前端框架的简述

入门小Demo-3 初始化 请输入你的姓名:
{{myname}},你好

1.4.控制器
AngularJS前端框架的简述
AngularJS前端框架的简述ng-controller用于指定所使用的控制器。

1.5.事件指令
AngularJS前端框架的简述
AngularJS前端框架的简述
ng-click 是最常用的单击事件指令,再点击时触发控制器的某个方法

1.6.循环数组
AngularJS前端框架的简述
AngularJS前端框架的简述
这里的ng-repeat指令用于循环数组变量。

1.7.循环对象数组
AngularJS前端框架的简述
AngularJS前端框架的简述
AngularJS前端框架的简述
1.8.内置服务

我们的数据一般都是从后端获取的,那么如何获取数据呢?我们一般使用内置服务$http来实现。注意:以下代码需要在tomcat中运行。

AngularJS前端框架的简述
AngularJS前端框架的简述
AngularJS前端框架的简述