angular使用

1.创建webapi项目

2.新建Movie类合MovieDb类

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;

namespace Api_4.Models
{
    public class Movie
    {
        public int Id { get; set; }
        public string Title { get; set; }
        public int ReleaseYear { get; set; }
        public int Runtime { get; set; }
    }
}

using System;
using System.Collections.Generic;
using System.Data.Entity;
using System.Linq;
using System.Web;

namespace Api_4.Models
{
    public class MovieDb:DbContext
    {
        public DbSet<Movie> Movies { get; set; }
    }
}

3.在控制台输入Enable-Migrations

4.在生成Migrations目录下的Configuration.cs中设置AutomaticMigrationsEnabled为true，修改Seed代码

namespace Api_4.Migrations
{
    using Api_4.Models;
    using System;
    using System.Data.Entity;
    using System.Data.Entity.Migrations;
    using System.Linq;

    internal sealed class Configuration : DbMigrationsConfiguration<Api_4.Models.MovieDb>
    {
        public Configuration()
        {
            AutomaticMigrationsEnabled = true;
        }

        protected override void Seed(Api_4.Models.MovieDb context)
        {
            context.Movies.AddOrUpdate(m => m.Title,
                     new Movie { Title = "Star Wars", ReleaseYear = 1977, Runtime = 121 },
                     new Movie { Title = "E.T.", ReleaseYear = 1981, Runtime = 130 },
                     new Movie { Title = "Toy Story", ReleaseYear = 1994, Runtime = 90 }
                 );
        }
    }
}

5.在控制台执行update-database将数据存在database中

6.新建webapi控制器

7.运行，访问api/movies,可以显示所有的电影信息

8.在项目目录下新建Clients文件夹，在其下新建mymovies.js文件

(function () {
    var app = angular.module("mymovies", []);
}());

9.在Client目录下新建ListController.js文件

(function (app) {
    var ListController = function ($scope) {
        $scope.message = "Hello";
    };
    app.controller("ListController", ListController);
}(angular.module("mymovies")));

10.修改Views/Home/Views/Index视图

@section scripts{

    <script src="~/Scripts/angular.js"></script>
    <script src="~/Client/Scripts/mymovies.js"></script>
    <script src="~/Client/Scripts/ListController.js"></script>
}

<div ng-app="mymovies">
    <div ng-controller="ListController">
        {{message}}
    </div>
</div>

11.运行程序，应能显示hello信息

12.修改ListController.js

(function (app) {
    var ListController = function ($scope,$http) {
        $http.get("api/movies")
            .success(function (data) {
                $scope.movies = data;
            });
    };
    app.controller("ListController", ListController);
}(angular.module("mymovies")));

13.修改Index视图

@section scripts{

    <script src="~/Scripts/angular.js"></script>
    <script src="~/Client/Scripts/mymovies.js"></script>
    <script src="~/Client/Scripts/ListController.js"></script>
}

<div ng-app="mymovies">
    <div ng-controller="ListController">
       <table>
           <tr ng-repeat="movie in movies">
               <td>{{movie.Title}}</td>
           </tr>
       </table>
    </div>
</div>

14.再次运行，应该能看到所有电影名字

15.更改mymovies.js增加路由

(function () {
    var app = angular.module("mymovies", ["ngRoute"]);
    var config = function ($routeProvider) {
        $routeProvider
            .when("/list", { templateUrl: "/client/views/list.html"})
            .when("/details/:id", { templateUrl: "/client/views/details.html" })
            .otherwise({ redirectTo: "/list" });        
             
    };
    config.$inject = ["$routeProvider"];   
    app.config(config);
    
}());

16.更改Index视图

@section scripts{

    <script src="~/Scripts/angular.js"></script>
    <script src="~/Scripts/angular-route.js"></script>  
    <script src="~/Client/Scripts/mymovies.js"></script>
    <script src="~/Client/Scripts/ListController.js"></script>
}

<div data-ng-app="mymovies">
    <ng-view></ng-view>
</div>

17.运行，访问http://localhost:63746/#/list，同样可以得到所有电影信息

18.更改list.html

<div ng-controller="ListController">
    <table>
        <tr ng-repeat="movie in movies">
            <td>{{movie.Title}}</td>
            <td><a href="#/details/{{movie.Id}}">Details</a></td>
        </tr>
    </table>
