AngularJS 的使用进阶（一）

之前有写一篇文章介绍了 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 调用其中的方法和属性。
  代码示例：

    名字: 

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

---

示例代码：

• 使用内置的过滤器：

姓名为 {{ lastName | lowercase }}
货币为 {{ currency | currency }}
输入过滤:


  

    {{ (x.name | uppercase) + ', ' + x.country }}
  

运行结果：

AngularJS-filter.PNG

输入过滤条件结果：

AngularJS-filter1.PNG

---

• 使用自定义过滤器 reverse (功能是将字符串倒着输出)：

原姓名：{{msg}}

姓名: {{ msg | reverse }}

运行结果：

AngularJS-自定义filter.PNG

---

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

 当前页面的url:
{{myUrl}}

该实例使用了内置的 $location 服务获取当前页面的 URL。

运行结果：

AngularJS-service-location.PNG

自定义服务：

255 的16进制是:
{{hex}}

自定义服务，用于转换16进制数：

• 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":"是"}
]

代码示例：

 

  

    {{item.work_name + ',' + item.upload_state}}
  

运行结果：

AngularJS-http.PNG

总结

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