Angular入门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
能够运用数组或对象创设3个下拉列表选项(实际常用到的下令,尤其是个指标)

<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提供1个器皿,然后才是具备的controller,view等等往里面装,所以这几个宣称理论上也相应只好说美赞臣(Meadjohnson)(Dumex)次!小编看源码,假使多层申明,会覆盖后边,而眼下的DI会导致找不到而报错!

(未完待续…/…)

 

 

相关文章