人人超碰人摸人爱,天堂av无码8886久久,性瘾荡乳h古代

之前有寫一篇文章介紹了 AngularJS 的簡單使用，只是寫了一些AngularJS的簡單用法，經(jīng)過一段時間的學習，這里總結(jié)了一些 AngularJS 的進行一些進階使用。（這里的實例均使用angularJS 1.4.6版本）
功能介紹和使用
這里對要使用的 AngularJS 功能進行一些介紹：

AngularJS 的指令
AngularJS 通過被稱為 “指令”的新屬性來擴展 HTML，來為應用添加功能，并且 AngularJS 也允許自定義指令。指令都有前綴 ng-,如：
ng-app 指令初始化一個 AngularJS 應用程序；
ng-init 指令初始化應用程序數(shù)據(jù)；
ng-model 指令把元素值（比如輸入域的值）綁定到應用程序。
完整的指令內(nèi)容可以參閱 AngularJS 參考手冊。
AngularJS 的模板
AngularJS的模板使用的是DOM而不是字符串，模板仍然是用HTML字符串寫的，并且它仍然是HTML。瀏覽器將它解析成DOM，然后這個DOM會作為輸入傳遞給模板引擎，也就是我們的編譯器。編譯器查看其中的指令，找到的指令后，會開始監(jiān)視指令內(nèi)容中相應的模型。這樣視圖就能"連續(xù)地"更新，不需要模板和數(shù)據(jù)的重新合并。AngularJS 通過 ng-model 指令綁定應用程序數(shù)據(jù)到 HTML 控制器(如input, select, textarea)的值，這種綁定是相互的，在修改輸入域的值時， AngularJS 屬性的值也會被修改；修改AngularJS 屬性的值也將修改輸入域的值。
AngularJS 控制器
即控制 AngularJS 應用程序的數(shù)據(jù)，AngularJS 通過
ng-controller 指令定義應用程序控制器，控制器由標準的 JavaScript 對象的構(gòu)造函數(shù) 創(chuàng)建。
AngularJS 的 Scope（作用域）
Scope(作用域) 是應用在 HTML (視圖) 和 JavaScript (控制器)之間的紐帶。Scope 是一個對象，有可用的方法和屬性，可以應用在 HTML 視圖和控制器上，使用 $scope 調(diào)用其中的方法和屬性。
代碼示例：

<!--ng-app 聲明 AngularJS 名字，ng-controller 聲明了 控制器-->
<div ng-app="myApp" ng-controller="myCtrl">
<!--ng-model 將 input 的輸入值 同 $scope.name 互相綁定-->
    名字: <input ng-model="name">
</div>
<!--此處為 AngularJS 的主要程序代碼-->
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.name = "John Doe";
});
</script>

AngularJS 過濾器
AngularJS 過濾器可用于處理數(shù)據(jù)，如格式化數(shù)據(jù)，排列數(shù)組等。過濾器可以通過一個管道字符（|）和一個過濾器添加到表達式中。.
如下，內(nèi)置的過濾器：
- currency：格式化數(shù)字為貨幣格式。
- filter ：從數(shù)組項中選擇一個子集。
- lowercase：格式化字符串為小寫。
- orderBy：根據(jù)某個表達式排列數(shù)組。
- uppercase：格式化字符串為大寫。

示例代碼：

使用內(nèi)置的過濾器：

<p>姓名為 {{ lastName | lowercase }}</p>
<p>貨幣為 {{ currency | currency }}</p>
<p>輸入過濾:</p>
<p><input type="text" ng-model="test"></p>
<ul>
  <li ng-repeat="x in names | filter:test | orderBy:'country'">
    {{ (x.name | uppercase) + ', ' + x.country }}
  </li>
</ul>
</div>
<script>
    var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.lastName = "John Doe";
    $scope.currency = 11111;
    $scope.names = [
        { 'name':'KAI','country':'Denmark'},
        { 'name':'JANI','country':'Norway'},
        { 'name':'HEGE','country':'Sweden'}
    ];
    
});
</script>

運行結(jié)果：

AngularJS-filter.PNG

輸入過濾條件結(jié)果：

AngularJS-filter1.PNG

使用自定義過濾器 reverse (功能是將字符串倒著輸出)：

<div ng-app="myApp" ng-controller="myCtrl">

<p>原姓名：{{msg}}</p>
<!-- 使用自定義的過濾器 ： reverse  -->
<p>姓名: {{ msg | reverse }}</p>

</div>

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.msg = "Runoob";
});
//創(chuàng)建自定義的過濾器 - reverse
app.filter('reverse', function() { //可以注入依賴
    return function(text) {
          //將字符串 text 內(nèi)容倒置
        return text.split("").reverse().join("");
    }
});
</script>

