一、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="#" rel="external nofollow" rel="external nofollow" ng-click="detail(x.Id)">Details</a> <!--绑定点击事件，可以进行传参-->
<a href="#" rel="external nofollow" rel="external nofollow" 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>
