AngularJS是一个js框架,以js编写的库。跟knockoutJS类似。
- AngularJS扩展了html
通过ng-directives扩展了html;ng-app定义一个angularJS应用程序;ng-model吧元素值绑定到应用程序;ng-bind把应用程序数据绑定到html视图。angularJS指令是以ng作为前缀的html属性。HTML5 允许扩展的(自制的)属性,以 data- 开头。AngularJS 属性以 ng- 开头,但是您可以使用 data-ng- 来让网页对 HTML5 有效。
如:
<script type="text/javascript">
angular.module("testModule",[])
.controller("testCtr",function($scope){
})
.directive("testDire",function(){
return {
restrict:"A",
require:"ngModel",
link:function(scope,elem,attr,ngModelCtr){ }
}
})
</script>
</head> <body ng-app="testModule" ng-controller="testCtr">
<input type="text" test-dire ng-model="say"/> <h1>
{{say}}
</h1> </body>
- AngularJS 对象和绑定
<div ng-app="" ng-init="person={firstName:'John',lastName:'Doe'}">
<p>姓为 {{ person.lastName }}</p> <!--这是大括号绑定-->
<p>名为 <span ng-bind="person.firstName"></span></p> <!--这是ng-bind 绑定-->
</div>
- AngularJS的一些指令
- ng-app 初始化一个AngularJS应用程序
- ng-init 初始化应用程序数据
- ng-model 把元素值绑定到应用程序
- ng-controller
- ng-repeat 重复一个html元素,有点像在html中使用foreach 如:<li ng-repeat="x in names"> {{x}}</li>
- .directive 创建自定义指令
- ng-disabled 相当于html的disabled属性 ng-show显示或者隐藏html元素 ng-hide隐藏或者显示html元素
- ng-options 选择框
- ng-click 点击事件
- AngularJS 过滤器
- currency 格式化庶子为货币格式
- filter 从数据组中选择一个子集
- lowercase 格式化字符串为小写
- orderBy根据某个表达式排列数组
- uppercase格式化字符串为大写
过滤器通过一个管道字符(|)用起来。
<div ng-app="myApp" ng-controller="personCtrl"> <p>姓名为 {{ lastName | lowercase }}</p> </div>
第一篇先写到这里。第二篇写一些高级的。待续...