AngularJS 구성 요소는 어떻게 작동하나요? Anglejs 컴포넌트의 사용 예
- 寻∝梦원래의
- 2018-09-08 14:43:211265검색
이 글에서는 angularjs 구성요소를 소개합니다. 구성요소가 어떻게 작동하는지 살펴보겠습니다. 그렇다면 바로 이 글을 읽어보세요
angularjs에 대한 서문:
널리 사용되는 프론트엔드 JS 프레임워크는 VUE, REACK, ANGULAR과 같습니다. 이 세 가지 프레임워크에는 양방향 데이터 바인딩이라는 공통 기능이 있습니다. , 구성 요소 기반 개발. Angular1.5 이전 버전에서는 directive가 컴포넌트 형태로 사용되었고, directive 자체가 컴포넌트가 아닌 명령어이기 때문에 컴포넌트의 책임을 잘 맡지 못하기 때문에 구글은 Angular1에서 컴포넌트 컴포넌트를 버전 5부터 출시하게 되었습니다. 애플리케이션에서 구성 요소 개발 부담을 짊어지려면 구성 요소가 어떻게 작동할까요? 어떻게 사용해야 합니까? 이번 장에서는 컴포넌트 컴포넌트의 사용법을 자세히 살펴보겠습니다.
AngularJS에서는 지시어보다 Component가 컴포넌트 기반 개발에 더 적합합니다.
먼저 비교적 간단한 컴포넌트 예제를 살펴보겠습니다.
index.html
<!DOCTYPE html><html lang="en" ng-app="ComponentTestApp"><head>
<meta charset="UTF-8">
<title>Document</title></head><body ng-controller="MainCtrl as ctrl">
<h3>hero</h3>
<br>
<hero-detail hero='ctrl.hero'></hero-detail>
<script src="js/angular.js"></script>
<script src="js/index.js"></script>
<script src="js/heroDetail.js"></script></body></html>index.html에서 이 태그의 선언 방법은 지시문과 유사합니다. 이 태그에 정의된 속성은 What입니다. 그게 무슨 용도야? 볼까요
index.js
(function(angular){
angular.module('ComponentTestApp',[])
.controller('MainCtrl',function(){
this.hero = {
name:'Sunday'
}
});})(angular);index.js에서 우리는 이 컨트롤러를 선언했고, 컨트롤러에서 우리는 이 코드 줄을 썼습니다
this.hero = {
name:'Sunday'
}주의 깊은 친구들이 이미 봤을 거라 믿습니다. 예, 이것은 속성에 해당합니다 컴포넌트 내 통신의 핵심인 index.html hero='ctrl.hero'에 선언했습니다.
heroDetail.html
<h1>HeroName: {{$ctrl.hero.name}}</h1>heroDetail.html에는 index.html에서 전송된 값이 표시됩니다.
heroDetail.js
(function(angular){
function HeroDetailController(){
}
angular.module('ComponentTestApp')
.component('heroDetail',{
templateUrl:'views/heroDetail.html',
controller:HeroDetailController,
bindings:{
hero:'='
}
});})(angular);heroDetail.js에서 우리는 HeroDetail의 구성 요소를 선언합니다. 여기에서 index.html에 표시되는 태그는 가로 막대로 구분되며 js 코드에서 카멜 케이스를 사용하여 표시되어야 합니다. . 그중에는 구성 요소의 통신 프로토콜을 나타내는 바인딩 개체가 있습니다.
현재 페이지의 표시 효과는 다음과 같습니다.
데이터 바인딩에 바인딩을 사용할 때 공식에서는 데이터 바인딩에 "="를 사용하는 것을 권장하지 않습니다. "="는 양방향 데이터 바인딩이기 때문입니다. 즉, 구성 요소의 데이터를 수정하면 상위 구성 요소의 값도 수정됩니다. 공식적인 권장 사항은 단방향 데이터 바인딩에 "AngularJS 개발 매뉴얼을 참고하세요)
자, 이제 데이터 바인딩을 소개했는데, Component와 상위 컴포넌트 메소드 간의 바인딩은 어떻게 이루어지나요?
다음 예제를 살펴보겠습니다
index.html
<!DOCTYPE html><html lang="en" ng-app="ComponentTestApp"><head>
<meta charset="UTF-8">
<title>Document</title></head><body ng-controller="MainCtrl as ctrl">
<hero-detail on-log="ctrl.log(text)"></hero-detail>
<script src="js/angular.js"></script>
<script src="js/index.js"></script>
<script src="js/heroDetail.js"></script></body></html>index.js
(function(angular){
angular.module('ComponentTestApp',[])
.controller('MainCtrl',function(){
this.log = function(text){
console.log("输出的内容为： " + text);
}
});})(angular);heroDetail.html
<input type="text" placeholder="被输出的内容" ng-model="text"><br><button ng-click="onLog()">outputLog</button>
heroDetail.js
(function(angular){
function HeroDetailController($scope){
$scope.text = '';
var ctrl = this;
$scope.onLog = function(){
ctrl.onLog({text:$scope.text});
}
}
angular.module('ComponentTestApp')
.component('heroDetail',{
templateUrl:'views/heroDetail.html',
controller:HeroDetailController,
bindings:{
onLog:'&'
}
});})(angular);코드에서 "&" 기호를 통해 onLog 메서드를 바인딩합니다. () 이 메소드는 텍스트 매개변수를 수신합니다. 매개변수가 전달될 때 json 형식으로 전달된다는 점에 유의해야 합니다. 이런 식으로 outputLog 버튼을 클릭하면 입력에 입력한 내용이 출력됩니다.
알겠습니다. 이 기사는 여기서 끝납니다. (자세한 내용을 보려면 PHP 중국어 웹사이트 AngularJS 사용자 매뉴얼을 방문하세요.) 궁금한 점이 있으면 아래에 메시지를 남겨주세요.
위 내용은 AngularJS 구성 요소는 어떻게 작동하나요? Anglejs 컴포넌트의 사용 예의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!