文档介绍：AngularJS
前端框架技术
简介
概述
表达式
指令
四大特性
AngularJS
搭建环境
简介
AngularJS 诞生于2009年
由Misko Hevery 等人创建
后为Google所收购
概述
AngularJS 是一个纯JS框架。
适用于以数据操作为主的SPA(Single Page Application)应用。
基于jQuery对传统的DOM操作进行进一步的封装---使用MVC操作代替了所有的DOM操作。
不再是“先查找元素再操作元素”,
所有的操作都是以“业务数据”为中心。
AngularJS易于构建CRUD应用
搭建环境
使用 AngularJS 的步骤
:
jqLite
表达式
语法:{{ 表达式}}
作用:在当前位置输出该表达式的值
表达式中可以执行哪些式子?
算术运算比较运算逻辑运算三目运算赋值运算
特殊运算
调用string的方法和属性
创建新对象
创建数组
四大特性
,页面中再也无需出现DOM操作。
。
四大特性之一-- MVC模式
MVC模式: MVVM MV*
(1)Model: 模型,指业务数据,web项目中由js变量担当model。
(2)View: 视图,用户界面,HTML
(3)Controller: 控制器,Function
指令
AngularJS 中ng模块提供的指令(directive)
(1) ngApp:自动载入/启动一个AngularJS应用
(2) ngInit:用于声明Model(模型)变量
(3) ngController:创建一个控制器对象的实例
(4) ngBind:在当前元素的innerHTML上输入指定的表达式的值
(5) ngRepeat:为HTML增加循环功能,循环输出当前元素
(6) ngIf:为HTML增加选择功能,只有在表达式值为true时,当前元素才添加到DOM树
(7) ngSrc:解决img等标签的src属性中包含{{}}产生的问题
语法: <img ng-src="路径/{{表达式}}"/>
指令
AngularJS 中ng模块提供的指令(directive)
ngClick: 为元素绑定监听函数(不是全局函数,而是Model函数)
语法: <ANY ng-click="模型函数()">
使用$= function(){}格式来声明模型函数
ngStyle: 赋值为一个Model对象,用于为当前元素指定样式
ngShow/ngHide: 通过display:none/block来控制当前元素是否显示
ngDisabled: 赋值为true/false,可以控制当前元素是否禁用
ngChecked: 赋值为true/false,可以控制当前元素是否选中