Angular JS (一)

时间:2021-07-22 01:45:50

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的一些指令
  1. ng-app 初始化一个AngularJS应用程序
  2. ng-init 初始化应用程序数据
  3. ng-model 把元素值绑定到应用程序
  4. ng-controller
  5. ng-repeat 重复一个html元素,有点像在html中使用foreach 如:<li ng-repeat="x in names"> {{x}}</li>
  6. .directive 创建自定义指令
  7. ng-disabled 相当于html的disabled属性 ng-show显示或者隐藏html元素 ng-hide隐藏或者显示html元素
  8. ng-options 选择框
  9. ng-click 点击事件
  • AngularJS 过滤器
  1. currency 格式化庶子为货币格式
  2. filter 从数据组中选择一个子集
  3. lowercase 格式化字符串为小写
  4. orderBy根据某个表达式排列数组
  5. uppercase格式化字符串为大写

过滤器通过一个管道字符(|)用起来。

<div ng-app="myApp" ng-controller="personCtrl">

<p>姓名为 {{ lastName | lowercase }}</p>

</div>

  

第一篇先写到这里。第二篇写一些高级的。待续...