JS框架——AngularJS-1

AngularJS 指令是以 ng 作为前缀的 HTML 属性。【HTML5允许扩展的属性,以data-开头】

ng-app:定义一个AngularJS应用程序

ng-model:把元素值比如输入域的值绑定到应用程序,可将输入域的值与AngularJS创建的变量绑定。

                  双向绑定:<div ng-app="myApp" ng-controller="myCtrl">
                         名字: <input ng-model="name">
                         <h1>你输入了: {{name}}</h1>

                         </div>

                  验证用户输入:<form ng-app="" name="myForm">
                             Email:
                             <input type="email" name="myAddress" ng-model="text">
                             <span ng-show="myForm.myAddress.$error.email">不是一个合法的邮箱地址</span>

                             </form>

                                         (提示信息会在ng-show属性返回ture的情况下显示)

                 ng-model可为应用数据提供状态值(invaild,dirty,touched,error)

                  也可给予他们的状态为HTML元素提供CSS类。

                  ng-model 指令根据表单域的状态添加/移除以下类:

ng-empty
ng-not-empty
ng-touched
ng-untouched
ng-valid:验证通过
ng-invalid:验证失败
ng-dirty:是否修改
ng-pending
ng-pristine:控件为初始状态

ng-bind:把应用程序数据绑定到HTML视图

ng-init:初始化AngularJS应用程序变量

ng-repeat:重复一个HTML元素,经常用于循环访问数组ng-repeat=“x in 数组名”

可以使用.directive函数来添加自定义的指令,使用驼峰法命名,但使用时需要以-分割:

      使用下列方式调用:<指令名></指令名>

                                   <div 指令名></div>

                                   <div class="指令名"></div>

                                    <!-- directive:指令名 -->

       输出结果相同。但你可以限制你的指令只能通过特定的方式来调用:在指令定义函数的return里加入restrict属性。restrict值可以是(E:元素名;A:属性;C:类名;M:注释)

AngularJS表达式:{{expression}} ,把数据绑定到HTML,与ng-bind有异曲同工之妙。


Scope作用域:应用在HTML和JavaScript之间的纽带

             使用:当你在AngularJS创建控制器时,可以将$scope对象当做参数传递                      

                < div  ng-app= "myApp"  ng-controller= "myCtrl" >
                < h1 > {{carname}} < /h1 >
                < /div >
                < script >
                var app = angular.module( 'myApp', []);
                app.controller( 'myCtrl'function($scope) {
                $scope.carname =  "Volvo";
                });
                < /script >

Scope概述:AngularJS应用组成:View视图,即HTML

                                                  Model模型,当前视图中可用的数据

                                                  Controller控制器,即JS函数,可以添加或修改属性

                    Scope是模型,是一个 JavaScript 对象,带有属性和方法,这些属性和方法可以在视图和控制器中使用。


Controller控制器:控制器是JS对象,由标准的JS对象的构造函数创建

                          AngularJS 使用$scope 对象来调用控制器, $scope 是一个应用对象(属于应用变量和函数)。控制器的 $scope (相当于作用域、控制范围)用来保存AngularJS Model(模型)的对象。


过滤器:过滤器可以使用一个管道字符(|)添加到表达式和指令中。

             currency:格式化数字为货币格式

             fifter:从数组项中选择一个子集

             lowercase:格式化为小写

             uppercase:格式化为大写

             orderBy:根据某个表达式排列数组



猜你喜欢

转载自blog.csdn.net/m0_37829710/article/details/80813912