집 > 기사 > 웹 프론트엔드 > AngularJS를 배우는 방법? Angularjs 학습 튜토리얼을 사용하면 길을 잃지 않게 됩니다.

AngularJS를 배우는 방법? Angularjs 학습 튜토리얼을 사용하면 길을 잃지 않게 됩니다.

寻∝梦원래의: 2018-09-08 11:36:001157검색

이 글은 주로 angularjs의 구문 소개와 Anglejs의 범위 설명, Anglejs 컨트롤러 및 서비스에 대한 설명을 다루고 있습니다. 다음으로 이 글을 함께 읽어보겠습니다.

Filter

$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

다중 컨트롤러 컨트롤러

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 배열 항목에서 하위 집합을 선택합니다.

소문자 문자열을 소문자로 포맷합니다.

orderBy 표현식에 따라 배열을 정렬합니다.

uppercase 문자열을 대문자로 포맷합니다.

Filter 입력

입력 필터는 파이프 문자(|)와 필터 뒤에 콜론과 모델 이름이 오는 지시어에 추가할 수 있습니다.

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

사용자 정의 필터

다음 예는 문자열

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

대문자, 소문자 변환을 역방향 필터로 사용자 정의합니다. (자세한 내용을 보려면 PHP 중국어 웹사이트AngularJS 개발 매뉴얼 학습을 참조하세요.)

AngularJS 서비스(Service)

AngularJS에서는 자신만의 서비스를 만들거나 내장된 서비스를 사용할 수 있습니다. AngularJS에서 서비스는 AngularJS 애플리케이션에서 사용할 수 있는 함수 또는 개체입니다. $location

location.absUrl(); 현재 페이지의 URL 주소를 가져오는 내장 서비스

$http 서비스

$http가 가장 일반적으로 사용됩니다. AngularJS 애플리케이션의 서비스. 서비스는 서버에 요청을 보내고, 애플리케이션은 서버가 보낸 데이터에 응답합니다.

$timeout 서비스

interval 서비스는 JS window.setInterval 함수에 해당합니다.

커스텀 서비스 생성

커스텀 서비스를 사용하려면 컨트롤러를 정의하고 종속성을 설정할 때 독립적으로 추가해야 합니다.

커스텀 서비스를 생성하고 애플리케이션에 연결한 후 사용할 수 있습니다. 컨트롤러, 지시문, 필터 또는 기타 서비스에서.

<!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$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 선택 상자)

AngularJS는 배열이나 객체를 사용하여 옵션 드롭다운 목록을 만들 수 있습니다.

ng-option 지시문을 사용하여 드롭다운 목록을 생성하면 목록 항목이 루프의 개체 및 배열을 통해 출력됩니다.

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

설정 드롭다운 상자의 초기 값

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

이 글은 여기에서 끝납니다. (자세한 내용을 보려면 PHP 중국어 웹사이트
AngularJS 사용자 매뉴얼을 방문하세요.) 궁금한 점이 있으면 남겨주세요. 아래 메시지.

위 내용은 AngularJS를 배우는 방법? Angularjs 학습 튜토리얼을 사용하면 길을 잃지 않게 됩니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명：

이전 기사：왜 Angle4를 사용하나요? Anglejs와 Angle4의 차이점다음 기사：왜 Angle4를 사용하나요? Anglejs와 Angle4의 차이점