初級使用可以查看視頻
參考手冊
注意
- 像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文檔
