Home > Article > Web Front-end > How to learn AngularJS? Angularjs learning tutorial keeps you from getting lost

How to learn AngularJS? Angularjs learning tutorial keeps you from getting lost

寻∝梦Original: 2018-09-08 11:36:001187browse

This article mainly talks about the syntax introduction of angularjs, as well as the scope explanation of angularjs, and the explanation of angularjs controller and service. Next, let us look at this article together. Article Bar

Record unfamiliar angularjs syntax

##Filter
Custom filter
AngularJS Service
AngularJS XMLHttpRequest
AngularJS Select(select box)
$location
$http service
$timeout service
Create a custom service
AngularJS Scope
AngularJS Controller
AngularJS Filter

##AngularJS Scope

$rootScope

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

$scope scope

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

AngularJS controller

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

Multiple 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 filter Filter

Filter

Filters can be added to expressions and directives using a pipe character (|).

AngularJS filters can be used to transform data

currency Format numbers into currency format

filter Select a subset from the array items.

lowercase Format strings to lowercase.

orderBy Arrange the array according to an expression

uppercase Format the string to uppercase

Filter input

The input filter can pass a pipe character ( |) and a filter added to the directive followed by a colon and a model name.

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

Custom filter

The following example customizes a filter reverse to reverse the string

<!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 case conversion (If you want to learn more, go to the PHP Chinese website

AngularJS Development Manual

to learn)

AngularJS Service## In #AngularJS you can create your own services or use built-in services. In AngularJS, a service is a function or object that can be used in your AngularJS application.

$location

$http service

$http is the most commonly used service in AngularJS applications. The service sends a request to the server, and the application responds to the data sent by the server.

$timeout service

##interval service corresponds to the JS window.setInterval function. interval can be used to set a delay service that always runs.

Create a custom service

To use a custom service, you need to add it independently when defining the controller and set dependencies: After you create a custom service and connect it to your application, you can use it in controllers, directives, filters, or other services.

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

Simple get/post request

// 简单的 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(select box)

AngularJS You can create a drop-down list of options using an array or object.

ng-option directive to create a drop-down list, the list items are output in a loop through objects and arrays

$scope.names = ["Google", "Runoob", "Taobao"];

Set the initial value of the drop-down box

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

This article ends here (if you want to see more, go to the PHP Chinese website
AngularJS User Manual to learn) , if you have any questions, you can leave a message below.

The above is the detailed content of How to learn AngularJS? Angularjs learning tutorial keeps you from getting lost. For more information, please follow other related articles on the PHP Chinese website!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Why use angular4? The difference between angularjs and angular4Next article：Why use angular4? The difference between angularjs and angular4

See more