第一步 先要引入angular,
第二步 在 html 标签中<html ng-app> 加入ng-app（这是个必须的，不然会报错）
接下来就可以去使用angular的各种指令了。
//js文件 js语法需要注意
在网上的写法有很多，最好是按标准的写法来写，不然js代码经过压缩就不能使用了（很重要）
压缩代码会出错，不压缩的话还是能运行的,原因是压缩代码会把关键字替换，因此 angular 在定义的时候需要这样。
angular.module('antsins.controllers') .controller('GoodsCtrl', ['$scope', function($scope){ //这里就能写angular代码了 $scope.name ='tom' }]
下面就直接上指令
//数据和model的绑定
<input type="text" ng-model="yourname" placeholder="World">
///html5表单验证属性与angular配合，要是form里有验证规则没有通过 //则$valid为false <input type="text" name="cheshi" ng-model="myName" required/> <p ng-bind="myForm.cheshi.$valid"></p>
//复选框，checkboxModel.value1 选中为true,没选中为false <input type="checkbox" ng-model="checkboxModel.value1">
//直接使用ng-bind-html报错 <p ng-bind-html="myHTML"></p> 解决方法,需要将html代码标记为信任，如下 .controller('FormController', ['$scope','$sce', function($scope,$sce) { $scope.myHTML =$sce.trustAsHtml( 'I am an <code>HTML</code>string with ' + '<a href="#">links!</a> and other <em>stuff</em>'); }]) //<pre ng-bind-template="{{salutation}} {{name}}!"></pre>
//直接使用ngChange报错 <input type="text" ng-change="onChange() "/> 解决方法：必须加上：ng-model="age" <input type="text" ng-model="age" ng-change="onChange() "/>
//ng-class 给一个元素增加class ,可以是一个对象，要、拥有几个class,也可以只有一个 <div ng-class="{className:true,otherName:bol}"></div> //只有一个class <p ng-class="style">Using String Syntax</p> <input type="text" ng-model="style" placeholder="Type: bold strike red" aria-label="Type: bold strike red"> <hr> //也可以是以个数组，数组中分别不同的值 <p ng-class="[style1, style2, style3]">Using Array Syntax</p> <input ng-model="style1" placeholder="Type: bold, strike or red" aria-label="Type: bold, strike or red"><br> <input ng-model="style2" placeholder="Type: bold, strike or red" aria-label="Type: bold, strike or red 2"><br> <input ng-model="style3" placeholder="Type: bold, strike or red" aria-label="Type: bold, strike or red 3"><br> <hr> //还可以是数组和对象的混搭 <p ng-class="[style4, {orange: warning}]">Using Array and Map Syntax</p> <input ng-model="style4" placeholder="Type: bold, strike" aria-label="Type: bold, strike"><br> <label><input type="checkbox" ng-model="warning"> warning (apply "orange" class)</label>
//利用ng-class 实现简单的动画 .base-class { transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s; } .base-class.my-class { color: red; font-size:3em; }
//ng-click="myVar='my-class'" 只要一点击就给myVar赋值 <input id="setbtn" type="button" value="set" ng-click="myVar='my-class'"> <input id="clearbtn" type="button" value="clear" ng-click="myVar=''"> <br> <span class="base-class" ng-class="myVar">Sample Text</span>
//ngClassEven 和 ngClassOdd 指令的使用 奇数就使用odd,偶数就使用even //常于ng-repeat配合使用 //ng-init 数据初始化，相当于var,给一个变量赋值 <ol ng-init="names=['John', 'Mary', 'Cate', 'Suz']"> <li ng-repeat="name in names"> <span ng-class-odd="'odd'" ng-class-even="'even'"> {{name}} </span> </li> </ol>
//ngClick 点击事件
//ngCloak 使用后没有{{}} 闪屏的情况,相当于ng-bind <div id="template1" ng-cloak>{{ 'hello' }}</div> <div id="template2" class="ng-cloak">{{ 'world' }}</div>
//ngCopy 输入框中的文字被复制的时候会触发的事件 //ngCut 输入框中的文字被剪切的时候就会触发的事件 asdfasdfasd <input ng-copy="copied=true" ng-init="copied=false; value='copy me'" ng-model="value"> copied: {{copied}} <input ng-cut="cut=true" ng-init="cut=false; value='cut me'" ng-model="value"> cut: {{cut}}
//ng-csp 修改 AngularJS 中关于 "eval" 的行为方式及内联样式： ng-csp 指令用于修改 AngularJS 的安全策略。 如果使用了 ng-csp 指令， AngularJS 将不会执行eval 函数，这样就无法注入内联样式。 设置 ng-csp 指令为 no-unsafe-eval, 将阻止 AngularJS 执行 eval 函数，但允许注入内联样式。 设置 ng-csp 指令为 no-inline-style, 将阻止 AngularJS 注入内联样式，但允许 执行 eval 函数。 如果开发 Google Chrome 扩展或 Windows 应用 ng-csp 指令是必须的。 注意:ng-csp 指令不会影响 JavaScript,但会修改 AngularJS 的工作方式，这就意味着: 你仍然可以编写 eval 函数, 且也可以正常执行, 但是 AngularJS 不能执行它自己的 eval 函数。如果采用兼容模式，会降低 30% 的性能。
//ngDblclick 双击会触发的事件
//ngDisabled 禁用指令：值为true的时候禁用button <label>Click me to toggle: <input type="checkbox" ng-model="checked"></label><br/> <button ng-model="button" ng-disabled="checked">Button</button>
//ng-Focus 失去焦点时触发的事件
//ngHref,直接用href 就不能使用angular语法 <a id="link-3" ng-href="/{{'123'}}">link 3</a>
/ngIf 为true，则span显示 <span ng-if="checked" class="animate-if"> This is removed when the checkbox is unchecked. </span> //ng-hide功能类似，使用方式相反。元素的显示或隐藏是通过改变CSS的display属性值来实现的。 //ng-if指令可以根据表达式的值在DOM中生成或移除一个元素。 //如果赋值给ng-if的表达式的值是false，那对应的元素将会从DOM中移除， //否则生成一个新的元素插入DOM中。ng-if同no-show和ng-hide指令最//本//质/的区别是， //它不是通过CSS显示或隐藏DOM节点，而是删除或者新增结点。
//ng-keydowm 返回的按键的字符值 //ngkeypress 返回的ASSCII字符
<input ng-keyup="event=$event">
<p>event keyCode: {{ event.keyCode }}</p>
<p>event altKey: {{ event.altKey }}</p>
event.altKey
功能：检测事件发生时Alt键是否被按住了。
语法：event.altKey
取值：true | false
说明：
altKey属性为true表示事件发生时Alt键被按下并保持，为false则Alt键没有按下。
altKey属性可结合鼠标或键盘使用，多用于制作一些快捷操作方式。
event.ctrlKey
功能：检测事件发生时Ctrl键是否被按住了。
语法：event.ctrlKey
取值：true | false
说明：
ctrlKey属性为true表示事件发生时Ctrl键被按下并保持，为false则Ctrl键没有按下。
ctrlKey属性可结合鼠标或键盘使用，多用于制作一些快捷操作方式。
event.shiftKey
功能：检测事件发生时Shift键是否被按住了。
语法：event.shiftKey
取值：true | false
说明：
shiftKey属性为true表示事件发生时Shift键被按下并保持，为false则Shift键没有按下。
shiftKey属性可结合鼠标或键盘使用，多用于制作一些快捷操作方式。
//ngList 输入的转为数组，输入逗号会分隔 <input name="namesInput" ng-model="names" ng-list required></label> //ngList 输入的转为数组，输入换行会分隔 <textarea ng-model="list" ng-list=" " ng-trim="false"></textarea> //form 中有输入不不符合规范的时候 <code>{{form.input.$valid}}为false
//ngModel 适用的标签 For basic examples, how to use ngModel, see: input text checkbox radio number email url date datetime-local time month week select textarea ng-valid: the model is valid //有效的输入 ng-invalid: the model is invalid //无效的输入 ng-valid-[key]: for each valid key added by $setValidity ng-invalid-[key]: for each invalid key added by $setValidity ng-pristine: the control hasn't been interacted with yet ng-dirty: the control has been interacted with ng-touched: the control has been blurred ng-untouched: the control hasn't been blurred ng-pending: any $asyncValidators are unfulfilled ng-empty: the view does not contain a value or the value is deemed "empty", as defined by the ngModel.NgModelController method ng-not-empty: the view contains a non-empty value
//ngModelOptions 数据模型的选项配置 <input type="text" name="userName" ng-model="user.name" ng-model-options="{ updateOn: 'blur' }" /> //上面这个例子中只有失去焦点的时候才会根新数据 ng-model-options="{ updateOn: 'default blur' }" //上面的例子中，输入会更新model,失去焦点也会更新model(感觉这个没太必要) debounce:{default:1000,blur:0}}" //上面的例子中，时间间隔1秒没有输入没更新model，失去焦点会立即更新model ng-model-options="{ debounce: 1000 }" //上面这个例子中，如果时间间隔1s内没 有继续输入就会更新数据
//ngMouseDown 鼠标点击
//ngMouseuo 鼠标松开事件
//ng-non-bindable 指令用于告诉 AngularJS 当前的 HTML 元素或其子元素不需要编译。
//在这个标签内的指令不会被执行
<div ng-non-bindable>Ignored: {{1 + 2}}</div>
//隐藏的元素会被展开 <details id="details" ng-open="open"> <summary>Show/Hide me</summary> </details>
//<select ng-model="myColor" ng-options="color.name for color in colors"> 控制器中数据 $scope.colors = [ {name:'black', shade:'dark'}, {name:'white', shade:'light', notAnOption: true}, {name:'red', shade:'dark'}, {name:'blue', shade:'dark', notAnOption: true}, {name:'yellow', shade:'light', notAnOption: false} ]
//<select ng-model="myColor" ng-options="color.name group by color.shade for color in colors"> select中数据会有嵌套 //根据color.notAnOption 的boolear值去判断这个选项是不是禁用了 <select ng-model="myColor" ng-options="color.name group by color.shade disable when color.notAnOption for color in colors"> </select> //ngPaste 粘贴数据进去的时候会触发的事件
//ng-pattern="regex" 正则判断 $scope.regex = '\d+'; <input type="text" ng-model="model" id="input" name="input" ng-pattern="regex" /><br>
//ngPluralize 隐藏属性？（查不到资料
//为true是，输入框是只读的 <input type="text" ng-readonly="checked" value="I'm Angular" aria-label="Readonly field" />
/ng-src 写法
<img ng-src="http://www.gravatar.com/avatar/{{hash}}" alt="Description" />
//ng-style 写法
<span ng-style='{"color":"blue"}'>Sample Text</span>
//ng-submit 表单提交触发的事件
//ng-switch 内容的切换
//ng-value
//script 用来写模块 <script type="text/ng-template" id="/tpl.html"> Content of the template. </script> <a ng-click="currentTpl='/tpl.html'" id="tpl-link">Load inlined template</a> <div id="tpl-content" ng-include src="currentTpl"></div>
nagular指令大概就是这些了，大部分是从官网取来的https://docs.angularjs.org/