一、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>