angularJS 二
angularJS 2.1 ngForm
<!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="data: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="data: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="data: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": "儿童类"
}
}
]
angularJS 二的更多相关文章
- 走进AngularJs(二) ng模板中常用指令的使用方式
通过使用模板,我们可以把model和controller中的数据组装起来呈现给浏览器,还可以通过数据绑定,实时更新视图,让我们的页面变成动态的.ng的模板真是让我爱不释手.学习ng道路还很漫长,从模板 ...
- AngularJS 二 指令介绍
初始化AngularJS框架 ng-app指令: 在NG-程序指令是AngularJS应用程序的起点.它自动初始化AngularJS框架.AngularJS框架将在加载整个文档之后首先检查HTML文档 ...
- AngularJs (二) 搭建Deployd 服务爬坑
Deployd 爬坑 按照书上的教程,介绍Deployd 这个东东,首先进入其deployd.com/网页,发现这个东东着实厉害. THE SIMPLEST WAY TO BUILD AN API 按 ...
- Mastering Web Application Development with AngularJS 读书笔记-前记
学习AngularJS的笔记,这个是英文版的,有些地方翻译的很随意,做的笔记不是很详细,用来自勉.觉得写下来要比看能理解的更深入点.有理解不对的地方还请前辈们纠正! 一.关于<Mastering ...
- 前端MVC学习总结（二）——AngularJS验证、过滤器、指令
一.验证 angularJS中提供了许多的验证指令,可以轻松的实现验证,只需要在表单元素上添加相应的ng属性,常见的如下所示: <input Type="text" ng-m ...
- AngularJs的UI组件ui-Bootstrap分享（十二）——Rating
Rating是一个用于打分或排名的控件.看一个最简单的例子: <!DOCTYPE html> <html ng-app="ui.bootstrap.demo" x ...
- angularjs（二）模板终常用的指令的使用方法
通过使用模板,我们可以把model和controller中的数据组装起来呈现给浏览器,还可以通过数据绑定,实时更新视图,让我们的页面变成动态的.ng的模板真是让我爱不释手.学习ng道路还很漫长,从模板 ...
- Angularjs学习笔记（二）----模块
一.定义 如何将全局定义的控制器模块化 先看下全局定义的控制器 var HelloCtrl=function($scope){ $scope.name='World'; } 模块化后代码 angula ...
- Mastering Web Application Development with AngularJS 读书笔记(二)
第一章笔记 (二) 一.scopes的层级和事件系统(the eventing system) 在层级中管理的scopes可以被用做事件总线.AngularJS 允许我们去传播已经命名的事件用一种有效 ...
随机推荐
- VB 编程
error播放出错提示音 errorPromptVoice() 返回一个字符串,其中包含从某个字符串右端开始的指定数量的字符 Microsoft.VisualBasic.Right(strBt45Te ...
- Java拼接批量新增SQL语句
StringBuffer addSql = new StringBuffer(1000); int batchSize = 50; int executeTime = 0; SimpleDateFor ...
- IntelliJ IDEA 常用快捷键列表及技巧大全
IntelliJ Idea 常用快捷键列表 Alt+回车 导入包,自动修正Ctrl+N 查找类Ctrl+Shift+N 查找文件Ctrl+Alt+L 格式化代码Ctrl+Alt+O 优化导入的类和 ...
- 76 binary_search 查找重复元素
[本文链接] http://www.cnblogs.com/hellogiser/p/binary-search-for-repeated-element.html [题目] 给定一个升序排列的自然数 ...
- Redis集群的部署
Redis集群分为主节点Master和从节点Slave,主节点只有1个,而从节点可以有多个,这样从节点和主节点可以进行数据的传输,Redis集群的性能将比单机环境更高,接下来是配置的过程 首先配置Ma ...
- 10. javacript高级程序设计-DOM
1. DOM DOM(文档对象模型)是针对HTML和XML文档的一个API(应用程序接口) 1.1 节点层次 DOM可以将任何HTML和XML文档描绘成一个由多层节点构成的结构.节点分为几种不同的类型 ...
- 【转】Java-----jar反编译修改重新打包
原文链接:http://blog.csdn.net/hekewangzi/article/details/44676797 一.使用反编译工具JD-GUI(JD-GUI相关操作见Java-----反编 ...
- hdu 1896.Stones 解题报告
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1896 题目意思:给出 n 块石头的初始位置和能到达的距离.对于第奇数次遇到的石头才抛掷,偶数次的就忽略 ...
- mysql中Access denied for user 'root'@'localhost' (using password:YES)
关于昨天下午说的MySQL服务无法启动的问题,解决之后没有进入数据库,就直接关闭了电脑. 今早打开电脑,开始-运行 输入“mysql -uroot -pmyadmin”后出现以下错误: “Access ...
- ocx文件转换成C#程序引用的DLL
将ocx文件转换成C#程序引用的DLL文件的办法 将ocx文件转换成C#程序引用的DLL文件的办法,需要的朋友可以参考一下 1.打开VS2008或VS2010命令提示符(此例用VS2008) 将o ...