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

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"&gt;&lt;/script&gt;
</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>

<script>
var app = angular.module(‘myApp’, []);
app.service(‘hexafy’, function() {
this.myFunc = function (x) {
return x.toString(16);
}
});
app.filter(‘myFormat’,[‘hexafy’, function(hexafy) {
return function(x) {
return hexafy.myFunc(x);
};
}]);
app.controller(‘myCtrl’, function($scope) {
$scope.counts = [255, 251, 200];
});
</script>

</body>
</html>

AngularJS Select(选择框)

AngularJS
可以以数组或对象创建一个下拉列表选项(实际常用到的吩咐,特别是独目标)

<select ng-init=”selectedName = names[0]” ng-model=”selectedName” ng-options=”x for x in names“>
</select>

因此ng-repeat循环单个数组可能更巴适:

<select>
<option**ng-repeat=**“x in
names”***>{{x}}</option>
</select>

 

自,做一下甩卖啊是得的 :

<select ng-model=”selectedSite”>
<option ng-repeat=”x in sites” value=”{{x.url}}”>{{x.site}}</option>
</select>

 

乃免用key-value也是许的:

<select ng-model=”selectedCar” ng-options=”y.brand for (x, y)
in cars”>
</select>

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>

 

单数和双数设置样式:

<td ng-if=”$odd” style=” margin: 0px; padding: 0px;
color: rgb(17, 119, 0); font-family: ‘courier new’; font-size: 13px;
line-height: 18.46875px;”>>{{ x.Name }}</td>
<td ng-if=”$even”>{{ x.Name }}</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()差不多)

<button ng-click=”count = count + 1″>点我!</button>

否可以和$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>

(完整的controller就从来不写了,关注主要)

$scope.toggle = function() {
        $scope.myVar = !$scope.myVar;
    };

脚是周angular流程的极基础,也是太核心之!!!

AngularJS 模块


模块定义了一个应用程序。模块是应用程序中不同部分的器皿。模块是动控制器的容器。控制器通常属于一个模块。

var app = angular.module(myApp,
[]); 

自身之知就是是其一module就是给这app提供一个器皿,然后才是怀有的controller,view等等为里装,所以这个宣称理论及呢应有只能表明一次!我看源码,如果多层申明,会盖前,而前的DI会导致找不顶要报错!

(未完待续…/…)

 

 

相关文章