Angular初步

一、angular.js是什么？

angular.js是一个javascript的框架，与jquery是一个级别的，区别是jquery主要是擅长dom操作，而angular主要是擅长绑定数据显示数据。不过在angular里面也有集成了jquery的一部分获取元素的模块以加强自身获取元素的能力。那就是方法angular.element();这个方法和jquery的$()获取元素的方法是类似的。

二、angular基础：

1、ng-app：这个是最重要的指令，所有的angular代码都要写在这个下面的控制器中，app与controller是一对多的关系，而一个程序当中可以有多个ng-app，但是angular只会自动加载第一个ng-app，其他的我们需要手动加载。

2、{{表达式}}：双括号是angular用于显示数据的一种方式，里面可以放表达式，可以进行显示数据（一般不太推荐用这个而是使用ng-bind，因为在页面还未加载完毕的时候{{}}会显示出来，影响用户体验）。

使用方式：angular的指令都是作为dom元素的属性进行使用的，ng-app主要是放在想要进行显示数据的div中作为属性。如下图，运行显示的结果是3而不是{{1+2}}。

    <div ng-app="">
        <p>{{1+2}}</p>
    </div>

3、ng-controller：控制器，每一个ng-app之下都可以定义多个控制器，是一对多的关系。

<div ng-app="First" ng-controller="firstController">  

注意到其中的区别，就是如果我们没有使用控制器并且只是进行简单的计算如使用{{}}，那么ng-app=“”也行，但是一旦使用了控制器就必须都进行命名，并不建议使用不命名的方式，因为浏览器在解析的时候是会根据我们的app以及控制器去寻找相应的实现来显示数据的，没有命名就会出错，无法显示结果。

三、上实例接（上一篇博客：http://www.cnblogs.com/heisehenbai/p/WebAPIANDEF.html）：

var app = angular.module("First", []);//创建app模块
app.controller("firstController", function ($scope, $http) {
    var message = new Array();
    var selectAuthor = new Array();
    $http({//这个hiangular当中的ajax使用方式
        method: "GET",
        url: "/api/Books/"
    }).then(function (data) {//在这里使用then的话回调函数传回的数据是data.data，而如果实使用sucess那么传回的就是data数组
        angular.forEach(data.data, function (value, key) {//angular的forEach，使用方式和jquery的一样
            message.push(value);
            selectAuthor.push(value.AuthorName);
        })
        $scope.baseMessage = message;//$scope是angular的一个重要对象，内部包含着方法和变量，我们可以使用它定义变量，使用它之前需要在创建控制器的回调函数当中把$scope
　　　　　　　　　　　　　　　　　　　　　　作为参数传递
        $scope.selectAuthors = selectAuthor;
        $scope.selected = $scope.baseMessage[0];
    })

    $scope.detail = function detail(id) {
        $http.get("/api/Books/" + id).then(function (data) {
            $scope.Author = data.data.AuthorName;
            $scope.Title = data.data.Title;
            $scope.Year = data.data.Year;
            $scope.Genre = data.data.Genre;
            $scope.Price = data.data.Price;
        });
    }

    $scope.delete = function (id) {
        $http.delete("api/Books/" + id).then(function () {
            alert("OK,You have already delete it!");
        })
    }

    $scope.AddBook = function (selectedAuthor) {
        //alert(selected.Id);
        var Title = $("#Title").val();
        var Year = $("#Year").val();
        var Genre = $("#Genre").val();
        var Price = $("#Price").val();
        var book = {
            AuthorId: parseInt(selectedAuthor.Id),
            Title: Title,
            Year: parseInt(Year),
            Genre: Genre,
            Price: Price
        }
        $http.post(
            "/api/Books/", book).success(function () {
                alert("Add Sucess!");
            })
    }

    $scope.ModifyBook = function (selectedModify) {
        var id = selectedModify.Id;
        var AuthorId = 1;
        authorId(id);
        function authorId(id) {
            $http.get("/api/Books/" + id).then(function (data) {
                AuthorId = data.data.AuthorId;

                var Title = $("#titleModify").val();
                var Year = $("#yearModify").val();
                var Genre = $("#genreModify").val();
                var Price = $("#priceModify").val();
                var book = {
                    AuthorId: AuthorId,
                    Id: parseInt(selectedModify.Id),
                    Title: Title,
                    Year: parseInt(Year),
                    Genre: Genre,
                    Price: Price
                }
                //$http.put("/api/Books/" + selectedModify.Id, book,function () {
                //    alert("OK,You have already modify it (*_*) ~");
                //});
                $http({ method: "PUT", url: "/api/Books/" + selectedModify.Id, data: { "id": selectedModify.Id, "book": book } }).then(function () {
                    alert("OK,You have already modify it (*_*) ~");
                });

            });
        }
    }
});

下面的是html代码：

<div ng-app="First" ng-controller="firstController">        <!--声明控制器和app模块-->

    <!--base message-->
    <div id="books">
        <h1>Books</h1>
        <p ng-repeat="x in baseMessage"> <label ng-bind="x.Title+': '+x.AuthorName"></label><!--ng-repeat，angular中的循环-->
            <a href="#" ng-click="detail(x.Id)">Details</a>　　　　<!--绑定点击事件，可以进行传参-->
            <a href="#" ng-click="delete(x.Id)">Delete</a>
        </p>
    </div>

    <!--detail message-->
    <div id="details">
        <h1>Details</h1>
        <label>Author</label> <label>{{": "+Author}}</label><br /><!--显示在angular中使用$scope声明的变量的数据-->
        <label>Title</label> <label>{{": "+Title}}</label><br />
        <label>Year</label> <label>{{": "+Year}}</label><br />
        <label>Genre</label> <label>{{": "+Genre}}</label><br />
        <label>Price</label> <label>{{": "+Price}}</label><br />
    </div>
    <!--add block-->
    <div id="addBlock">
        <h1>Add Book</h1>
        <label>Author</label><select id="Author" ng-options="item as item.AuthorName for item in baseMessage" ng-model="selectedAuthor"></select><br />
        @*@Html.DropDownList("Author", new List<SelectListItem>(), new { ng_options = "item as item.AuthorName for item in baseMessage", ng_model = "selected" });*@
        <!--使用ng-options创建select的option选项，注意书写的格式比较复杂-->
        <label>Title</label><input type="text" id="Title" /> <br />
        <label>Year</label> <input type="text" id="Year" /><br />
        <label>Genre</label> <input type="text" id="Genre" /><br />
        <label>Price</label> <input type="text" id="Price" /><br />
        <input type="button" value="Add" ng-click="AddBook(selectedAuthor)"/>
    </div>
    <hr />
    <!--Edit block-->
    <div id="edit">
        <h1>Modify Books</h1>
        <label>Book:</label><select id="Author" ng-options="item as item.Title for item in baseMessage" ng-model="selectedBook"></select><br />
        <label>Title:</label><input type="text" id="titleModify" /> <br />
        <label>Year:</label> <input type="text" id="yearModify" /><br />
        <label>Genre:</label> <input type="text" id="genreModify" /><br />
        <label>Price:</label> <input type="text" id="priceModify" /><br />
        <input type="button" value="Modify" ng-click="ModifyBook(selectedBook)" />
    </div>
</div>