AngularJs + Web API 頁面開發（一）

　　AngularJS這個JS框架是個神馬東東我也不太清楚，我也是初學者~~

　　AngularJS適用於single page App，單頁面程序都是局部刷新的，這一點和Ajax有第一的區別，因為使用Ajax的一個致命點是 會使瀏覽器的后退

按鈕失效。

　　在AngularJs中有幾個核心的知識點：scope(塊）,controller（控制器）,service（服務）,directive（指令）、Module（模塊）。

      請看下面我畫的草圖。

　　

　　

　　   接下來我將結合一個簡單的例子給大家講講如何使用AngularJS+Web API+簡單Linq to sql 技術實現 增刪改分頁。

　　   數據庫： SQL 2005   開發工具 VS2012

　　   瀏覽器用谷歌瀏覽器查看效果

 　　  

　　   首先是，這里三張表，人員聯系User,地址表AddressInfo，城市表City（數據自己添加）。

　　　

　　　第一步，或取得所有人員聯系信息。

　　   JS代碼如下：

<script type="text/javascript">
        var app = angular.module('myApp', []);

        app.run(function ($rootScope, $http) {

            var getInfo = function () {
                var config = { params: { Flag: "Pre", pageIndex: 1 } };
                $rootScope.pageIndex = "1";
                $http.get('/api/values', config).
                success(function (teamList) {
                    $rootScope.teamList = teamList;
                }).
                error(function (teamList) {
                    $rootScope.teamList = teamList || "Request failed";
                });
                /*得到所有城市信息*/
                $http.get('/api/city').
                  success(function (cityList) {
                      $rootScope.cityList = cityList;;
                  }).
                  error(function (cityList) {
                      $rootScope.cityList = cityList || "Request failed";
                  });
            };

            getInfo();

        });
</script>

　　 html代碼如下　　 

<div ng-controller="OperateController">
    <div>
            <table border="0" cellpadding="0" cellspacing="1" width="80%" style="background-color: black;">
                <thead>
                    <tr style="background-color: white;">
                        <th style="width: 10%; background-color: white;">UserID</th>
                        <th style="width: 15%; background-color: white;">Name</th>
                        <th style="width: 15%; background-color: white;">Age</th>
                        <th style="width: 20%; background-color: white;">Address_FK</th>
                        <th style="width: 15%; background-color: white;">Operate</th>

                    </tr>
                </thead>
                <tbody>
                    <tr ng-repeat='team in teamList ' ng-click="GetOne(team.UserID)">
                        <td style="background-color: white; height:20px;">
                            <input style="width: 98%" ng-model="team.UserID"  /></td>
                        <td style="background-color: white;">
                            <input style="width: 98%" ng-model="team.Name" />

                        </td>
                        <td style="background-color: white;">
                            <input style="width: 98%" ng-model="team.Age"  /></td>
                        <td style="background-color: white; text-align:center;">
                             
                        </td>

                        <td style="text-align: center; background-color: white;"><a ng-click="Del(team.UserID)" style="cursor: pointer;">  Delete</a></td>
                    </tr>
                </tbody>
            </table>
        </div>
</div>

 

　　 因為是Web API，所以API的代碼如下

　　 我這里默認使用Values的Controller,得到數據代碼如下

public class ValuesController : ApiController
    {
        TrainDataContext dbContext = new TrainDataContext();

        // GET api/values
        public IEnumerable<User> Get()
        {
            var UserInfo = dbContext.User.Skip(0).Take(10).ToList();
            //JavaScriptSerializer josn = new JavaScriptSerializer();
            //var infoStr = josn.Serialize(UserInfo);
            return UserInfo;
        }

        // GET api/values/5
        public IEnumerable<User> Get(string Flag, double pageIndex)
        {
            int PageSize = 2;

            double PageCount = Math.Ceiling(dbContext.User.Count() / Convert.ToDouble(PageSize));
            if (Flag == "Pre")
            {
                if (pageIndex <= 1)
                {
                    pageIndex = 1;
                }
                else
                {
                    
                    pageIndex = pageIndex - 1;
                }
            }
            else if (Flag == "Next")
            {
              
                if (pageIndex >= PageCount)
                {
                    pageIndex = PageCount;
                }
                else
                {
                    pageIndex = pageIndex + 1;
                }
            }

            int SkipValue =Convert.ToInt32( PageSize * (pageIndex - 1));
            var UserInfo = dbContext.User.Skip(SkipValue).Take(PageSize).ToList();
            return UserInfo;

        }

　　  這里使用的Linq to sql,如果對linq to sql 一點都不了解的人可以查看我的http://www.cnblogs.com/xianrongbin/p/3266149.html這篇博文。

　　  以上代碼看不懂沒關系，我慢慢講來。

　　  在Angular的scope是，類似與C#代碼中的model，里面包含了該對象的屬性及方法。

　　  當然，我們不要忘記，每一個angular應用有且只有一個rootscope,但可以擁有多個child scope，所有的scope都是繼承 了rootscope。

　　  這里有一個概念，叫做原型繼承：如果沒有找到對應的屬性，它將會一直向上搜索parent scope，直到到達root scope。例子如下：

<script type="text/javascript">
        var app = angular.module('myApp', []);
        app.controller("TestController", function ($scope) {
            $scope.leader='xrb',
            $scope.employee = {
                dept: '項目部',
                reprts: [{ name: 'name1' }, { name: 'name2' }]
            };
        });
    </script>


<div ng-controller="TestController">
        {{employee.dept}}
        <ul>
            <li ng-repeat="employee in employee.reprts">
                name:{{employee.name}}<br />
                leader:{{leader}}
            </li>
        </ul>
    </div>

　　 這里，leader屬性在employee里是沒有的，因此，JS會在同級沒有時，順着往上一級一級探索，直到達到rootscope。 因此，leader返回的值是 xrb.

　　  其實，知道了這個概率， 我也不知道有什么用~~

　　  Angular有一個特別的機制，叫做雙向綁定機制。其實就是數據源一變，展現形式立刻改變。最簡單的代碼如下

<input type="text" ng-model="testname" /><br /> showtestname:{{testname}}

showtestname后面的值會根據Input里的值的變化而變化。
這里引入$apply,$digest,$watch三個關鍵詞