zoukankan      html  css  js  c++  java
  • Angular——内置服务

    $location

    <!DOCTYPE html>
    <html lang="en" ng-app="App">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
    <ul ng-controller="DemoController">
        <li>{{absUrl}}</li>
        <li>{{url}}</li>
        <li>{{host}}</li>
        <li>{{search}}</li>
        <li>{{hash}}</li>
        <li>{{protocol}}</li>
        <li>{{port}}</li>
    </ul>
    <script src="../libs/angular.min.js"></script>
    <script>
        var App = angular.module('App', []);
        App.controller('DemoController', ['$scope', '$location', function ($scope, $location) {
            $scope.absUrl = $location.absUrl();
            $scope.url = $location.url();
            $scope.host = $location.host();
            $scope.search = $location.search();
            $scope.hash = $location.hash();
            $scope.protocol = $location.protocol();
            $scope.prot = $location.port();
        }]);
        //url 是锚点 # 之后的东西
        //search 是锚点#之后的?之后的参数的键值对,原始的search就是在?之后
        //hash 是锚点,但是在angular中,锚点指的是第一个#之后,第二个#之后的内容
        for (key in location) {
            console.log(key + '===' + location[key])
        }
    </script>
    </body>
    </html>

    $timeout、$interval

    <!DOCTYPE html>
    <html lang="en" ng-app="App">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
    <ul ng-controller="DemoController">
        <li>{{time|date:'yy-MM-dd'}}</li>
        <li>{{text}}</li>
        <li>
            <button ng-click="stop()">停止</button>
        </li>
    </ul>
    <script src="../libs/angular.min.js"></script>
    <script>
        var App = angular.module('App', []);
        App.controller('DemoController', ['$scope', '$timeout', '$interval', function ($scope, $timeout, $interval) {
            $timeout(function () {
                $scope.time = new Date();
            }, 1000);
            var num = 0;
            var timer = $interval(function () {
                num++;
                $scope.text = num;
            }, 1000);
            $scope.stop = function () {
                $interval.cancel(timer);
            }
        }]);
    </script>
    </body>
    </html>

    $filter

    <!DOCTYPE html>
    <html lang="en" ng-app="App">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
    <ul ng-controller="DemoController">
        <li>{{price}}</li>
        <li>{{text}}</li>
        <li>{{value}}</li>
    </ul>
    <script src="../libs/angular.min.js"></script>
    <script>
        var App = angular.module('App', []);
        App.controller('DemoController', ['$scope', '$filter', function ($scope, $filter) {
            var currency = $filter('currency');
            $scope.price = currency(11.11);
            $scope.text = $filter('uppercase')('hello');
            $scope.value = $filter('limitTo')('hello', 2);
        }]);
    </script>
    </body>
    </html>

    $log  

    <!DOCTYPE html>
    <html lang="en" ng-app="App">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
    <ul ng-controller="DemoController">
    </ul>
    <script src="../libs/angular.min.js"></script>
    <script>
        var App = angular.module('App', []);
        App.controller('DemoController', ['$scope', '$log', function ($scope, $log) {
    
            $log.info('普通信息');
    
            $log.warn('警告信息');
    
            $log.error('错误信息');
    
            $log.log('打印信息');
    
            $log.debug('调试信息');
    
        }]);
    </script>
    </body>
    </html>
  • 相关阅读:
    复习总结
    python 之Tornado
    MySQL 同一Windows系统上安装多个数据库
    CSS 轻松搞定元素(标签)居中问题
    Linux 解决Deepin深度系统无法在root用户启动Google Chrome浏览器的问题
    Django Windows+IIS+wfastcgi 环境下部署
    Django RestFramework(DRF)类视图
    php+ajax实现拖动滚动条分批加载请求加载数据
    Jquery+php鼠标滚动到页面底部自动加载更多内容,使用分页
    jQuery+ajax实现滚动到页面底部自动加载图文列表效果
  • 原文地址:https://www.cnblogs.com/wuqiuxue/p/8423256.html
Copyright © 2011-2022 走看看