2. 程式人生 > >Angular內建服務

Angular內建服務

阿新 • • 發佈：2019-02-16

一、$http

$http是對Ajax（XHR）的封裝。這裡介紹3種用法。

1、GET請求的用法：

$http.get(url)
    .success(function (data) { 
        // 這裡的data是一個object，是我們想要的資料部分，不包含狀態碼等
        // 成功的回撥
    }).error(function (err) {
    // 出錯的回撥
});
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7

2、POST請求的用法也差不多，只是多了引數：

var url = "...";
var postData = {
    id: "123",
    token: "x1234q3412fwdfw3r23"
 

};
$http.post(url, postData)
    .success(function (data) { 
        // 成功的回撥
    }).error(function (err) {
    // 出錯的回撥
});
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11

題外話：這裡post請求的引數的資料型別，預設是“application/json”，而jQuery的post預設用的“application/x-www-form-urlencoded”。

3、jsonp：

如果不甚瞭解jsonp，可以看下這裡：http://kb.cnblogs.com/page/139725/。 
簡單來說，因為同源策略的存在，Ajax指令碼不能跨域訪問資源，所以我們只能把回撥函式作為引數之一傳給伺服器，讓伺服器端返回資料的時候指定呼叫我們的回撥函式。所以，我們只需要把回撥函式寫好就可以了，在這裡，我們寫在success中：

// 在jsonp中，url的最後必須嚴格帶上“&callback=JSON_CALLBACK”，而且名字不能改
var url = "http://www.phonegap100.com/appapi.php?a=getPortalList&catid=20&page=1&callback=JSON_CALLBACK";

$http.jsonp(url)
       .success(function (data) { // 在這裡定義JSON_CALLBACK。其實與GET差不多
            console.log('jsonp:', data)
        })
        .error(function
 
 (err) {
            console.log('error', err);
        });
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10

此外，put、delete等，可以直接看手冊，這裡就不多說了。而且，格式都是差不多的： 
AngularJS手冊

二、$location（配合$anchorScroll）

  • 簡介：使用$location可以得到當前頁面url的引數。使用者對於Url做出的改變，會通知到$location中，而$location對Url的一些操縱也會反映到位址列上面。

  • 方法： 
    $location服務的方法

1、沒有引數時，作為getter，獲取url資訊：

在controller中注入$location服務，打印出來各個方法（程式碼就不掩飾了，直接貼結果）： 
$location列印資訊

2、有引數的時候，作為setter，（部分地）改變當前url：

上面我們看到，這些方法不填入引數的話，是作為getter使用。而其中有4個方法，當填入引數的時候可以作為url的setter來使用，並且返回該$location服務（以便鏈式呼叫），這4個方法可以從上面截圖中看到： 
- $location.url(urlValue) 
- $location.path(pathValue) 
- $location.hash(hashValue) 
- $location.search(paramObj)

例子：

// 假定原來的完整url為：
// http://localhost:63342/test/templates/demo01.html#/tabs/chat?name=JK&age=10#noHash


var url = $location.url("url2").absUrl();
// 到這裡變成：
// http://localhost:63342/test/templates/demo01.html#/url2


url = $location.path("path2")
    .search({
        name: "CL",
        age: 12
    })
    .hash('hash2')
    .absUrl();
// 到這裡變成：
// http://localhost:63342/test/templates/demo01.html#/path2?name=CL&age=12#hash2
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18

3、對$location.hash([id])的特別說明：

$location的hash方法填入一個DOM元素的id值，可以快速定位到該DOM元素。比如以下程式。 
程式說明：設定5個div，通過點選5個列表項可以快速定位到這5個div： 
demo01.html：

<div id="parent" ng-controller="firstController">

    <!--以下為5個列表項，可以點選，以改變hash值，定位到某個div塊-->
    <ol>
        <li ng-repeat="id in [1,2,3,4,5]" ng-click="goTo('div'+id);">Go to div{{id}}</li>
    </ol>

    <!--以下為5個div塊-->
    <div id="div1">This is div1.</div>
    <div id="div2">This is div2.</div>
    <div id="div3">This is div3.</div>
    <div id="div4">This is div4.</div>
    <div id="div5">This is div5.</div>
</div>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14

css檔案就不貼出來了。以下是js檔案 
demo01_app.js：

