Rumah > Artikel > hujung hadapan web > AngularJS如何学习？angularjs的学习教程让你不迷路

AngularJS如何学习？angularjs的学习教程让你不迷路

寻∝梦asal: 2018-09-08 11:36:001186semak imbas

本篇文章主要的讲述了关于angularjs的语法介绍，还有angularjs的作用域解释，还有angularjs控制器、服务的解释，接下来就让我们一起来看这篇文章吧

记录不怎么熟悉的angularjs语法

过滤器
自定义过滤器
AngularJS 服务(Service)
AngularJS XMLHttpRequest
AngularJS Select(选择框)
$location
$http 服务
$timeout 服务
创建自定义服务
AngularJS Scope(作用域)
AngularJS 控制器
AngularJS 过滤器

AngularJS Scope(作用域)

$rootScope

$rootScope : 根作用域,所有 controller 都可以调用，类似于项目级别的全局变量
js赋值 : $rootScope.lastname = "Refsnes";
html调用 : $root.lastname

$scope 作用域

之间无法互相访问
Scope(作用域) 是应用在 HTML (视图) 和 JavaScript (控制器)之间的纽带。
Scope 是一个对象，有可用的方法和属性。
Scope 可应用在视图和控制器上

AngularJS 控制器

 控制 AngularJS 应用程序的数据。 AngularJS 控制器是常规的 JavaScript 对象。

ng-controller 
ng-controller 指令定义了应用程序控制器

ng-controller="myCtrl" 属性是一个 AngularJS 指令。用于定义一个控制器。 myCtrl 函数是一个 JavaScript 函数。

JS引用<script src="personController.js"></script>  多个controller 
js文件中 定义一个app    
之后可以定义多个controller   
HTML中也可以对应多个controller

多个controller控制器

var app = angular.module(&#39;myApp&#39;, []);
app.controller(&#39;myCtrl1&#39;, function($scope) {
    $scope.firstName = "Johns";    $scope.lastName = "Doef";
});
    app.controller(&#39;myCtrl2&#39;, function($scope) {
    $scope.firstName = "Tom";    $scope.lastName = "kkk";
});

AngularJS 过滤器

过滤器

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

currency 格式化数字为货币格式

filter 从数组项中选择一个子集。

lowercase 格式化字符串为小写。

orderBy 根据某个表达式排列数组

uppercase 格式化字符串为大写

过滤输入

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

<p><input type="text" ng-model="test"></p><ul>
  <li ng-repeat="x in names | filter:test | orderBy:&#39;country&#39;">
    {{ (x.name | uppercase) + &#39;, &#39; + x.country }}
  </li></ul>

自定义过滤器

以下实例自定义一个过滤器 reverse，将字符串反转

<!DOCTYPE html><html><meta charset="utf-8"><script src="https://cdn.bootcss.com/angular.js/1.4.6/angular.min.js"></script> <body> <p ng-app="myApp" ng-controller="myCtrl">姓名: {{ msg | reverse }}</p><script>var app = angular.module(&#39;myApp&#39;, []);
app.controller(&#39;myCtrl&#39;, function($scope) {
    $scope.msg = "Runoob";
});
app.filter(&#39;reverse&#39;, function() { //可以注入依赖
    return function(text) {
        return text.split("").reverse().join("");
    } 
});</script>  </body></html>

uppercase，lowercase 大小写转换（想看更多就到PHP中文网AngularJS开发手册中学习）

AngularJS 服务(Service)

AngularJS 中你可以创建自己的服务，或使用内建服务。
在 AngularJS 中，服务是一个函数或对象，可在你的 AngularJS 应用中使用。

$location

location.absUrl(); 內建service，获取当前页面的url地址

$http 服务

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

$timeout 服务

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

interval 可用于设置始终运行的延时服务。

创建自定义服务

要使用自定义服务，需要在定义控制器的时候独立添加，设置依赖关系:
当你创建了自定义服务，并连接到你的应用上后，你可以在控制器，指令，过滤器或其他服务中使用它。

<!DOCTYPE html><html><head><meta charset="utf-8"><script src="https://cdn.bootcss.com/angular.js/1.4.6/angular.min.js"></script></head><body><p ng-app="myApp" ng-controller="myCtrl"><p>255 的16进制是:</p><h1>{{hex}}</h1></p><p>自定义服务，用于转换16进制数：</p><script>var app = angular.module(&#39;myApp&#39;, []);

app.service(&#39;hexafy&#39;, function() {
    this.myFunc = function (x) {
        return x.toString(16);
    }
});
app.controller(&#39;myCtrl&#39;, function($scope, hexafy) {
  $scope.hex = hexafy.myFunc(255);
});</script></body></html>

AngularJS XMLHttpRequest

http.get
-http.post

-http.delete

-http.patch

简单get/post请求

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

AngularJS Select(选择框)

AngularJS 可以使用数组或对象创建一个下拉列表选项。

ng-option 指令来创建一个下拉列表，列表项通过对象和数组循环输出
$scope.names = [“Google”, “Runoob”, “Taobao”];
设置下拉框初始值

scope.cars.car02;  //设置第2个为初始值；

本篇文章到这就结束了（想看更多就到PHP中文网AngularJS使用手册中学习），有问题的可以在下方留言提问。

Atas ialah kandungan terperinci AngularJS如何学习？angularjs的学习教程让你不迷路. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel sebelumnya：为什么使用angular4？angularjs和angular4的区别Artikel seterusnya：angularjs的到底怎么用的？angularjs的框架实例详细解析（附完整实例）

Artikel berkaitan

Lihat lagi