AngularJs + Web API 页面开发（一）

　　AngularJS这个JS框架是个神马东东我也不太清楚，我也是初学者~~

　　AngularJS适用于single page App，单页面程序都是局部刷新的，这一点和Ajax有第一的区别，因为使用Ajax的一个致命点是会使浏览器的后退

按钮失效。

　　在AngularJs中有几个核心的知识点：scope(块）,controller（控制器）,service（服务）,directive（指令）、Module（模块）。

请看下面我画的草图。

　　 AngularJs + Web API 页面开发（一）

　　接下来我将结合一个简单的例子给大家讲讲如何使用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>

Html代码