angular.module('myDemo', [])

    .controller('firstController', ['$scope', '$location', '$anchorScroll', function ($scope, $location, $anchorScroll) {

        $scope.goTo = function (id) {
            if (id !== $location.hash()) { // 如果hash值改變了
                $location.hash(id);        // 就用hash方法，定位到那個div
            } else {             // 如果hash值沒有改變
                $anchorScroll(); // 就顯式呼叫$anchorScroll()來重新定位
            }
        }
    }]);
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12

效果（gif）： 
hash

   這裡為什麼要用到$anchorScroll這個服務呢？通過測試我發現，如果每次都只調用hash方法來定位元素的話，會出現這麼一種情況，使得$location的hash()方法是無效的：（為了可以隨時跳轉，我把5個可點選的列表項的position屬性設成“fixed”，即固定在螢幕的某個位置）當我點選“Go to div1”的時候跳到了div1，此時Url中的hash值是“##div1”，到這裡沒問題。但這時候，如果我滾動螢幕到最底端，大概到達div5的位置的時候再點選“Go to div1”，是不能再跳轉到div1塊的，因為hash值沒有改變，$location.hash()這個方法是“無效”的。所以，這種情況就要請$anchorScroll服務出來了，它負責這種特殊情況下的跳轉，而它在這裡也只簡單地呼叫了一下方法而已。

三、$cacheFactory

1、介紹：

$cacheFactory是應用程式一個會話（Session）中的快取服務，以key-value對的方法儲存一些臨時資料。它跟瀏覽器本地快取localStorage是不一樣的。$cacheFactory在使用者刪除當前會話（比如強制重新整理頁面）之後，快取的資料就被清空了。

2、用法：

（1）首先，要得到一個快取例項，用id來區分，比如我想取id為’firstCache’的快取：

var cache = $cacheFactory('firstCache');
  • 1

（2）新增kv對，put方法：

cache.put(key, value);
  • 1

（3）獲取，get方法：

cache.get(key); // 如果不存在這個key的話，會返回undefined
  • 1

（4）新增kv對，put方法：

cache.put(key, value);
  • 1

（5）刪除，remove和removeAll：

cache.remove(key); // 刪除某個kv對
cache.removeAll(); // 刪除該快取的全部kv對
  • 1
  • 2

（6）刪除該快取例項，destroy：

cache.destroy(); // 把當前快取刪除掉

cache.put(key, value); // 錯誤！不能再訪問該快取，要重新生產一個例項出來
  • 1
  • 2
  • 3

四、$timeout、$interval

1、介紹：

$timeout和$interval是AngularJS自帶的服務，跟原生js中的setTimeout和setInterval函式的用法基本是一樣的。但是有兩個不一樣的地方需要注意一下：

  • 區別一： 
    原生js中的兩個函式，如果在AngularJS中使用並且在回撥函式中需要使用$scope服務的話，我們需要用$angular.$apply把回撥函式包起來，因為這裡setTimeout函式被AngularJS當作是外部函數了。就像這樣：
// 錯誤的寫法示例（使用setTimeout卻沒有用$apply）：
angular.module('myDemo', [])

    .controller('firstController', ['$scope', function ($scope) {

        setTimeout(function () {
            console.log('before');  // 正常輸出before
            $scope.name = "My name have been changed."; // 這一句不被執行
            console.log('after');   // 正常輸出after
        }, 2000);
    }]);
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
// 正確的寫法示例
angular.module('myDemo', [])

    .controller('firstController', ['$scope', function ($scope) {

        setTimeout(function () {
            console.log('before');  // 正常輸出before
            $scope.$apply(function () {
                $scope.name = "My name have been changed.";  // 正確顯示
            });
            console.log('after');   // 正常輸出after
        }, 2000);
    }]);
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13

所以，在AngularJS中，最好不要用setTimeout或setInterval，而是用那兩個AngularJS系統服務。

  • 區別二：取消的方式不大一樣，比如timeout：
// setTimeout
var id = setTimeout(func, 2000); // 返回該timeout的id
clearTimeout(id);                // 使用clearTimeout
  • 1
  • 2
  • 3
// $timeout服務
var promise = $timeout(f, 2000); // 返回一個promise物件
$timeout.cancel(promise);        // 還是要使用服務，它的cancel方法
  • 1
  • 2
  • 3

2、用法：（上面有啦~）

五、$document

1、介紹、用法：

