Angular入门、Angular控制器、Angular常见内置指令总结
Angular入门、Angular控制器、Angular常见内置指令总结
<head> <meta charset="UTF-8"> <title>title> <script src="js/AngularJS/angular.min.js">script> head>
二、Angular控制器(controller)
Mustache:{{name}}**--{{param}}--**
ng-bind:
Mustache:{{name}}**--{{param}}--**
ng-bind:
AngularJS的核心之一就是控制器部分，主要对于视图中的数据和事件处理函数进行挂载，同时进行一定的业务功能的
底层封装和处理控制器在AngularJS中的作用
通过$scope进行数据状态的初始化操作
通过$scope进行事件处理函数的挂载操作
注意：不要使用控制器做下面的事情
DOM操作：使用AngularJS中的数据双向绑定和自定义指令执行操作
表单处理：使用Angular中的form controls进行操作
数据格式化展示：使用Angular中的过滤器Filter来进行操作
不同控制器之间的数据共享：使用Angular中的自定义服务Service进行处理
组件生命周期的操作：使用Angular中的自定义服务Service进行处理
代码：控制器语法结构
var app = angular.module(“myApp”, []);
app.controller(“myCtrl”, function($scope) {
// 控制器函数操作部分
// 控制器主要进行数据的初始化操作和事件函数的定义
});
控制器中的参数$scope，这个参数不需要赋值，angular会自动给$scope参数传递一个数据进行使用
三、Angular常见的内置指令（directive）
Angular的指令在页面中体现出来就是一个标签\属性\class名称\注释等等
常见指令，按照指令的功能，划分为五大类
1.控制指令，用于Angular应用程序加载流程控制
2.渲染指令，用于Angular将数据在网页中进行展示/隐藏处理
3.节点指令，用于Angular对标签、属性、样式、内容进行处理的指令、
4.事件指令，用于处理常规事件操作的指令
5.其他指令....
控制指令：
> ng-app
用于定义Angular应用入口的指令，用于[自动引导]Angular程序的运行
在定义应用程序运行入口的同时，可以绑定一个DOM元素
DOM元素的开始标签和结束标签之间~就可以认为是模块的作用范围
Angular通过ng-app指令，实现自动引导程序运行，底层是通过
bootstrap()进行模块DOM元素加载，开始运行！
> ng-controller
模块中，可以给模块挂载一个或者多个控制器
挂载好的控制器在当前模块范围内，可以通过ng-controller指令来指定控制器的作用范围
渲染指令：
指令的作用就是将数据，渲染展示到页面上【底层是封装了DOM操作】
>ng-repeat 循环渲染指令
属性直接写在要循环的标签上
>ng-bind 变量渲染指令，mustache语法的替代写法
这个指令，类似于原生JS的innerHTML
但是使用的时候一定要慎重，对于它修饰的内容，必须确保安全性
如果内容的来源不确定，不要使用编译html标签的属性或者函数>>>XSS攻击
节点指令：主要用于标签、样式、属性、内容的操作
>ng-switch 请参考 js中的switch-case
ng-switch **> switch()
ng-switch-when **> case:
ng-switch-default **> default
>ng-show VS ng-hide 用于显示或者隐藏元素的指令
>ng-if指令：用于判断输出
>ng-if指令，会将DOM元素在DOM树上显示或者移除
>ng-class指令： {样式名称:布尔类型}
事件指令：Angular封装的用于操作事件的指令
通常是ng-[event]来命名指令，如ng-click表示单击事件
Angular中的事件处理，需要将处理函数挂载到对应控制器的$scope上
根据以上知识做了一个小页面（"购物车"计算小计金额、运费计算、实际金额计算、删除）
我的购物车
编号
商品名称
单价
数量
小计金额
操作
{{goods.goodsID}}
{{goods.goodsName}}
{{goods.goodsPrice}}
￥{{goods.subtotal}}
删除