AngularJs初步认识与学习

时间：2021-04-23 00:18:25

一.AngularJs控制器
1.AngularJS 控制器 控制 AngularJS 应用程序的数据，通过ng-controller定义控制器

<div ng-app="myApp" ng-controller="myCtrl">

名: <input type="text" ng-model="firstName"><br>
姓: <input type="text" ng-model="lastName"><br>
<br>
姓名: {{firstName + " " + lastName}}

</div>

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
 $scope.firstName = "John";
 $scope.lastName = "Doe";
});
</script>

2.控制器内也可定义方法：

<div ng-app="myApp" ng-controller="personCtrl">

名: <input type="text" ng-model="firstName"><br>
姓: <input type="text" ng-model="lastName"><br>
<br>
姓名: {{fullName()}}

</div>

<script>
var app = angular.module('myApp', []);
app.controller('personCtrl', function($scope) {
 $scope.firstName = "John";
 $scope.lastName = "Doe";
 $scope.fullName = function() {
return $scope.firstName + " " + $scope.lastName;
 }
});
</script>

3.在大型的应用程序中，通常是把控制器存储在外部文件中。即把js代码封装起来，直接引用即可。

二.AngularJS 过滤器

1.过滤器可以使用一个管道字符（|）添加到表达式和指令中，用于转换数据：

currency 格式化数字为货币格式。
lowercase 格式化字符串为小写。
uppercase 格式化字符串为大写。
orderBy 根据某个表达式排列数组。

2.表达式中添加过滤器
过滤器可以通过一个管道字符（|）和一个过滤器添加到表达式中
如：{{expression | 过滤器 }}
3.向指令添加过滤器

<ul>
<li ng-repeat="x in names | orderBy:'country'">
{{ x.name + ', ' + x.country }}
</li>
</ul>

4.输入过滤
输入过滤器可以通过一个管道字符（|）和一个过滤器添加到指令中，该过滤器后跟一个冒号和一个模型名称。

<div ng-app="myApp" ng-controller="namesCtrl">

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

输出结果根据输入的模型test的值进行过滤
5.自定义过滤器

app.filter('myFormat',['hexafy', function() {
    执行函数
    };
}]);
 使用：<li ng-repeat="x in counts">{{x | myFormat}}</li>

三.AngularJS 服务(Service)

在 AngularJS 中，服务是一个函数或对象，可在你的 AngularJS 应用中使用。
1.AngularJS 内建服务。
(1)$location 服务，它可以返回当前页面的 URL 地址。

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $location) {
 $scope.myUrl = $location.absUrl();
});
</script>

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

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

http可读取web服务器上的json数据。 http.get(url) 是用于读取服务器数据的函数：

<div ng-app="myApp" ng-controller="siteCtrl"> 

<ul>
<li ng-repeat="x in names">
{{ x.Name + ', ' + x.Country }}
</li>
</ul>

</div>

<script>
var app = angular.module('myApp', []);
app.controller('siteCtrl', function($scope, $http) {
 $http.get("http://www.runoob.com/try/angularjs/data/sites.php")
 .success(function (response) {$scope.names = response.sites;});
});
</script>

json文件：

{
    "sites": [
 {
 "Name": "菜鸟教程",
 "Url": "www.runoob.com",
 "Country": "CN"
},
 {
 "Name": "Google",
 "Url": "www.google.com",
 "Country": "USA"
},
 {
 "Name": "Facebook",
 "Url": "www.facebook.com",
 "Country": "USA"
},
 {
 "Name": "微博",
 "Url": "www.weibo.com",
 "Country": "CN"
}
 ]
}

(3).$timeout 服务对应了 JS window.setTimeout 函数。

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $timeout) {
$scope.myHeader = "Hello World!";
$timeout(function () {
$scope.myHeader = "How are you today?";
  }, 2000);
});
</script>

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

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

2.创建自定义服务
创建名为hexafy的服务：

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

访问服务：

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

3.过滤器中使用自定义服务

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

当你创建了自定义服务，并连接到你的应用上后，你可以在控制器，指令，过滤器或其他服务中使用它。
标签：

相关文章