1.实现定时功能的效果:
相当于 java 中的 handler 延时效果
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="angular-1.3.0.js"></script>
<title></title>
</head>
<body ng-app="myApp">
<div ng-controller="myCtrl">
<div>{{ nowtime }}</div>
<div>等待5秒显示的文字:{{ mytext }}</div>
</div>
<script>
var nowtime = function () {
//获取到本地时间
return new Date().toLocaleDateString() + " " + new Date().toLocaleTimeString();
};
//$scope : 是一个JavaScript对象,带有属性和方法,这些属性和方法可以在视图和控制器中使用。
//$interval : 用来处理间歇性的事情,例如:定时器的功能
//$timeout : 取消与承诺相关联的任务,例如:执行自定义的某种方法来抵消定时功能,在定时结束后执行
var app = angular.module("myApp", []);
app.controller("myCtrl", function ($scope, $interval, $timeout) {
//获取本地时间,每秒刷新一次
$interval(function () {
$scope.nowtime = nowtime();
}, 1000);
//定时功能,五秒后自动输出“Java B C”文字样式
$timeout(function () {
$scope.mytext = "Java B C";
}, 5000);
});
</script>
</body>
</html>
2.使用 angularJS 输出 .json 中的信息:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="angular-1.3.0.js"></script>
<title></title>
<script type="text/javascript">
var app = angular.module("myApp", []);
//将 .json 文件添加到 app标签中
app.value("url_book", "book.json");
app.value("url_books", "books.json");
---->//.then()方法是异步执行
| //就是当.then()前的方法执行完后再执行then()内部的程序
| //这样就避免了,数据没获取到等的问题
|
| app.controller("bookCtrl", function ($scope, $http) {
| //Response 对象用于从服务器向用户发送输出的结果
----> $http.get("book.json").then(function (response) {
$scope.book = response.data; //从输出消息中读取响应数据
//将json中的信息传入到scope.book中
}, function (response) {
console.log(response.status); //Status 属性规定由服务器返回的状态行的值
//例如:
//response.Status="401 Unauthorized"//登录时账号密码有问题,会提示401错误
//response.Write(response.Status)
//response.End
});
});
app.controller("booksCtrl", function ($scope, $http) {
$http.get("books.json").then(function (response) {
$scope.books = response.data;
}, function (response) {
console.log(response.status);
});
});
</script>
</head>
<body ng-app="myApp">
<div ng-controller="bookCtrl">
<ul>
<li>ID:{{ book.id }}</li>
<li>标题:{{ book.title }}</li>
<li>类型:{{ book.type }}</li>
<li>描述:{{ book.description }}</li>
<li>图片:<img src="{{ book.picture }}"/></li>
<li>是否推荐:{{ book.isRecommend }}</li>
<li>上架时间:{{ book.dtCreated }}</li>
</ul>
</div>
<div ng-controller="booksCtrl">
<table border="1">
<tr>
<th>ID</th>
<th>标题</th>
<th>类型</th>
<th>描述</th>
<th>图片</th>
<th>推荐</th>
<th>创建时间</th>
</tr>
<tbody ng-repeat="book in books">
<tr>
<td>{{book.id}}</td>
<td>{{book.title}}</td>
<td>{{book.type}}</td>
<td>{{book.description}}</td>
<td>
<img src="{{book.picture}}" width="80px" height="80px"/>
</td>
<td>
<i ng-if="book.isRecommend">是</i>
<i ng-if="!book.isRecommend">否</i>
</td>
<td>{{book.dtCreated}}</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>