運行結(jié)果：

AngularJS-自定義filter.PNG

AngularJS服務
在 AngularJS 中，服務是一個函數(shù)或?qū)ο螅稍谀愕?AngularJS 應用中使用。這些服務可以獲取到Angular應用聲明周期的每一個階段，并且和$watch整合，讓Angular可以監(jiān)控應用，處理事件變化。普通的DOM對象則不能在Angular應用聲明周期中和應用整合。AngularJS 內(nèi)建了30 多個服務詳見官網(wǎng) API（以下示例代碼使用 $location 服務，它可以返回當前頁面的 URL 地址）。當然 AngularJS 也支持創(chuàng)建自定義的服務。
示例代碼：

<div ng-app="myApp" ng-controller="myCtrl">
<p> 當前頁面的url:</p>
<h3>{{myUrl}}</h3>
</div>
<p>該實例使用了內(nèi)置的 $location 服務獲取當前頁面的 URL。</p>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $location) {
    $scope.myUrl = $location.absUrl();
});
</script>

運行結(jié)果：

AngularJS-service-location.PNG

自定義服務：

<div ng-app="myApp" ng-controller="myCtrl">
<p>255 的16進制是:</p>
<h1>{{hex}}</h1>
</div>
<p>自定義服務，用于轉(zhuǎn)換16進制數(shù)：</p>
<script>
var app = angular.module('myApp', []);
//自定義服務-hexafy,數(shù)據(jù)轉(zhuǎn)換成16 進制
app.service('hexafy', function() {
    this.myFunc = function (x) {
        return x.toString(16);
    }
});
app.controller('myCtrl', function($scope, hexafy) {
//自定義服務-hexafy
  $scope.hex = hexafy.myFunc(255);
});
</script>

AngularJS $http
$http 是 AngularJS 中內(nèi)置的一個核心服務，用于讀取遠程服務器的數(shù)據(jù)。使用該$http可以發(fā)起get 或者 post 請求。
使用方法：

// 簡單的 GET 請求，可以改為 POST
$http({
    method: 'GET',//post 請求改為‘POST’
    url: '/someUrl'
}).success(function successCallback(response) {
        // 請求成功執(zhí)行代碼
    }).error(function() {
            // 請求失敗執(zhí)行代碼
        });
//注意：此處使用的版本是AngularJS 1.4.6，在AngularJS 1.5中$http 的 success 和 error 方法已廢棄。使用 then 方法替代。使用格式如下：
/*
// 簡單的 GET 請求，可以改為 POST
$http({
    method: 'GET',
    url: '/someUrl'
}).then(function successCallback(response) {
        // 請求成功執(zhí)行代碼
    }, function errorCallback(response) {
        // 請求失敗執(zhí)行代碼
});
*/

除了上面的方法，AngularJS 還提供了很多簡單寫法：
POST 與 GET 簡寫方法格式：
$http.get('/someUrl', config).then(successCallback, errorCallback);
$http.post('/someUrl', data, config).then(successCallback, errorCallback);
更多簡寫方式可參見：https://docs.angularjs.org/api/ng/service/$http

除此之外，使用 $http 還可以讀取 JSON 文件
以下是存在本地的JSON 文件：

[
    {"id":1,"work_name":"楚喬傳","upload_state":"是"},
    {"id":2,"work_name":"楚喬傳","upload_state":"是"}
]

代碼示例：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.bootcss.com/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>
<div ng-app="myApp" ng-controller="myCtrl"> 
<ul>
  <li ng-repeat="item in datas">
    {{item.work_name + ',' + item.upload_state}}
  </li>
</ul>
</div>
<script>
var app = angular.module('myApp', []);
//json 文件路徑
var url1="../conf/datalist.json";
app.controller('myCtrl', function($scope, $http) {
    $http.get(url1).success(function (response) {
        $scope.datas = response;
    });
});
</script>
</html>

運行結(jié)果：

AngularJS-http.PNG

總結(jié)

此處暫時就寫這幾個功能，AngularJS 還有很多實用的功能，待到以后在繼續(xù)寫。

三个男躁一个女,国精产品一区一手机的秘密,麦子交换系列最经典十句话,欧美国产综合欧美视频

AngularJS 的使用進階（一）

AngularJS 的使用進階（一）

總結(jié)

推薦閱讀更多精彩內(nèi)容

三个男躁一个女,国精产品一区一手机的秘密,麦子交换系列最经典十句话,欧美 国产 综合 欧美 视频

AngularJS 的使用進階（一）

總結(jié)

推薦閱讀更多精彩內(nèi)容

三个男躁一个女,国精产品一区一手机的秘密,麦子交换系列最经典十句话,欧美国产综合欧美视频