</div>

19.在Client/Scripts增加DetailsController.js

(function (app) {
    var DetailsController = function ($scope, $http, $routeParams) {
        var id = $routeParams.id;
        $http.get("api/movies/"+id)
            .success(function (data) {
                $scope.movie = data;
            });
    };
    app.controller("DetailsController", DetailsController);
}(angular.module("mymovies")));

20 在Client/Views下面添加detail.html

<div ng-controller="DetailsController">
    <h2>{{movie.Title}}</h2>
    <div>
        Released in {{movie.ReleaseYear}}
    </div>
    <div>
        {{movie.Runtime}} minutes long.
    </div>
</div>

21 在index.cshtml中添加DetailController.js的引用

@section scripts{

    <script src="~/Scripts/angular.js"></script>
    <script src="~/Scripts/angular-route.js"></script>
    <script src="~/Client/Scripts/mymovies.js"></script>
    <script src="~/Client/Scripts/ListController.js"></script>
    <script src="~/Client/Scripts/DetailsController.js"></script>
}

<div data-ng-app="mymovies">
    <ng-view></ng-view>
</div>

22.运行访问http://localhost:63746/#/list

23 点击Details即可看到

24. 在Client/Scripts下面增加movieService.js

(function (app) {
    var movieService = function ($http, movieApiUrl) {
        var getAll = function () {
            return $http.get(movieApiUrl);
        };
        var getById = function (id) {
            return $http.get(movieApiUrl+id);
        };

        var update = function (movie) {
            return $http.put(movieApiUrl + movie.Id,movie);
        };

        var create = function (movie) {
            return $http.post(movieApiUrl, movie);
        };

        var destroy = function (movie) {       
            return $http.delete(movieApiUrl + movie.Id);
        };

        return {
            getAll: getAll,
            getById: getById,
            update: update,
            create: create,
            delete: destroy

        };
       
    };
    app.factory("movieService", movieService);
}(angular.module("mymovies")));

25 修改ListController.js和DetailsController.js

(function (app) {
    var ListController = function ($scope,movieService) {
        movieService.getAll().success(function (data) {
            $scope.movies = data;
        });
    };
    app.controller("ListController", ListController);
}(angular.module("mymovies")));

(function (app) {
    var DetailsController = function ($scope,  $routeParams,movieService) {
        var id = $routeParams.id;
        movieService.getById(id)
            .success(function (data) {
                $scope.movie = data;
            });
    };
    app.controller("DetailsController", DetailsController);
}(angular.module("mymovies")));

25,运行访问list和details，仍能正常访问，说明movieService工作正常

26 修改list.html

<div ng-controller="ListController">
    <table>
        <tr ng-repeat="movie in movies">
            <td>{{movie.Title}}</td>
            <td><a class="btn btn-default" href="#/details/{{movie.Id}}">Details</a></td>
            <td><button class="btn btn-default" ng-click="delete(movie)">Delete</button></td>
        </tr>
    </table>
</div>

27.修改ListController.js，增加删除代码

(function (app) {
    var ListController = function ($scope, movieService) {


        movieService.getAll().success(function (data) {
            $scope.movies = data;
        });

        $scope.delete = function (movie) {
            movieService.delete(movie)
                .success(function () {
                    removeMovieById(movie.id);
                });
        };

        var removeMovieById = function (id) {
            for (var i = 0; i < $scope.movies.length; i++) {
                if ($scope.movies[i].id == id) {
                    $scope.movies.splice(i, 1);
                }
            }
        };
      
    };
    

    app.controller("ListController", ListController);
}(angular.module("mymovies")));

28.运行，验证删除功能

29.在Client/Views下面新建edit.html

<div ng-controller="EditController">
    <form ng-show="isEditable()">
        <fieldset>
            <div class="form-group">
                <label for="title">Title</label>
                <input id="title" type="text" ng-model="edit.movie.title" required class="form-control" />
            </div>

            <div class="form-group">
                <label for="release">Release Year</label>
                <input id="release" type="number" ng-model="edit.movie.releaseYear" required
                       min="1900" max="2030"
                       class="form-control" />
            </div>

            <div class="form-group">
                <label for="runtime">Length</label>
                <input id="runtime" type="number" ng-model="edit.movie.runtime" required
                       min="0" max="500"
                       class="form-control" />
            </div>
            <button class="btn btn-default" ng-click="save()">save</button>
            <button class="btn btn-default" ng-click="cancell()">Cancel</button>
        </fieldset>
    </form>
