AngularJS 的使用进阶（一）

2017-08-13 本文已影响138人屋檐下的燕雀

之前有写一篇文章介绍了 AngularJS 的简单使用，只是写了一些AngularJS的简单用法，经过一段时间的学习，这里总结了一些 AngularJS 的进行一些进阶使用。（这里的实例均使用angularJS 1.4.6版本）
功能介绍和使用
这里对要使用的 AngularJS 功能进行一些介绍：

AngularJS 的指令
AngularJS 通过被称为 “指令”的新属性来扩展 HTML，来为应用添加功能，并且 AngularJS 也允许自定义指令。指令都有前缀 ng-,如：
ng-app 指令初始化一个 AngularJS 应用程序；
ng-init 指令初始化应用程序数据；
ng-model 指令把元素值（比如输入域的值）绑定到应用程序。
完整的指令内容可以参阅 AngularJS 参考手册。
AngularJS 的模板
AngularJS的模板使用的是DOM而不是字符串，模板仍然是用HTML字符串写的，并且它仍然是HTML。浏览器将它解析成DOM，然后这个DOM会作为输入传递给模板引擎，也就是我们的编译器。编译器查看其中的指令，找到的指令后，会开始监视指令内容中相应的模型。这样视图就能"连续地"更新，不需要模板和数据的重新合并。AngularJS 通过 ng-model 指令绑定应用程序数据到 HTML 控制器(如input, select, textarea)的值，这种绑定是相互的，在修改输入域的值时， AngularJS 属性的值也会被修改；修改AngularJS 属性的值也将修改输入域的值。
AngularJS 控制器
即控制 AngularJS 应用程序的数据，AngularJS 通过
ng-controller 指令定义应用程序控制器，控制器由标准的 JavaScript 对象的构造函数创建。
AngularJS 的 Scope（作用域）
Scope(作用域) 是应用在 HTML (视图) 和 JavaScript (控制器)之间的纽带。Scope 是一个对象，有可用的方法和属性，可以应用在 HTML 视图和控制器上，使用 $scope 调用其中的方法和属性。
代码示例：

<!--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 过滤器可用于处理数据，如格式化数据，排列数组等。过滤器可以通过一个管道字符（|）和一个过滤器添加到表达式中。.
如下，内置的过滤器：
- currency：格式化数字为货币格式。
- filter ：从数组项中选择一个子集。
- lowercase：格式化字符串为小写。
- orderBy：根据某个表达式排列数组。
- uppercase：格式化字符串为大写。

示例代码：

使用内置的过滤器：

<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>

运行结果：

AngularJS-filter.PNG

输入过滤条件结果：

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";
});
//创建自定义的过滤器 - reverse
app.filter('reverse', function() { //可以注入依赖
    return function(text) {
          //将字符串 text 内容倒置
        return text.split("").reverse().join("");
    }
});
</script>

运行结果：

AngularJS-自定义filter.PNG

AngularJS服务
在 AngularJS 中，服务是一个函数或对象，可在你的 AngularJS 应用中使用。这些服务可以获取到Angular应用声明周期的每一个阶段，并且和$watch整合，让Angular可以监控应用，处理事件变化。普通的DOM对象则不能在Angular应用声明周期中和应用整合。AngularJS 内建了30 多个服务详见官网 API（以下示例代码使用 $location 服务，它可以返回当前页面的 URL 地址）。当然 AngularJS 也支持创建自定义的服务。
示例代码：

<div ng-app="myApp" ng-controller="myCtrl">
<p> 当前页面的url:</p>
<h3>{{myUrl}}</h3>
</div>
<p>该实例使用了内置的 $location 服务获取当前页面的 URL。</p>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $location) {
    $scope.myUrl = $location.absUrl();
});
</script>

运行结果：

AngularJS-service-location.PNG

自定义服务：

<div ng-app="myApp" ng-controller="myCtrl">
<p>255 的16进制是:</p>
<h1>{{hex}}</h1>
</div>
<p>自定义服务，用于转换16进制数：</p>
<script>
var app = angular.module('myApp', []);
//自定义服务-hexafy,数据转换成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 中内置的一个核心服务，用于读取远程服务器的数据。使用该$http可以发起get 或者 post 请求。
使用方法：

// 简单的 GET 请求，可以改为 POST
$http({
    method: 'GET',//post 请求改为‘POST’
    url: '/someUrl'
}).success(function successCallback(response) {
        // 请求成功执行代码
    }).error(function() {
            // 请求失败执行代码
        });
//注意：此处使用的版本是AngularJS 1.4.6，在AngularJS 1.5中$http 的 success 和 error 方法已废弃。使用 then 方法替代。使用格式如下：
/*
// 简单的 GET 请求，可以改为 POST
$http({
    method: 'GET',
    url: '/someUrl'
}).then(function successCallback(response) {
        // 请求成功执行代码
    }, function errorCallback(response) {
        // 请求失败执行代码
});
*/

除了上面的方法，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>

运行结果：

AngularJS-http.PNG

总结

此处暂时就写这几个功能，AngularJS 还有很多实用的功能，待到以后在继续写。

AngularJS 的使用进阶（一）

总结

猜你喜欢

热点阅读