初识AngularJS

AngularJS基本特性介绍:

1、 优点：数据自动更新

 

2、 初始化（添加Angular使用所必须的模块）：

a)   angular在启动时，会设置全局的angular对象，然后在angular对象上发布module这个API

b)   引用angularJS:<scriptsrc="angular.min.js"></script>

c)   var myApp =angular.module(name, [requires], [configFn]);

name：字符串类型，代表模块的名称；

requires：字符串的数组，代表该模块依赖的其他模块列表，如果不依赖其他模块，用空数组即可；

configFn：用来对该模块进行一些配置。

d)   指令ng-app定义AngularJS的作用域

 

3、 If

Angular:ng-if

<div ng-if="checked">content</div>

.NET:if

@if(checked){

<div >content</div>

}

4、赋值

Angular:

ng-model：是$scope<-> view的双向绑定，控制器中可以直接获取到值的变化

列：

$scope.productData ="userName" ;

$scope.items=[];//5、Foreach循环遍历使用

$scope.LoadItems = function() {

       $http.post('/home/getDate’)

           .success(function(data, status, headers, config) {

               if(data) {

                  $scope.items= data;//赋值

               }

               }else { toastr["error"]("", "");}

        })

       .error(function(data, status, headers, config) {

             toastr["error"]("", "");

        });

};

<input type="text"ng-model="productData" />

//双向绑定：productData初始值为"userName"，当input框里面的内容修改时$scope.productDat里面的内容也会自动更改,界面上显示的内容{{productData}}也会自动更新

ng-bind：是从$scope-> view的单向绑定，用于展示数据的

列：

<span ng-bind="productData"></span>或{{productData}}

.NET:

Public string productData="userName"；

Public list<Model> items=new List<Model>();

Js:

<input type="text" id="inputData"/>

<span id="spanData"></span>

Var productData="userName";

$("#inputData").val(productData);

$("#spanData").val(productData);

$("#inputData").change(function(){

productData=$("#inputData").val();

$("#spanData").val(productData);

})//jq为动态赋值，而Angular中申明的$scope.productData为如.net中的全局变量，当修改后会全局更新

5、 Foreach循环遍历:(angular.forEach)

angular.forEach(obj, iterator, [context])

obj :被迭代的对象(Object Array).

iterator :迭代函数(Function)

context(optional) :循环后读取出来的值(Object)

例：

1、界面遍历

Angular:ng-repeat

<tr ng-repeat="item in items">

       <td>{{$index + 1}}</td>//$index显示第几行，从0开始

       <td><input type="text" ng-model="item.name"/></td>//8.数据提交

       <td>{{item.quantity * item.price | currency: '￥' }}</td>// currency: '￥'数字格式化为货币，默认是美元符号，如转换时间为“date : 'yyyy-MM-dd hh:mm:ss EEEE'”

 <td><buttonng-click="remove($index)">Remove</button></td>//6、删除使用

</tr>

.NET:foreach

@foreach (Model item in items){

Var index =0;

<tr>

        <td>@(++index)</td>

       <td><input type="text" value="@item.name"/></td>

       <td>@(item.quantity * item.price)</td>

       <td><buttonοnclick="remove(this)">Remove</button></td>

</tr>

}

 

2、js

Angular:angular.forEach

function button1(){   

var values = {name: 'misko', gender: 'male'};   

var log = [];   

angular.forEach(values, function(value, key){this.push(key + ': ' + value);}, log);   

alert(log);     

}

Jq：each

$.ajax({

var values = {name: 'misko', gender: 'male'};

var log = [];

values.each(function(i,val) {

log.push(key + ': ' + value);

});

callback(log);

});

 

 

6、删除

Angular:remove

<buttonng-click="remove($index)">Remove</button>

$scope.remove = function (index) {

           $scope.items.splice(index, 1);

}

.NET:remove

Var remove=function(){

 this.parent().parent().remove();

}

7、 Switch

Angular:ng-switch

  <div ng-switchon="isExists(item)">

       <spanng-switch-when="true">true</span>

       <spanng-switch-default>false</span>

  </div>

.NET:switch

@switch (item)

{

　case true :<span>Available</span>

　default :<span>false</span>

}

8、 数据提交

Angular:post

提交整个list<Model>到后台

$scope.LoadCurrencyData = function() {

 $http.post("/home/index",$scope.items).success(function(data){

$scope.items=data;

               }).error(function(data){

                   console.log("失败");

                });

  };

Jq:post

     var addresslist = new Array();

     var r =document.getElementsByName("list");

        for (var i = 0; i <r.length; i++) {

                var address = newArray();

                address['name'] =$(r[i]).attr("iname");

               addresslist.push(address);

        }

     $.post("/home/index", addresslist,function(data) {

          if(result.Code == 100) {

          } else {}

     });