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的一些指令
  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>

　　

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

 

posted @ 2017-03-03 16:56  sunshine静  阅读(251)  评论(0)  编辑  收藏  举报