首先创建asp.NET mvc 程序，创建一个web api :
明溪网站建设公司创新互联公司,明溪网站设计制作，有大型网站制作公司丰富经验。已为明溪近1000家提供企业网站建设服务。企业网站搭建\成都外贸网站建设公司要多少钱，请找那个售后服务好的明溪做网站的公司定做！
1 public class UserController : ApiController 2 { 3 private static List userList = new List() {
4 new User(){ UserID=1, Name="zhangsan"}, 5 new User(){UserID=2, Name="lisi"}, 6 new User (){UserID=3, Name="wangwu"}, 7 new User(){ UserID=4,Name="zhaoliu"} 8 }; 9 10 11 public IEnumerable Get()12 {13 return userList.OrderBy(p => p.UserID);14 }15 16 public User Get(int id)17 {18 return userList.Where(p => p.UserID.Equals(id)).FirstOrDefault();19 }20 21 public void Post(User user)22 {23 userList.Add(user);24 }25 26 public void Put(User user)27 {28 userList.Remove(userList.Where(p => p.UserID.Equals(user.UserID)).FirstOrDefault());29 userList.Add(user);30 }31 32 }
其中User 类：
1 public class User2 {3 public int UserID { get; set; }4 public string Name { get; set; }5 }这样web api 就创建完毕了，接下来我们就要在项目中引用angular.js 所需要的js 文件。可以在nuget 中下载直接搜索anjular :
安装完成之后，项目中就会在scripts文件夹出现以下文件：
然后在新建 一个AngularJS 文件夹添加两个js空文件：app.js和controllers.js：
其中app.js 代码：
1 var userapp = angular.module("userapp", ['ngRoute']);2 3 userapp.config(['$routeProvider', function ($routeProvider) {4 5 $routeProvider.when('/Home/index', { templateUrl: '/Home/UserList', controller: 'userlistController' })6 .when('/Home/EditUser/:id', { templateUrl: '/Home/EditUser', controller: 'edituserController' })7 .otherwise({ templateUrl: '/Home/UserList', controller: 'userlistController' });8 9 }]);
我们知道anjular.js 是模块化的所以定义了一个userApp模块， 在UserApp模块中，我们定义了路由和布局模板。userApp的默认URL是/Home/index，即http://localhost:10554/Home/Index。跳转到编辑用户的路由是/Home/EditUser/:id 其中:id 是传递的参数，如果不满足这两个路由的话就会跳转到/Home/UserList 。我分别给每个路由指定了路由对应的地址以及controller。
controllers.js 代码：
1 userapp.controller('userlistController', function ($scope, $http) { 2 3 $scope.Users = []; 4 5 $scope.Load = function () { 6 $http.get("/api/user").success(function (data, status) { 7 8 $scope.Users = data; 9 })10 11 };12 20 $scope.Load();21 22 });23 24 25 userapp.controller('edituserController', function ($scope, $routeParams, $http) {26 27 $scope.UserID = $routeParams.id;28 $scope.User = {};29 $scope.Save = function () {30 $http.put("/api/user", { userid: $scope.User.UserID, name: $scope.User.Name }).success(function (data, status) {31 32 })33 };34 35 $http.get("/api/user/" + $scope.UserID).success(function (data, status) {36 $scope.User = data;37 })38 39 });
我定义了两个controller :userlistController 和edituserController，这两个controller 是在app.js中的路由中定义好的，必须一致。其中userlistController 是调用web api 来获取用户的列表，edituserController 是用来编辑用户。$routeParams.id 是获得传递过来的参数的。
这样js 文件基本写好。然后看页面是怎么和angular.js 来配合使用的。
Home/Index.cshtml 代码：
