初级使用可以查看视频
参考手册
注意
- 像ng-class,ng-value,ng-href等这些，很多都可以直接用class=“{{}}” 原生写，为啥还出这些指令，是因为原生的比如刚一进页面就先出现表达式了，浏览器走到这里的时候才去解析，给用户的体验不好
ng-app
- angular只对这个标签以内的起作用，要不就直接原生解析
- 告诉angular核心它管理当前标签所包含的整个区域,有自动创建$rootScope(根作用域对象),如果是可以ng-app = “*” 就是模块名 ,就是那个.module('')
ng-controller=“*”,
- 新创建一个新的作用域,然后自动new构造函数就是.controller里面名字,(name, [ s c o p e , f u n c t i o n ( scope, function( scope,function(scope) {}]),
- 用数组的原因,是这个$scope不可以变名字,但是压缩后的代码一般都会形参变成a,b,c,d这种,所以用数组这种传,
- 可以使用as用来面向对象,其实就是相当于new的实例可以使用原型链上的方法或属性，面向对象
ng-repeat:
遍历,里面可以用$index, $first(第一项), $middle(除了第一和最后), $last(最后一项), $odd, $even / ng-repeat-start ng-repeat-end 可以用来嵌套
先来个完整的：后面只是使用的例子
ng-init 初始化数据 ng-init=“username=‘zjap’”, 一般也不会用,但是比如嵌套循环的时候可能会用到
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.active1 {background: red}.active2 {background: green}</style>
</head>
<body ng-app="myApp" ng-controller="Aaa"><ul><!-- 隔行换色 --><li ng-repeat="data in dataList" class="{{$odd? 'active1': 'active2'}}">{{data}}{{$odd}}</li></ul><table border="1"><!-- 这种相当于嵌套的<template v-for似的，ng-show让其隐藏要不可能影响合并> --><tr ng-show="false" ng-repeat-start="data in twoTableLitst track by $index" ng-init="outIndex=$index"></tr><tr ng-repeat="chil in data.children track by $index" ng-init="inIndex=$index"><td ng-if="inIndex == 0" rowspan="{{data.children.length}}">{{ data.name }}</td><td>{{ chil }}</td></tr><tr ng-show="false" ng-repeat-end></tr></table><script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.8.2/angular.min.js"></script><script>var m1 = angular.module('myApp', [])m1.controller('Aaa', ['$scope', function($scope) {$scope.dataList = ['aaa', 'bbb', 'ccc', 'ddd']$scope.twoTableLitst = [{name: 'aaa', children: ['11', '22']},{name: 'bbb', children: ['11', '22']},]}])</script>
</body>
</html>
<body ng-app="myApp" ng-controller="Aaa as a1"><span>{{a1.text}}</span><script src="./public/angular.js"></script><script> var m1 = angular.module('myApp', [])m1.controller('Aaa', ['$scope', FnAaa])function FnAaa($scope) {}FnAaa.prototype.text="woshi"</script>
</body>
ng-class:动态class
ng-style: 动态style
ng-href href
ng-src
ng-attr-**这个基本其他所有的属性都可以使用，因为不可能原生的都有对应的ng-属性，所以咱们就是所有属性都可以用这个eg：title
ng-disabled --$interval 不可点击
ng-readonly 只读
ng-checked 複選框选中
ng-value 输入框等的值
也可以用value=“{{}}”,但是这个体验不好,用户可能先在页面看到{{}},后期才能看到内容,所以推荐ng-value
<body ng-app="myApp" ng-controller="Aaa"><span ng-class="{active: IsDisabled}" ng-style="{color: 'yellow'}">{{ text }}</span><span ng-style="ngStyle">{{ text }}</span><span ng-class="ngClass">{{ text }}</span><a ng-href="{{ngHerf}}" ng-attr-title="{{ text }}">qubaidu</a><input type="button" ng-value="text" ng-disabled="IsDisabled"><input type="text" ng-value="text" ng-readonly="IsDisabled"><input type="checkbox" ng-checked="IsDisabled"><script src="./public/angular.js"></script><script> var m1 = angular.module('myApp', [])m1.controller('Aaa', ['$scope', '$interval', function($scope, $interval) {// setInterval --$scope.apply()let iNow = 5$scope.text = iNow + '秒'$scope.IsDisabled = true$scope.ngStyle={background: 'yellow',color: 'red'}$scope.ngClass = {active: true}$scope.ngHerf = "http://www.baidu.com"const timer = $interval(function() {iNow--$scope.text = iNow + '秒'if (iNow === 0) {$interval.cancel(timer)$scope.IsDisabled = false}}, 1000)}])</script>
</body>
ng-bind
解决{{}}闪屏问题,因为{{}} 当时浏览器不知道,到下面看到angular,再上去解析这种就会闪屏,跟ng-value似的
ng-cloak
这个就是比如用户就想用{{}}不想用ng-bind,但是想让{{}}解析出来才展示,平常时候就是display:none
ng-bind-template
这个就是比如标签中内容多个{{}},肯定用ng-bind不合适,所以就使用这个
ng-bind-html
这个就是解析成html,但是因为这个功能不常用,所以angular就设置成一个插件形式,后期需要按照模块引入就行,从这里查:https://www.bootcdn.cn/angular.js/,下面代码其实是有问题的,可能是引入的库不对,后面研究,但是写法基本是这种
ng-non-bindable // 就比如说想让{{}}展示出来，不去解析
<body ng-app="myApp" ng-controller="Aaa"><span ng-bind="text"></span><span ng-cloak>{{ text }}</span><span ng-bind-template="{{ text }}, {{text}}"></span><div ng-bind-html="htmlstr"></div><span ng-non-bindable>{{ text }}</span><script src="./public/angular.js"></script><script src="https://cdn.staticfile.org/angular.js/1.5.0-beta.0/angular-sanitize.min.js"></script><script>// alert('1')var m1 = angular.module('myApp', ['ngSanitize'])m1.controller('Aaa', ['$scope', function($scope) {$scope.text = 'nihao'$scope.htmlstr = '<h1>1111</h1>'}])</script>
</body>
ng-show,ng-hide 显示隐藏，就是css的disable的切换
ng-if dom元素显示
ng-switch
ng-open 应用于details,默认是展开还是隐藏
<body ng-app="myApp" ng-controller="Aaa"><input type="button" value="点击" ng-click="checkButton()"><span v-if="isShow">展示</span><div ng-switch on="lalal"><p ng-switch-when="1">我是1</p><p ng-switch-when="2">我是2</p><p ng-switch-default>我是其他</p></div><details ng-open="isShow"><summary>我是总体</summary><p>我是介绍</p></details><script src="./public/angular.js"></script><script> var m1 = angular.module('myApp', [])m1.controller('Aaa', ['$scope', function($scope) {$scope.isShow = true$scope.lalal = 1$scope.checkButton = function() {$scope.isShow = !$scope.isShow$scope.lalal++}}])</script>
</body>
ng-model: 跟v-model似的,双向数据绑定,但是如果比如想不时实的去更改可以使用ng-model-options和updateOn去配置
ng-include 可以引入新的html,这个在这个上面写也是报错,目前不知道到为啥
—我知道为啥了，需要放到服务器上，不是本地浏览器打开
<body ng-app="myApp" ng-controller="Aaa"><!-- 但是不起作用，不知道为啥 --><div ng-include="'moni.html'"></div><!-- 不时实,失去焦点才变 --><input type="text" ng-model="text" ng-model-options="{updateOn: 'blur'}"><span>{{text}}</span><script src="./public/angular.js"></script><script> var m1 = angular.module('myApp', [])m1.controller('Aaa', ['$scope', function($scope) {$scope.text = "我是开始"}])</script>
</body>
</html>
事件
ng-mouseenter,ng-mouseleave 移入移出
ng-click/dbclick 点击
ng-selected //下拉菜单选中
ng-change // input change事件
ng-copy ng-cut ng-paste 输入框复制,j剪切,粘贴操作
其他原生事件都可以用ng-事件名
标签指令
<a> 普通的a标签会点击刷新页面有默认行为，angluar重新封装了下，没有默认行为了
select
-- ng-options
form
-- novalidate
<body><div ng-app="myApp" ng-controller="Aaa"><!-- 默认行为点击 --><a href="">{{myColor}}</a><!-- myColor是color对象,color.name是展示的 --><select ng-options="color.name for color in colors" ng-model="myColor"></select><!-- 如果不写novalidate会有默认表单样式,比如说输入不是email,就会有红色边框,这没模拟出来 --><form novalidate><input type="email"></form></div><a href="">aaaaaaaaaaaa</a><script src="./public/angular.js"></script><script> var m1 = angular.module('myApp', [])m1.controller('Aaa', ['$scope', function($scope) {$scope.colors = [{name: 'red'}, {name: 'yellow'}]$scope.myColor = ''}])</script>
</body>
这些结合表单验证更容易理解，看3文档
