AngularJS基础练习（3）

最新推荐文章于 2018-10-14 23:07:00 发布

人走丿茶凉

最新推荐文章于 2018-10-14 23:07:00 发布

阅读量260

点赞数

分类专栏： html5+css3 javascript 文章标签： angularjs java

本文链接：https://blog.csdn.net/luck_whr/article/details/78226785

版权

html5+css3 同时被 2 个专栏收录

23 篇文章 1 订阅

订阅专栏

javascript

22 篇文章 1 订阅

订阅专栏

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>

人走丿茶凉

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
AngularJS基础练习（3）

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
复制链接

扫一扫