背景：由于长期从事于后端开发，对界面的绘制功底特别薄弱，刚好今天早上去博客园浏览文章的时候，看到推送消息是学习AngularJS，由于带着好奇心果断的点开看了一下，早期的时候听说过前端三大框架，但是都没有真正的使用过，今天就尝试一下，通过后端构建好服务之后，然后使用AngularJS去调用，最后渲染视图，服务用的WebApi

    服务端数据模型：

    1. using System;
    2. using System.Collections.Generic;
    3. using System.Linq;
    4. using System.Web;
    6. namespace _01___请求服务获取数据.Models
    7. {
    8.     public class Student
    9.     {
    10.         public string StudentNo { get; set; }
    12.         public string StudentName { get; set; }
    14.         public int StudentAge { get; set; }
    16.         public string StudentAddress { get; set; }
    18.         public DateTime StudentBirthDay { get; set; }
    19.     }
    20. }

    服务端返回数据接口：

    1. using _01___请求服务获取数据.Models;
    2. using System;
    3. using System.Collections.Generic;
    4. using System.Linq;
    5. using System.Net;
    6. using System.Net.Http;
    7. using System.Web.Http;
    9. namespace _01___请求服务获取数据.Controllers
    10. {
    11.     public class StudentController : ApiController
    12.     {
    13.         [Route("Rotu/GetStudentList")]
    14.         [HttpGet]
    15.         public List<Student> StudentList()
    16.         {
    17.             return new List<Student>()
    18.             {
    19.                 new Student()
    20.                 {
    21.                     StudentNo ="001",
    22.                     StudentName ="Rotu",
    23.                     StudentAddress ="HB",
    24.                     StudentAge=18,
    25.                     StudentBirthDay=DateTime.Now
    26.                 },
    28.                 new Student()
    29.                 {
    30.                     StudentNo ="002",
    31.                     StudentName ="Jone",
    32.                     StudentAddress ="HB",
    33.                     StudentAge=18,
    34.                     StudentBirthDay=DateTime.Now
    35.                 },
    37.                 new Student()
    38.                 {
    39.                     StudentNo ="003",
    40.                     StudentName ="Andy",
    41.                     StudentAddress ="HB",
    42.                     StudentAge=18,
    43.                     StudentBirthDay=DateTime.Now
    44.                 },
    46.                 new Student()
    47.                 {
    48.                     StudentNo ="004",
    49.                     StudentName ="Jack",
    50.                     StudentAddress ="HB",
    51.                     StudentAge=18,
    52.                     StudentBirthDay=DateTime.Now
    53.                 },
    54.             };
    55.         }
    56.     }
    57. }

    页面请求：

    1. <!DOCTYPE html>
    2. <html>
    3. <head>
    4.     <meta charset="utf-8" />
    5.     <title></title>
    6.     <style>
    7.         tr {
    8.             text-align:center;
    9.         }
    10.     </style>
    11.     <script src="https://cdn.staticfile.org/angular.js/1.4.6/angular.min.js"></script>
    12. </head>
    13. <body>
    14.        <div ng-app="MyApp" ng-controller="MyController">
    15.             <table ng-if="data!=null" border="1">
    16.                 <tr>
    17.                     <td>编号</td>
    18.                     <td>姓名</td>
    19.                     <td>住址</td>
    20.                     <td>生日</td>
    21.                     <td>年龄</td>
    22.                 </tr>
    23.                 <tr ng-repeat="x in data">
    24.                     <td>{{x.StudentNo}}</td>
    25.                     <td>{{x.StudentName}}</td>
    26.                     <td>{{x.StudentAddress}}</td>
    27.                     <td>{{x.StudentBirthDay|date:'yyyy-MM-dd HH:mm:ss'}}</td>
    28.                     <td>{{x.StudentAge}}</td>
    29.                 </tr>
    30.             </table>
    31.        </div>
    33.     <script>
    34.         var app = angular.module("MyApp", []);
    35.         app.controller("MyController", function ($scope, $http)
    36.         {
    37.             var requestUrl = "/Rotu/GetStudentList";
    38.             $http.get(requestUrl).then(function (response) {
    39.                 $scope.data = response.data;
    40.             });
    41.         });
    42.     </script>
    43. </body>
    44. </html>

    最终效果：

    webwxgetmsgimg.jpg