angularJS 指令是以 ng 作为前缀的 HTML 属性
AngularJS 应用组成如下:MVC
**View(视图),** 即 HTML。
**Model(模型),** 当前视图中可用的数据。
**Controller(控制器),** 即 JavaScript 函数,可以添加或修改属性。
*你修改了视图view,模型model和控制器controller也会相应更新*
AngularJs指令
1 ng-app 指令定义一个 AngularJS 应用程序。
2 ng-model 指令把元素值(比如输入域的值)绑定到应用程序。
3 ng-bind 指令把应用程序数据绑定到 HTML 视图。
4 ng-init 指令初始化 AngularJS 应用程序变量
<div ng-app="" ng-init="firstName='John';secondname='Heather'">
<p>姓为<span ng-bind="firstName"></span>,名为<span ng-bind="secondname"></span></p>
</div>
5 ng-controller 定义了控制器,用于控制AngularJs应用
6 ng-repeat 读取数组
7 restrict 值可以是以下几种:(默认值为 EA, 即可以通过元素名和属性名来调用指令。)
E 只限元素名使用
A 只限属性使用
C 只限类名使用
M 只限注释使用
8 ng-show 提示
状态值:(invalid, dirty, touched, error)
9 ng-invalid 验证不通过
ng-empty 空
ng-not-empty 非空
ng-touched 触屏点击
ng-untouched 无触屏点击
ng-valid 验证通过
ng-dirty 值改变
ng-pending 未失去焦点
ng-pristine
10 自定义指令:app.directive 调用
要调用自定义指令,HTMl 元素上需要添加自定义指令名。
使用驼峰法来命名一个指令, myDirective, 但在使用它时需要以 - 分割, my-directive:
AngularJs 过滤器:
管道符 | (没错 就是这个竖线)
currency 格式化数字为货币格式。
filter 从数组项中选择一个子集。
lowercase 格式化字符串为小写。
orderBy 根据某个表达式排列数组。
uppercase 格式化字符串为大写。
AngularJs 下拉框
<select ng-model="selectedSite">
<option ng-repeat="x in sites" value="{{x.url}}">{{x.site}}</option>
</select>
选中的是字符串
<select ng-model="selectedSite" ng-options="x.site for x in sites">
</select>
选中的是对象
<select ng-model="selectedSite" ng-options="x for (x, y) in sites">
</select>
x为键,y为值(x用于显示,y存在value)
AngularJs http
$http.get("...")
.success(function (response) {$scope.names = response.records;});
AngularJs DOM
- ng-disabled
- ng-show
- ng-hide
AngularJs 事件
- ng-click
- ng-
AngularJS 路由
angular.module('routingDemoApp',['ngRoute'])
.config(['$routeProvider', function($routeProvider){
$routeProvider
.when('/',{template:'这是首页页面'})
.when('/computers',{template:'这是电脑分类页面'})
.when('/printers',{template:'这是打印机页面'})
.otherwise({redirectTo:'/'});
}]);
语法规则
$routeProvider.when(url, {
template: string,
templateUrl: string,
controller: string, function 或 array,
controllerAs: string,
redirectTo: string, function,
resolve: object<key, function>
});