$document是對瀏覽器物件window.document的jqLite封裝，主要操作DOM（雖然一般來說不建議在AngularJS中操作DOM）。其實，$document就等同於AngularJS中提供的另一種服務element，它也是用來把原生的DOM元素封裝成jqLite物件，即有：

$document 等效於 angular.element(document)，不過要注意兩者的引用並不相等

並且，取0下標可以得到原生的document物件：

$document[0] === document，即引用相等，因為是對瀏覽器的document物件的封裝

六、$log

$log服務很簡單，就是更高階的console.log罷了，它提供5個方法：

  • log
  • warn
  • info
  • error
  • debug

是不是跟Android原生中的Log差不多呢^_^？ 
官方例項： 
html：

<div ng-controller="LogController">
    <p>Reload this page with open console, enter text and hit the log button...</p>
    <label>Message:
        <input type="text" ng-model="message"/>
    </label>
    <button ng-click="$log.log(message)">log</button>
    <button ng-click="$log.warn(message)">warn</button>
    <button ng-click="$log.info(message)">info</button>
    <button ng-click="$log.error(message)">error</button>
    <button ng-click="$log.debug(message)">debug</button>
</div>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11

js：

angular.module('myDemo', [])
    .controller('LogController', function ($scope, $log) {
        $scope.$log = $log;
    });
  • 1
  • 2
  • 3
  • 4

效果（瀏覽器F12開啟控制檯）： 
這裡寫圖片描述

七、$sce

1、介紹

“sce”指的是“Strict Contextual Escaping”，它是預設開啟的，負責拒絕一些不安全的行為，比如載入不同源的資源等等。但是有時候，我們又需要載入一些特定的資源，我們就得使用$sce的一些方法，來為這些資源和AngularJS系統之間建立信任。

2、用法

$sce有以下常用方法：

  • $sce.trustAsHtml(…)：將一段html文字視為安全
  • $sce.trustAsUrl(…)
  • $sce.trustAsResourceUrl(…)
  • $sce.trustAsJs(…)

舉個例子，假如我要顯示（可以理解成渲染，相當於Android SDK中的WebView）一段html文字表示的內容，我們需要遵循以下步驟：

  1. 在html模板中用“ng-bind-html”屬性來繫結一個model（變數）；
  2. 在js中注入$sce服務，並且使用方法$sce.trustAsHtml(…)，把信任後的值賦給該model。

例子： 
html：

<div ng-controller="LogController">

    <!--這裡不能用ng-bind，因為是渲染一段html文字，而不是顯示簡單的資料-->
    <div ng-bind-html="results"></div>
</div>
  • 1
  • 2
  • 3
  • 4
  • 5

controller.js：

angular.module('myDemo', [])
    .controller('LogController', function ($scope, $http, $sce) {

        // 隨便定義一段html文字
        var txt = "<h1>Hello world!</h1>";

        // 這裡不能直接$scope.results = txt，否則會報錯顯示“不安全”
        $scope.results = $sce.trustAsHtml(txt);
    });
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9

效果： 
sce效果圖

相關推薦

Angular內建服務

