使用前准备
引包
由于需要渲染页面，所以最好在body之前引入angular包
<script src="js/angular.js"></script>
声明模块
用js声明一个模块
var app = angular.module("app",[]);
用ng-app指令声明模块的使用范围
<body ng-app="app">
声明控制器
为模块声明一个控制器
app.controller("myTest",function($scope){}
用ng-controller指令使用相应控制器
<div ng-controller="myTest">
简单的使用
数据相关
- 数据绑定：在标签添加`ng-bind=""`指令 <input type="text" ng-model="name"/>
- 表单控件双向绑定:在标签添加`ng-model=""`指令 <div ng-bind="name"></div>
- 插值表达式:使用双大括号{{}} {{name}}
样式相关
- 绑定css：在标签添加`ng-class`指令 <div ng-class="{a:true,b:true}"></div>
- 绑定内联样式:在标签绑定内联样式`ng-style`指令 <div ng-style="{'background-color': '#66ccff','width':'100px','height':'100px'}"></div>
事件绑定相关
- 单击事件：在标签添加`ng-click`指令 <button ng-clcik=''>click me</button>
- 双击事件：在标签添加`ng-dbclick`指令 <button ng-dbclcik=''>click me</button>
- 获得焦点事件：在标签添加`ng-focus`指令 <input type="text" ng-focus="">
- 失去焦点事件：在标签添加`ng-blur`指令 <input type="text" ng-blur="">
- 数据改変事件：在标签添加`ng-change`以及`ng-model`指令 <input type="text" ng-change="" ng-model="change" value="change">
流程控制相关
- 如果：在标签添加`ng-if`指令 <div ng-if="true">如果判断</div>
- 选项：在标签添加`ng-switch`指令 <div ng-switch="a"><div ng-switch-when="a"> switch to a</div><div ng-switch-default> switch default!</div></div>
功能相关
- 只读：在标签添加`ng-readonly`指令 <input type="text" ng-readonly="true" value="readonly test">
- 不可用：在标签添加`ng-disable`指令 <input type="text" ng-disable="true" value="disable test">
- 隐藏：在标签添加`ng-hide`指令 <input type="text" ng-hide="true" value="hide test">
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <script src="js/angular.js"></script> <style> .a { width: 100px; height: 100px; } .b { background-color: #66ccff; } </style> </head> <body ng-app="app"> <div ng-controller="myTest"> <!-- 插值表达式 --> {{name}} <!-- 数据绑定 --> <div ng-bind="name"></div><br/> <!-- 表单控件双向绑定 --> <input type="text" ng-model="name"/><br/> <!-- 绑定css --> <div ng-class="{a:true,b:true}"></div><br/> <!-- 绑定内联样式 --> <div ng-style="{'background-color': '#66ccff','width':'100px','height':'100px'}"></div><br/> <!-- 单击事件 --> <button ng-click="handle('click')">click me</button><br/> <!-- 双击事件 --> <button ng-dblclick="handle('dbclick')">click me</button><br/> <!-- 获得焦点事件 --> <input type="text" ng-focus="handle('focus')"><br/> <!-- 失去焦点 --> <input type="text" ng-blur="handle('blur')"><br/> <!-- 数据发送改変事件 --> <input type="text" ng-change="handle('ng-change')" ng-model="change" value="change"><br/> <!-- if流程 --> <input type="checkbox" ng-model="ngIf"><div ng-if="ngIf">如果判断</div><br/> <!-- switch流程 --> a:<input type="radio" value="a" ng-model="ngRadio"> b:<input type="radio" value="b" ng-model="ngRadio"> c:<input type="radio" value="c" ng-model="ngRadio"> d:<input type="radio" value="d" ng-model="ngRadio"> <div ng-switch="ngRadio"> <div ng-switch-when="a"> switch to a</div> <div ng-switch-when="b"> switch to b</div> <div ng-switch-when="c"> switch to c</div> <div ng-switch-default> switch default!</div> </div><br/> <!-- readonly属性 --> <input type="checkbox" ng-model="readonly"> <input type="text" ng-readonly="readonly" value="readonly test"><br/> <!-- disable属性 --> <input type="checkbox" ng-model="disable"> <input type="text" ng-disable="disable" value="disable test"><br/> <!-- hide属性 --> <input type="checkbox" ng-model="hide"> <input type="text" ng-hide="hide" value="hide test"><br/> </div> </body> <script> var app = angular.module("app",[]); app.controller("myTest",function($scope){ $scope.handle = function(str){ alert(str); } }); </script> </html>