</div>

30 修改list.html,添加create按钮，并包含edit.html

<div ng-controller="ListController">
    <table>
        <tr ng-repeat="movie in movies">
            <td>{{movie.Title}}</td>
            <td><a class="btn btn-default" href="#/details/{{movie.Id}}">Details</a></td>
            <td><button class="btn btn-default" ng-click="delete(movie)">Delete</button></td>
        </tr>
    </table>
    <button class="btn btn-default" ng-click="create()">Create</button>
    <div ng-include="'/Client/Views/edit.html'"></div>
</div>

31 在ListController.js中增加create()

(function (app) {
    var ListController = function ($scope, movieService) {


        movieService.getAll().success(function (data) {
            $scope.movies = data;
        });

        $scope.create = function () {
            $scope.edit = {
                movie: {
                    Title: "",
                    RunTime: 0,
                    ReleaseYear: new Date().getFullYear()

                }
            };
        };

        $scope.delete = function (movie) {
            movieService.delete(movie)
                .success(function () {
                    removeMovieById(movie.id);
                });
        };

        var removeMovieById = function (id) {
            for (var i = 0; i < $scope.movies.length; i++) {
                if ($scope.movies[i].id == id) {
                    $scope.movies.splice(i, 1);
                }
            }
        };
      
    };
    

    app.controller("ListController", ListController);
}(angular.module("mymovies")));

32.同样在details.html中增加edit按钮，并包含edit.html

<div ng-controller="DetailsController">
    <h2>{{movie.Title}}</h2>
    <div>
        Released in {{movie.ReleaseYear}}
    </div>
    <div>
        {{movie.Runtime}} minutes long.
    </div>

    <button ng-click="edit()">Edit</button>
    <div ng-include="'/Client/Views/edit.html'"></div>
</div>

33 在DetailsController.js中增加edit()

(function (app) {
    var DetailsController = function ($scope,  $routeParams,movieService) {
        var id = $routeParams.id;
        movieService.getById(id)
            .success(function (data) {
                $scope.movie = data;
            });


        $scope.edit = function () {
            $scope.edit.movie = angular.copy($scope.movie);
        };
    };
    app.controller("DetailsController", DetailsController);
}(angular.module("mymovies")));

34.在Client/Scripts下面新建EditController.js

(function (app) {
    var EditController = function ($scope, movieService) {
        $scope.isEditable = function () {
            return $scope.edit && $scope.edit.movie;
        };

        $scope.cancel = function () {
            $scope.edit.movie = null;
        };

        $scope.save = function () {
            if ($scope.edit.movie.Id) {
                updateMovie();
            }
            else {
                createMovie();
            }
        };

        var updateMovie = function () {
            movieService.update($scope.edit.movie)
                .success(function () {
                    angular.extend($scope.movie, $scope.edit.movie);
                    $scope.edit.movie = null;
                });
        };

        var createMovie = function () {
            movieService.create($scope.edit.movie)
                .success(function () {
                    $scope.movies.push(movie);
                    $scope.edit.movie = null;
                });
        };
    };
    app.controller("EditController", EditController);
}(angular.module("mymovies")));

35.在Index视图里面添加EditController.js的引用

@section scripts{

    <script src="~/Scripts/angular.js"></script>
    <script src="~/Scripts/angular-route.js"></script>
    <script src="~/Client/Scripts/mymovies.js"></script>
    <script src="~/Client/Scripts/ListController.js"></script>
    <script src="~/Client/Scripts/DetailsController.js"></script>
    <script src="~/Client/Scripts/movieService.js"></script>
    <script src="~/Client/Scripts/EditController.js"></script>
}

<div data-ng-app="mymovies">
    <ng-view></ng-view>
</div>

36.运行并验证添加电影和编辑电影功能，以上全部ok

dxm809

发布了488 篇原创文章 · 获赞 73 · 访问量 30万+

他的留言板关注

猜你喜欢