Angular JS （一）

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>

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