zoukankan      html  css  js  c++  java
  • 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>
    

      

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

  • 相关阅读:
    0425正则数组
    0424php函数
    0424php基础
    string类例题
    数组分为一维数组,二维数组,多为数组
    string类 截取的长度 是否包含某个数
    循环语句2
    /异常语句try,catch.
    string类
    循环语句
  • 原文地址:https://www.cnblogs.com/sunShineJing/p/6497501.html
Copyright © 2011-2022 走看看