Angular入门1-之-基础概览02

最新推荐文章于 2024-11-05 22:07:06 发布

weixin_30883271

最新推荐文章于 2024-11-05 22:07:06 发布

阅读量86

点赞数

文章标签： javascript 面试设计模式 ViewUI

原文链接：http://www.cnblogs.com/liangliangjiang/p/6652500.html

版权

本文介绍了AngularJS中的服务概念及常见服务如$location、$http、$timeout等的使用方法，同时涵盖了自定义服务创建过程。此外还探讨了AngularJS指令在HTMLDOM中的应用，包括ng-repeat、ng-show等，以及AngularJS事件指令如ng-click的应用。

摘要由CSDN通过智能技术生成

AngularJS 服务(Service)

AngularJS 中你可以创建自己的服务，或使用内建服务

什么是服务？

在 AngularJS 中，服务是一个函数或对象，可在你的 AngularJS 应用中使用。

AngularJS 内建了30 多个服务，分别应用于不的应用场景。(就好比所谓的设计模式).

(比如有个 $location 服务，它可以返回当前页面的 URL 地址)

为什么使用服务?

在很多服务中，比如 $location 服务，它可以使用 DOM 中存在的对象，类似 window.location 对象，但 window.location 对象在 AngularJS 应用中有一定的局限性。

AngularJS 会一直监控应用，处理事件变化， AngularJS 使用 $location 服务比使用 window.location 对象更好。

（面试的时候，考官问你，angular的$location和window.location有什么不同，哪个更好，为什么?）

$location vs window.location

	window.location	$location.service
目的	允许对当前浏览器位置进行读写操作	允许对当前浏览器位置进行读写操作
API	暴露一个能被读写的对象	暴露jquery风格的读写器
是否在AngularJS应用生命周期中和应用整合	否	可获取到应用声明周期内的每一个阶段，并且和$watch整合
是否和HTML5 API的无缝整合	否	是（对低级浏览器优雅降级）
和应用的上下文是否相关	否，window.location.path返回"/docroot/actual/path"	是，$location.path()返回"/actual/path"

$http 服务

$http 是 AngularJS 应用中最常用的服务。服务向服务器发送请求，应用响应服务器传送过来的数据。

最底层的方法，获取动态数据到controller的$scope对象中，在view中显示对应的数据！

最常见的例子：

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $http) {
    $http.get("welcome.htm").then(function (response) {
        $scope.myWelcome = response.data;
    });
});

或者是.success(function (data) { $scope.myData = data;})

还有很多类似jqeury的ajax的处理，

// 简单的 GET 请求，可以改为 POST
$http({
	method: 'GET', url: '/someUrl' }).then(function successCallback(response) { // 请求成功执行代码 }, function errorCallback(response) { // 请求失败执行代码 });

此外还有以下简写方法：

$http.get
$http.head
$http.post
$http.put
$http.delete
$http.jsonp
$http.patch

更好的做法是外部引入angular-resource.js，利用ngResource和$resource对service进行factory实例,给controller的作用域$scope扩展query()方法及其他；

【后期再补充学习 跨域请求的问题】

$timeout 服务

AngularJS $timeout 服务对应了 JS window.setTimeout 函数

$interval 服务

AngularJS $interval 服务对应了 JS window.setInterval 函数。

常用得到的：

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $interval) {
    $scope.theTime = new Date().toLocaleTimeString();
    $interval(function () {
        $scope.theTime = new Date().toLocaleTimeString();
    }, 1000);
});

页面在myCtrl作用域下，绑定数据theTime;

创建自定义服务:

app.service('hexafy', function() {
    this.myFunc = function (x) {
        return x.toString(16);
    }
});

实例化：

app.controller('myCtrl', function($scope, hexafy) {
$scope.hex = hexafy.myFunc(255);
});

这个案例还是可以：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>

<div ng-app="myApp" ng-controller="myCtrl">
<p>在获取数组 [255, 251, 200] 值时使用过滤器:</p>

<ul>
<li ng-repeat="x in counts">{{x | myFormat}}</li>
</ul>

<p>过滤器使用服务将10进制转换为16进制。</p>
</div>

</body>
</html>

AngularJS Select(选择框)

AngularJS 可以使用数组或对象创建一个下拉列表选项（实际常用到的指令，特别是个对象）

用ng-repeat循环单个数组可能更巴适：

当然，做一下处理也是可以的：

你不用key-value也是允许的：

AngularJS 表格

ng-repeat 指令可以完美的显示表格。

<table>
  <tr ng-repeat="x in names">
    <td>{{ x.Name }}</td>
    <td>{{ x.Country }}</td>
  </tr>
</table>

可以给input绑定一个ng-model，到tr的filter中，不就是查询乐！

<table>
  <tr ng-repeat="x in names | orderBy : 'Country'">
    <td>{{ x.Name }}</td>
    <td>{{ x.Country }}</td>
  </tr>
</table>

如果你要显示序号：

<td>{{ $index + 1 }}</td>

单数和双数设置样式：

AngularJS HTML DOM

AngularJS 为 HTML DOM 元素的属性提供了绑定应用数据的指令（经常会用到的）

ng-disabled 指令直接绑定应用程序数据到 HTML 的 disabled 属性。

项目中会禁止点击某个button或者select。radio，checkbox等等；

<button ng-disabled="mySwitch">点我!</button>
</p>

<p>
<input type="checkbox" ng-model="mySwitch">按钮

通过input中model的值的改变来影响button中的disabled的值

ng-show 指令隐藏或显示一个 HTML 元素。

<p ng-show="true">我是可见的。</p>
<p ng-show="false">我是不可见的。</p>

ng-hide 指令隐藏或显示一个 HTML 元素。

<p ng-hide="true">我是不可见的。</p>

<p ng-hide="false">我是可见的。</p>

AngularJS 事件

AngularJS 有自己的 HTML 事件指令。

1.ng-click 指令定义了 AngularJS 点击事件。(jquery的.click()差不多)

也可以跟$scope指定个方法Fn更好；

常用的点击显示和隐藏div：

<button ng-click="toggle()">隐藏/显示</button>

<div ng-hide="myVar">
名: <input type="text" ng-model="firstName"><br>
姓名: <input type="text" ng-model="lastName"><br>
<br>
Full Name: {{firstName + " " + lastName}}
</div>