一、$http $http是對Ajax（XHR）的封裝。這裡介紹3種用法。 1、GET請求的用法： $http.get(url) .success(function (data) { // 這裡的data是一個object，是我們想要的資料部分，不包含狀態碼等

[iOS] UIApplication內建服務的openURL

使用Line分享 NSURL *appURL = [NSURL URLWithString:@"line://msg/text/IamHappyMan:)"]; if ([[UIApplication sharedApplication] canOpenURL: appURL]) { [[UIAp

AngularJS 內建服務：$http

AngularJS 內建服務 $http AngularJS為我們提供了大量的內建服務，通過這些內建服務就可以快捷的進行一些業務功能流程的自動處理了，如： $window：用於注入原生JS中的wi

簡述Hive的三種啟動方式及內建服務

一 Thrift服務 通過hiveServer/hiveServer2啟動Thrift服務，客戶端連線Thrift服務訪問Hive資料庫（JDBC，JAVA等連線Thrift服務訪問Hive）。 <property> <name>hive.server

AngularJS-demo - 常用命令、內建服務、自定義服務、繼承

AngularJS-demo - 常用命令、內建服務、自定義服務、繼承 常用命令: ng-app、ng-controller、ng-init、ng-repeat、ng-click 內建服務: $scope、$http 自定義服務: myService 繼承: myControll

angular內建過濾器以及自定義過濾器

　　ng內建了九種過濾器，使用方法都非常簡單，看文件即懂。不過為了以後不去翻它的文件，我在這裡還是做一個詳細的記錄。 　　1. currency (貨幣處理) 　　使用currency可以將數字格式化為貨幣，預設是美元符號，你可以自己傳入所需的符號，例如我傳入人民幣： {{num | currency

angularJS(三）內建服務

服務 服務是一個物件或函式，對外提供特定的功能。 1.內建服務 1、$location是對原生Javascript中location物件屬性和方法的封裝。 app.controller('demoController',['$scope','$

AngularJS 內建服務

一、服務？ AngularJS功能最基本的元件之一是服務(Service)。服務為你的應用提供基於任務的功能。服務可以被視為重複使用的執行一個或多個相關任務的程式碼塊。 AngularJS服務是單例物

AngularJS內建服務$http的使用——使用者許可權管理例項

1.實現目標： 選擇使用者角色，自動勾選許可權。 2. (1)MySQL資料庫的建立 (2)ng-repeat指令顯示使用者許可權 (3)ng-checked指令控制使用者許可權 3.例項 (1)M

Node.js開發入門—使用AngularJS內建服務

在上一篇，“AngularJS簡單示例”中演示了一個非常簡單的使用Angular的小demo，那篇已經太長，原本要介紹的一些內容只好單另開篇了。這些內容，就是如何使用Angular服務。 我們還是基於“AngularJS簡單示例”中的示例來改造一下。新的示例，

Golang內建庫學習筆記（2）－web服務器相關

c中 issue hook col err orm 服務器 srv per package main import ( "net/http" "fmt" "strings" "log" ) func sayHelloName(w htt

java連線JDK內建的derby資料庫(以服務方式啟動)

1.以服務方式啟動derby 執行下面java類執行指令碼,或直接在命令列視窗執行指令碼啟動derby服務 public class ServerDerby { public static void main(String[] args) throws IOException

(7) 內建Debug功能深入【調教angular-cli 最新版】

前言 很多小夥伴說用了打包工具(Webpack)之後，斷點除錯相當痛苦； 常規的方式無非是debugger,console.log()大法； 但是，vscode這貨天生支援debug功能，不用白不用，今天我就說說怎麼調教angular-cli;

angular.js常用內建指令

**指令，我將其理解為AngularJS操作HTML element的一種途徑。 AngularJS 指令是擴充套件的 HTML 屬性，帶有字首 ng-。** angularjs指令： 1.ngApp 寫法：ng-app ng-app 指令初

Angular中的內建指令

Angular提供了若干內建指令。因為內建指令是已經匯入過的，故可以直接在元件中直接使用它們。 ngIf 如果你希望根據一個條件來決定顯示或隱藏一個元素，可以使用ngIf指令。這個條件是由你傳給指令的表示式的結果決定的。 如果表示式的結果返回的是一個假值，那麼元素會從DOM

angular 事件監聽，內建事件

對於一款前端框架，提起事件，很容易讓人聯想到DOM事件，比如說滑鼠點選以及頁面滾動等。但是我們這裡說的angular中的事件和DOM事件並不是一個東西。 事件的釋出 我們可以通過$emit()以及$broadcast()來發布事件 $emit(name, args)

UI-Router:為什麼開發者都不喜歡Angular.js內建的路由

Angular.js 是一個用來構建“富客戶端”的神奇JavaScript框架。但是事實卻是許多開發者卻不使用其內建的路由模組。反而使用AngularUI專案的 UI-Router模組來代替之。 這是因為UI-Router有兩個重要的特性： * 多樣化檢視

angular創建自定義指令的四種方式

htm mil 成功 評論 utf-8 例如 angularjs size 限制 　　angular除了內置的部分指令，還可以通過.directive來自定義指令。要調用自定義指令，HTML 元素上需要添加自定義指令名。使用駝峰法來命名一個指令：nsHeader，在調用時使

零基礎學python-4.2 其它內建類型

介紹 src one 一個 tex == water 文件 div 這一章節我們來聊聊其它內建類型 1.類型type 在python2.2的時候，type是通過字符串實現的，再後來才把類型和類統一 我們再次使用上一章節的圖片來說明一些問題 我們通

PHP內置服務器bat啟動腳本

php pan art 5.6 blog div span echo oca @echo off ::PHP內置服務器bat啟動腳本;王欣:2017-5-18 18:35:19 ::project_name為項目目錄 ::server_pathphp.exe所在目