search

Home >Web Front-end >JS Tutorial >How to get built-in services to obtain local information in Angular

How to get built-in services to obtain local information in Angular

一个新手
一个新手Original
2017-10-14 09:10:381683browse

We used angular to set a timer before. Today we will do some exercises based on the timer.

Use the built-in service to obtain the following information:

1. Get the screen height

2. Get the screen width

3.Get the pagetitle

4.GetURLProtocol

5.GetURLHost

6. Get the port number

7.Get the hash part of URL

8.Get the access address, that is, URLAddress

##Other requirements:

1. The height and width are displayed 2 seconds after opening the page

2.title, protocol, host will be displayed 3 seconds after opening the page

3. Port number, url address will be displayed 5 seconds after opening the page After that, a prompt box will pop up asking whether to display it. If you click yes, it will be displayed. Otherwise, it will not be displayed.

Source code:

##

<!DOCTYPE html><html><head>
    <meta charset="UTF-8">
    <script type="text/javascript" src="angular-1.3.0.js"></script>
    <title>day12日考</title></head><body ng-app="myApp"><p ng-controller="myCtrl">
    <p>屏幕有效的宽度（单位：像素）:{{ width }}</p>
    <p>屏幕有效的高度（单位：像素）:{{ height }}</p>
    <p>页面title:{{ title }}</p>
    <p>URL主机:{{ host }}</p>
    <p>URL协议:{{ protocol }}</p>
    <p>端口:{{ port }}</p>
    <p>URL的hash部分:{{ hash }}</p>
    <p>URL地址:{{ href }}</p></p><script>
    var nowtime = function () {        return new Date().toLocaleDateString() + " " + new Date().toLocaleTimeString();
    };    var app = angular.module("myApp", []);    app.controller("myCtrl", function ($scope, $interval, $timeout) {
        $interval(function () {
            $scope.width = screen.availWidth;
            $scope.height = screen.availHeight;
        }, 2000);

        $timeout(function () {
            $scope.title = document.title;
            $scope.host = location.host;
            $scope.protocol = location.protocol;
        }, 3000);

        $timeout(function () {            var msg = "是否显示？";            if (confirm(msg)==true){
                $scope.port = window.location.port;
                $scope.hash = location.hash;
                $scope.href = window.location.href;
            }else{                alert("你选择了不展示");
            }
        }, 5000);
    });</script></body></html>

The above is the detailed content of How to get built-in services to obtain local information in Angular. For more information, please follow other related articles on the PHP Chinese website!

Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：How to implement single-select, multiple-select and reverse-select in forms in ReactJSNext article：How to implement single-select, multiple-select and reverse-select in forms in ReactJS

Related articles

See more