angularJS 二
2016-04-21 15:13
671 查看
angularJS 2.1 ngForm
angularJS 2.2
angularJS 2.3 route 1.0 (比较乱)
angularJS 2.3 route 2.0
2.0对应的searchBook.html
2.0对应的resultBook.html
angularJS directive 自定义标签
angularJS 小游戏。。。
angularJS 进度条。。
angularJS factory service
books.json
<!DOCTYPE html>
<html lang="zh-cn" ng-app>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<title>angularjs</title>
<link rel="stylesheet" href="bootstrap/css/bootstrap.css" />
<link rel="stylesheet/less" href="styles/site.less">
<script src="scripts/jquery.js"></script>
<script src="bootstrap/js/bootstrap.js"></script>
<script src="scripts/less.js"></script>
<script src="scripts/angular-1.2.5.js"></script>
</head>
<body class="container">
<header class="page-header"><h1>index</h1></header>
<section>
<input ng-model="num" />{{num}}
<button ng-model="msg" ng-click="msg=msg+1">{{msg}}1</button>
</section>
<div>
<form id="frmLogin" name="frmLogin" action="index.html">
<div class="form-group has-feedback" data-ng-class="frmLogin.userName.$dirty?(frmLogin.userName.$valid?'has-success':'has-error'):''">
<label for="userName" class="control-label">UserName</label>
<input class="form-control" type="text" name="userName" id="userName" data-ng-model="userName" required data-ng-minlength="3" data-ng-maxlength="6">
<span data-ng-show="frmLogin.userName.$dirty && frmLogin.userName.$valid" data-ng-class="'glyphicon-ok'" class="glyphicon form-control-feedback"></span>
<span data-ng-show="frmLogin.userName.$dirty && frmLogin.userName.$invalid" data-ng-class="'glyphicon-remove'" class="glyphicon form-control-feedback"></span>
</div>
<div class="form-group has-feedback" data-ng-class="frmLogin.email.$dirty?(frmLogin.email.$valid?'has-success':'has-error'):''">
<label for="email" class="control-label">Email</label>
<input class="form-control" type="email" name="email" id="email" data-ng-model="email" required>
<span data-ng-show="frmLogin.email.$dirty && frmLogin.email.$valid" data-ng-class="'glyphicon-ok'" class="glyphicon form-control-feedback"></span>
<span data-ng-show="frmLogin.email.$dirty && frmLogin.email.$invalid" data-ng-class="'glyphicon-remove'" class="glyphicon form-control-feedback"></span>
</div>
<p class="text-right">
<button data-ng-disabled="frmLogin.$invalid" type="submit" class="btn btn-primary">Login{{msg}}</button>
</p>
</form>
</div>
<footer class="navbar-fixed-bottom text-center">
<span>© 2015</span>
</footer>
</body>
</html>angularJS 2.2
<!DOCTYPE html>
<html lang="zh-CN" data-ng-app="">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>angular 入门3</title>
<link href="../bootstrap/css/bootstrap.min.css" rel="stylesheet">
<!--[if lt IE 9]>
<script src="../bootstrap/html5shiv.min.js"></script>
<script src="../bootstrap/respond.min.js"></script>
<![endif]-->
<script src="../scripts/jquery-1.12.2.min.js"></script>
<script src="../bootstrap/js/bootstrap.min.js"></script>
<script src="../scripts/angular-1.2.5.js"></script>
</head>
<body>
<div class="container">
<p class="page-header">ng-change</p>
<div ng-controller="changeCtrl">
<label id="lbl" class="label label-info"></label>
<input ng-model="msg" ng-change="changeFunc(msg)" type="text" class="form-control">
<button class="btn btn-primary" type="button" ng-click="clickFunc()">submit</button>
</div>
<script>
function changeCtrl($scope){
$scope.clickFunc= function () {
$("p").html($("#lbl").html());
}
$scope.changeFunc= function (msg) {
var reg=/tarena/gi;
// $("#lbl").html(msg);
$("#lbl").html(msg.replace(reg,'达内'));
};
}
</script>
<p class="page-header text-primary">ng-click ng-dblclick</p>
<div ng-controller="bookCtrl">
<ul class="list-group">
<li class="list-group-item" ng-repeat="b in books">
<span class="glyphicon glyphicon-bookmark"></span>
<span ng-dblclick="showPrice($event.target)" data-price="{{b.Price}}">{{b.Title}}</span>
<span data-id="{{b.Id}}" ng-click="hideFunc($event.target)" style="cursor:pointer;" class="pull-right glyphicon glyphicon-remove"></span> <!--pull-right右对齐-->
<!-- data-id属性随便定义 ng-click函数传参数要多添加一个 $-->
</li>
</ul>
</div>
<script>
function bookCtrl($scope,$http){
$scope.showPrice=function(event){alert($(event).attr("data-price"))};
$scope.hideFunc=function(event){
alert("要删除的编号是： "+$(event).attr("data-id"));
$(event).parent().hide(1000); // 找其父类隐藏
}
$http.get("books.json").success(function (msg) {
$scope.books=msg;
});
}
</script>
<h1 class="page-header text-primary">ng-mouseenter ng-mouseleave </h1>
<div ng-init="l=[1,2,3,4,5,6]">
<div ng-repeat="m in l" class="col-sm-2">
<img class="img-responsive" src="images/{{m}}.jpg"/>
</div>
</div>
<h1 class="page-header text-primary">ng-form 太复杂 不现实 </h1>
<form id="frmLogin" name="frmLogin" action="0.html">
<div class="form-group has-feedback" data-ng-class="frmLogin.email.$dirty?(frmLogin.email.$valid?'has-success':'has-error'):''">
<label class="control-label" for="email" name="email">email</label>
<input required class="form-control" id="email" type="email">
<span class="form-control-feedback glyphicon glyphicon-ok"></span> <!--一个打勾 form-control-feedback 让图标加到标签里面-->
<p class="text-right"> <!--按钮右对齐-->
<button ng-disabled="frmLogin.$invalid" type="submit" class="btn btn-primary">login</button>
</p>
</div>
</form>
<h1 class="page-header text-primary">ng-model 简单版 不初始化也可以</h1>
<input type="text" ng-model="num">{{num}}
<p class="page-header text-primary">概念： DI(控制器参数 $http $scope $element; 监听：watch)<br>
指令：模板包含ng-include 节点控制 ng-style ng-class</p>
<div style="clear:both;margin-bottom: 100px;"></div>
</div>
</body>
</html>angularJS 2.3 route 1.0 (比较乱)
<!DOCTYPE html>
<html lang="zh-CN" data-ng-app="app1">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>angular route</title>
<link href="../bootstrap/css/bootstrap.min.css" rel="stylesheet">
<!--[if lt IE 9]>
<script src="../bootstrap/html5shiv.min.js"></script>
<script src="../bootstrap/respond.min.js"></script>
<![endif]-->
<script src="../scripts/jquery-1.12.2.min.js"></script>
<script src="../bootstrap/js/bootstrap.min.js"></script>
<!--angularJS 1.4 并引入route.js -->
<script src="../scripts/angular.min.js"></script>
<script src="../scripts/angular-route.min.js"></script>
</head>
<body>
<div class="container">
<!--标准情况下
controller.js
function testController($scope){
$scope.msg="test123";
}
module.js
var app=angular.module("app1",[]);
app.controller("test",testController);
html
<div ng-controller="test">
{{msg}}
</div>
-->
<div ng-controller="test">
{{msg}}
</div>
<div class="row">
<div class="col-sm-6">
<!--
先执行 <a href="#login",找到路由配置里面的when('/login'),找下一行的login.html
先找<script id="login.html"> 把里面的模板内容显示在 ng-view的div中
如果 script id没有，则找新页面login.html
-->
<a href="#login" class="btn btn-primary btn-block">Login</a>
<!--btn-block 平铺效果-->
</div>
<div class="col-sm-6">
<a href="#about?name=haha" class="btn btn-success btn-block">About</a>
<!--传参-->
</div>
</div>
<!--显示模板内容的占位符 ng-view -->
<div class="focus" ng-view></div>
<div class="row">
<div class="col-sm-6">
<script id="login.html" type="text/ng-template">
<!--Login-->
<form>
script id ==login.html
<legend>
<caption>{{loginTitle}}</caption>
</legend>
<div class="form-group">
<label class="control-label" for = "username" >username</label>
<input type="text" class="form-control" id="username">
</div>
</form>
<p>
<button type="submit" class="btn btn-block btn-primary">btn</button>
</p>
</script>
</div>
<div class="col-sm-6">
<script id="about.html" type="text/ng-template">
<!--About-->
this is script id about.html
<blockquote><h2>{{aboutTitle}}</h2></blockquote>
<div class="thumbnail">
<img class="img-responsive" alt="" src="images/Koala.jpg" />
<div class="caption">
<h4>About me</h4>
<p>这是图片的描述信息</p>
</div>
</div>
</script>
</div>
</div>
<div style="clear:both;margin-bottom: 100px;"></div>
</div>
<script>
var app=angular.module("app1",['ngRoute']); // 添加路由
app.controller("test",testController).
controller("loginCtrl",loginController)
.controller("aboutCtrl",aboutController)
.controller("welcomeCtrl",welcomeController)
// 路由配置
app.config(["$routeProvider", function ($routeProvider) {
$routeProvider
.when("/welcome",{
templateUrl:"../test/welcome.html", // 设置一个默认的
controller:"welcomeCtrl"
})
.when("/login",{
templateUrl:"login.html", // 找 script id
controller:"loginCtrl"
})
.when("/about",{
templateUrl:"../test/about.html",// 具体文件所在路径,找具体文件
controller:"aboutCtrl"
})
.otherwise({
redirectTo:"/welcome"
});
}]);
function testController($scope){
$scope.msg="test123";
}
function loginController($scope){
$scope.loginTitle='user login';
}
function aboutController($scope,$routeParams){ /*控制器可用在对应的html中，也可用在script里对应的html中*/
$scope.aboutTitle='about me';
$scope.name=$routeParams.name; // 接收传递的参数
}
function welcomeController($scope,$routeParams){
$scope.userName = $routeParams.userName;
}
</script>
</body>
</html>angularJS 2.3 route 2.0
<!DOCTYPE html>
<html lang="zh-CN" data-ng-app="bookApp">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>angular route</title>
<link href="../bootstrap/css/bootstrap.min.css" rel="stylesheet">
<!--[if lt IE 9]>
<script src="../bootstrap/html5shiv.min.js"></script>
<script src="../bootstrap/respond.min.js"></script>
<![endif]-->
<script src="../scripts/jquery-1.12.2.min.js"></script>
<script src="../bootstrap/js/bootstrap.min.js"></script>
<!--angularJS 1.4 并引入route.js -->
<script src="../scripts/angular.min.js"></script>
<script src="../scripts/angular-route.min.js"></script>
</head>
<body>
<div class="container">
<div ng-controller="resultCtrl"> {{name}}</div>
<div ng-view></div> <!--需要写一个ng-view来显示路由页面-->
</div>
<script>
var app=angular.module("bookApp",['ngRoute']); // 添加路由
// 路由配置
app.config(["$routeProvider", function ($routeProvider) {
$routeProvider
.when("/search",{
templateUrl:"../test/searchBook.html"
})
.when("/result",{
templateUrl:"../test/resultBook.html",
controller:"resultCtrl"
})
.otherwise({
redirectTo:"/search"
});
}]);
app.controller("resultCtrl", function ($scope,$http,$routeParams) {
$scope.name='name123';
$scope.title=$routeParams.t;
$http.get("books.json")
.success(function (r) {
for(var i=0;i< r.length;i++){
if(r[i].Title==$scope.title){
$scope.book= r[i];
}
}
});
})
</script>
</body>
</html>2.0对应的searchBook.html
<h2>searchBook.html </h2>
<div class="row">
<div class="col-sm-6">
<input ng-model="myTitle" type="search" class="form-control">
</div>
<div class="col-sm-2">
<a href="#result?t={{myTitle}}" class="btn btn-primary"><span class="glyphicon glyphicon-search"></span> Search</a>
<!--指向路由的 #result-->
</div>
</div>2.0对应的resultBook.html
<h2>{{book.Title}}<br>{{book.Author}}<br>{{book.Price}}</h2><br/>
<!--以下为复制版-->
<div class="panel panel-info">
<div class="panel-heading">
<a href="#search" class="btn btn-success">返回</a> <!--链接回路径地址-->
</div>
<div class="panel-body">
<div class="thumbnail">
<div class="col-sm-6">
<img alt="{{book.Title}}" ng-src="images/Koala.jpg"
class="img-responsive img-rounded">
<div class="caption">
<blockquote class="blockquote-reverse">
<h2>{{book.Title}}</h2>
<footer>
{{book.Author}}
</footer>
</blockquote>
</div>
</div>
<div class="col-sm-6">
<h1 class="page-header"><small>类别名称</small> {{book.Category.Name}} </h1>
<h3><small class="label label-danger"> 原始价格：{{book.Price | currency}} </small> <span class="label label-success"> 会员价格：{{book.Price * 0.8 | currency}} </span></h3>
<h3 class="well"> 出版日期：{{book.PubDate | date:"yyyy-MM-dd"}} </h3>
<br>
<br>
<button class="btn btn-primary btn-lg btn-block">
<span class="glyphicon glyphicon-shopping-cart"></span>
添加到购物车
</button>
</div>
</div>
</div>
</div>angularJS directive 自定义标签
<!DOCTYPE html>
<html lang="zh-CN" data-ng-app="myApp">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>angular route</title>
<link href="../bootstrap/css/bootstrap.min.css" rel="stylesheet">
<!--[if lt IE 9]>
<script src="../bootstrap/html5shiv.min.js"></script>
<script src="../bootstrap/respond.min.js"></script>
<![endif]-->
<script src="../scripts/jquery-1.12.2.min.js"></script>
<script src="../bootstrap/js/bootstrap.min.js"></script>
<!--angularJS 1.4 并引入route.js -->
<script src="../scripts/angular.min.js"></script>
<script src="../scripts/angular-route.min.js"></script>
</head>
<body>
<div class="container">
{{1+2}}
<div ng-controller="test">
<my res="name"></my> <!--res = 控制器的属性值-->
<booklist res="books"></booklist> <!--booklist 标签不能大写。。。。。-->
</div>
</div>
</body>
</html>
<script>
angular.module("myApp",[])
.directive("my", function () { //标签
var d={};
d.scope={i:"=res"}; // 用 i 来调最终的数据 json值
d.template='<button type="button" class="btn btn-primary">{{i.key}}</button>12';
d.compile=function(element){ // 添加样式
element.css({"font-size":"40px","color":"red","border":"1px solid green"});
}
return d;
})
.directive("booklist", function () { //标签
var d={};
d.scope={i:"=res"}; // 用 i 来调最终的数据 json值
d.template='<ul><li ng-repeat="book in i">{{book.Title}}</li></ul>';
return d;
})
.controller("test", function ($scope,$http) {
$scope.name={key:"button001"}; //最终的数据 key:"xiao"
$http.get("books.json")
.success(function (r) {
$scope.books=r;
});
});
</script>angularJS 小游戏。。。
<!DOCTYPE html>
<html lang="zh-CN" data-ng-app="myApp">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>angular route</title>
<link href="../bootstrap/css/bootstrap.min.css" rel="stylesheet">
<!--[if lt IE 9]>
<script src="../bootstrap/html5shiv.min.js"></script>
<script src="../bootstrap/respond.min.js"></script>
<![endif]-->
<script src="../scripts/jquery-1.12.2.min.js"></script>
<script src="../bootstrap/js/bootstrap.min.js"></script>
<!--angularJS 1.4 并引入route.js -->
<script src="../scripts/angular.min.js"></script>
<script src="../scripts/angular-route.min.js"></script>
</head>
<body>
<div class="container">
<section>
<joke></joke>
<joke></joke>
<joke></joke>
<joke></joke>
</section>
<script>
angular.module("myApp", [])
.directive("joke", function() {
var d = {};
d.template="<div class='focus'>一碰我就跑~~来点我啊~~</div>"
var maxLeft = 400, maxTop = 300;
var msg = ["我闪~~", "抓我呀~~~", "雅蠛蝶~~", "噢耶~~", "你真逊~！", "就差那么一点点了！", "继续吧~~总有一天我会累的"];
d.compile = function(element, attributes) {
element.css({
"position" : "absolute",
"border" : "1px solid green"
}).addClass("focus");
element.bind("mouseenter", function(event) {
element.css({
"left" : parseInt(Math.random() * 10000 % maxLeft) + "px",
"top" : parseInt(Math.random() * 10000 % maxTop) + "px"
}).text(msg[parseInt(Math.random() * 10000 % msg.length)]);
}).bind("click", function(event) {
element.text("噢My Lady Gaga。。。被你逮到了。。。");
element.unbind("mouseenter");
});
}
return d;
})
</script>
</div>
</body>
</html>angularJS 进度条。。
<!DOCTYPE html>
<html lang="zh-cn" data-ng-app="myApp">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<title>angularjs</title>
<link rel="stylesheet" href="bootstrap/css/bootstrap.css" />
<link rel="stylesheet/less" href="styles/site.less">
<script src="scripts/jquery.js"></script>
<script src="bootstrap/js/bootstrap.js"></script>
<script src="scripts/less.js"></script>
<script src="scripts/angular.js"></script>
<script src="scripts/angular-route.js"></script>
</head>
<body class="container">
<header class="page-header"><h1>index</h1></header>
<section>
<div class="progress">
<div class="progress-bar progress-bar-striped active"
ng-class="c" style="width:{{r}}">{{r}}</div>
</div>
<div class="btn btn-group">
<button ng-click="r='25%';c='progress-bar-success'"
type="button"
class="btn btn-success">25%</button>
<button ng-click="r='60%';c='progress-bar-warning'" type="button" class="btn btn-warning">60%</button>
<button ng-click="r='85%';c='progress-bar-danger'" type="button" class="btn btn-danger">85%</button>
</div>
</section>
<script>
angular.module("myApp",[]);
</script>
<footer class="navbar-fixed-bottom text-center">
<span>© 2015</span>
</footer>
</body>
</html>angularJS factory service
<!DOCTYPE html>
<html lang="zh-CN" data-ng-app="myApp">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>angular route</title>
<link href="../bootstrap/css/bootstrap.min.css" rel="stylesheet">
<!--[if lt IE 9]>
<script src="../bootstrap/html5shiv.min.js"></script>
<script src="../bootstrap/respond.min.js"></script>
<![endif]-->
<script src="../scripts/jquery-1.12.2.min.js"></script>
<script src="../bootstrap/js/bootstrap.min.js"></script>
<!--angularJS 1.4 并引入route.js -->
<script src="../scripts/angular.min.js"></script>
<script src="../scripts/angular-route.min.js"></script>
</head>
<body>
<div class="container">
<h1 class="page-header text-primary">factory service value</h1>
<div ng-controller="test">
<!-- {{test}}<br>-->
<input type="text" ng-model="name">
<span>{{email}}</span>
<input type="text" ng-model="fn">
<input type="text" ng-model="ln">
{{fullName}}
<button type="button" ng-click="show()">btn</button>
</div>
</div>
</body>
</html>
<script>
angular.module("myApp",[])
.value("defalutEmail","@qq.com") // value 定义全局变量，提供给多个controller调用
.value("fname","ha")
.value("lname","he")
.factory("myFactory", function () { //定义 工厂 底层代码复用
var f={};
f.joinStr= function (a,b) {
return a+b;
}
return f;
})
.service("myService", function (myFactory) { // 定义服务,调用工厂 业务处理
this.getEmail= function (m,n) { // 用 this
return myFactory.joinStr(m,n);
}
this.getFullName= function (f,l) {
return myFactory.joinStr(f,l);
}
})
.controller("test", function ($scope,defalutEmail,myService,fname,lname) { // 控制器调用 服务
// $scope.test=defalutEmail;
$scope.name="admin";
$scope.email=myService.getEmail($scope.name,defalutEmail);
$scope.$watch("name", function (to, from) { // to from 用不到。。
$scope.email=myService.getEmail($scope.name,defalutEmail); // 再写一次。。
});
$scope.fn=fname;
$scope.ln=lname;
$scope.fullName=myService.getFullName($scope.fn,$scope.ln);
/* $scope.$watch("fn", function (to, from) { // $watcｈ 只能监听一个
$scope.fullName=myService.getFullName($scope.fn,$scope.ln);
});*/
$scope.show= function () { // 用 ng-click
$scope.fullName=myService.getFullName($scope.fn,$scope.ln);
}
});
</script>books.json
[
{
"Id": 1,
"Title": "JAVA LOGIC",
"Author": "Oracle",
"Price": 10.9999999,
"PubDate": "2010-01-01",
"Category": {
"Id": 1,
"Name": "计算机类"
}
},
{
"Id": 2,
"Title": "HTML",
"Author": "W3C",
"Price": 20.99,
"PubDate": "2010-02-01",
"Category": {
"Id": 1,
"Name": "计算机类"
}
},
{
"Id": 3,
"Title": "SQL BASIC",
"Author": "Microsoft",
"Price": 30.99,
"PubDate": "2010-03-01",
"Category": {
"Id": 1,
"Name": "计算机类"
}
},
{
"Id": 4,
"Title": "C# LOGIC",
"Author": "Microsoft",
"Price": 40.99,
"PubDate": "2010-04-01",
"Category": {
"Id": 1,
"Name": "计算机类"
}
},
{
"Id": 5,
"Title": "JAVA OOP",
"Author": "Oracle",
"Price": 50.99,
"PubDate": "2010-05-01",
"Category": {
"Id": 1,
"Name": "计算机类"
}
},
{
"Id": 6,
"Title": "JAVASCRIPT",
"Author": "W3C",
"Price": 10.99,
"PubDate": "2010-01-01",
"Category": {
"Id": 1,
"Name": "计算机类"
}
},
{
"Id": 7,
"Title": "JSP",
"Author": "Oracle",
"Price": 20.99,
"PubDate": "2010-02-01",
"Category": {
"Id": 1,
"Name": "计算机类"
}
},
{
"Id": 8,
"Title": "SQL ADVANCE",
"Author": "Microsoft",
"Price": 30.99,
"PubDate": "2010-03-01",
"Category": {
"Id": 1,
"Name": "计算机类"
}
},
{
"Id": 9,
"Title": "C# OOP",
"Author": "Microsoft",
"Price": 40.99,
"PubDate": "2010-04-01",
"Category": {
"Id": 1,
"Name": "计算机类"
}
},
{
"Id": 10,
"Title": "NTIER",
"Author": "Microsoft",
"Price": 50.99,
"PubDate": "2010-05-01",
"Category": {
"Id": 1,
"Name": "计算机类"
}
},
{
"Id": 11,
"Title": "ASP.NET",
"Author": "Microsoft",
"Price": 10.99,
"PubDate": "2010-01-01",
"Category": {
"Id": 1,
"Name": "计算机类"
}
},
{
"Id": 12,
"Title": "AJAX",
"Author": "Microsoft",
"Price": 20.99,
"PubDate": "2010-02-01",
"Category": {
"Id": 1,
"Name": "计算机类"
}
},
{
"Id": 13,
"Title": "HIBERNATE",
"Author": "Oracle",
"Price": 30.99,
"PubDate": "2010-03-01",
"Category": {
"Id": 1,
"Name": "计算机类"
}
},
{
"Id": 14,
"Title": "STRUTS",
"Author": "Oracle",
"Price": 40.99,
"PubDate": "2010-04-01",
"Category": {
"Id": 1,
"Name": "计算机类"
}
},
{
"Id": 15,
"Title": "SPRING",
"Author": "Oracle",
"Price": 50.99,
"PubDate": "2010-05-01",
"Category": {
"Id": 1,
"Name": "计算机类"
}
},
{
"Id": 16,
"Title": "西游记",
"Author": "吴承恩",
"Price": 10.99,
"PubDate": "2010-01-01",
"Category": {
"Id": 2,
"Name": "文学类"
}
},
{
"Id": 17,
"Title": "三国演义",
"Author": "罗贯中",
"Price": 20.99,
"PubDate": "2010-02-01",
"Category": {
"Id": 2,
"Name": "文学类"
}
},
{
"Id": 18,
"Title": "水浒传",
"Author": "施耐庵",
"Price": 30.99,
"PubDate": "2010-03-01",
"Category": {
"Id": 2,
"Name": "文学类"
}
},
{
"Id": 19,
"Title": "红楼梦",
"Author": "曹雪芹",
"Price": 40.99,
"PubDate": "2010-04-01",
"Category": {
"Id": 2,
"Name": "文学类"
}
},
{
"Id": 20,
"Title": "傲慢与偏见",
"Author": "简奥斯汀",
"Price": 10.99,
"PubDate": "2010-01-01",
"Category": {
"Id": 2,
"Name": "文学类"
}
},
{
"Id": 21,
"Title": "呼啸山庄",
"Author": "艾米莉勃朗特",
"Price": 20.99,
"PubDate": "2010-02-01",
"Category": {
"Id": 2,
"Name": "文学类"
}
},
{
"Id": 22,
"Title": "战争与和平",
"Author": "列夫托尔斯泰",
"Price": 30.99,
"PubDate": "2010-03-01",
"Category": {
"Id": 2,
"Name": "文学类"
}
},
{
"Id": 23,
"Title": "红与黑",
"Author": "司汤达",
"Price": 40.99,
"PubDate": "2010-04-01",
"Category": {
"Id": 2,
"Name": "文学类"
}
},
{
"Id": 24,
"Title": "灰姑娘",
"Author": "格林",
"Price": 10.99,
"PubDate": "2010-01-01",
"Category": {
"Id": 3,
"Name": "儿童类"
}
},
{
"Id": 25,
"Title": "卖火柴的小女孩",
"Author": "格林",
"Price": 20.99,
"PubDate": "2010-02-01",
"Category": {
"Id": 3,
"Name": "儿童类"
}
},
{
"Id": 26,
"Title": "白雪公主",
"Author": "格林",
"Price": 30.99,
"PubDate": "2010-03-01",
"Category": {
"Id": 3,
"Name": "儿童类"
}
},
{
"Id": 27,
"Title": "睡美人",
"Author": "格林",
"Price": 40.99,
"PubDate": "2010-04-01",
"Category": {
"Id": 3,
"Name": "儿童类"
}
},
{
"Id": 28,
"Title": "小红帽",
"Author": "安徒生",
"Price": 10.99,
"PubDate": "2010-05-01",
"Category": {
"Id": 3,
"Name": "儿童类"
}
},
{
"Id": 29,
"Title": "拇指姑娘",
"Author": "安徒生",
"Price": 20.99,
"PubDate": "2010-06-01",
"Category": {
"Id": 3,
"Name": "儿童类"
}
},
{
"Id": 30,
"Title": "青蛙王子",
"Author": "安徒生",
"Price": 30.99,
"PubDate": "2010-07-01",
"Category": {
"Id": 3,
"Name": "儿童类"
}
},
{
"Id": 31,
"Title": "海的女儿",
"Author": "安徒生",
"Price": 40.99,
"PubDate": "2010-08-01",
"Category": {
"Id": 3,
"Name": "儿童类"
}
}
]
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 使用Yeoman搭建 AngularJS 应用 (10) —— 让我们搭建一个网页应用
- AngularJs 第一个自定义指令编写
- 使用Yeoman搭建 AngularJS 应用 (9) —— 让我们搭建一个网页应用
- angular filter ng-repeat 用法
- 使用Yeoman搭建 AngularJS 应用 (8) —— 让我们搭建一个网页应用
- AngularJS的学习--$on、$emit和$broadcast的使用
- ionic入门之AngularJS扩展
- AngularJS学习笔记之基本指令(init、repeat)
- 使用Yeoman搭建 AngularJS 应用 (7) —— 让我们搭建一个网页应用
- angularjs 本地数据存储LocalStorage
- 使用Yeoman搭建 AngularJS 应用 (6) —— 让我们搭建一个网页应用
- 为SpringMvc项目安装BootStrap和AngularJs前端框架
- AngularJS中实现用户访问的身份认证和表单验证功能
- 在AngularJS中使用jQuery的zTree插件的方法
- angularjs弹出层
- AngularJs 2.0
- Angularjs基础(五)
- 使用Yeoman搭建 AngularJS 应用 (5) —— 让我们搭建一个网页应用
- Angular浏览器插件Batarang介绍
- 使用Yeoman搭建 AngularJS 应用 (4) —— 让我们搭建一个网页应用