집 > 기사 > 웹 프론트엔드 > Anglejs의 세 가지 주요 모듈 연구 노트(모달, 컨트롤러, 뷰)_AngularJS

Anglejs의 세 가지 주요 모듈 연구 노트(모달, 컨트롤러, 뷰)_AngularJS

WBOY원래의: 2016-05-16 15:38:121134검색

오늘은 Anglejs의 세 가지 주요 모듈인 모달, 컨트롤러, 뷰를 중심으로 자세히 설명하겠습니다.

먼저 이 세 모듈의 관계에 대해 말씀드리겠습니다.

1. 데이터 모델(모달)은 주로 데이터를 제공합니다. 뷰와 직접 상호작용하지 않습니다.

2. 컨트롤러는 모달에서 제공하는 데이터를 저장하고 뷰로 동작합니다.

3.view는 페이지 표시인 뷰입니다.

4. 간단히 말해서 컨트롤러는 데이터와 뷰 간의 통신을 담당하며 둘 사이의 인터페이스입니다. 업무 분업이 명확하고 모듈화가 이루어졌습니다.

1. 데이터 모델(모달)을 사용하는 방법은 무엇입니까?

데이터 모델에 관해 이전 튜토리얼의 예를 살펴보겠습니다.

<!DOCTYPE html>
 <html ng-app="app"> 
   <head>
   <meta charset="UTF-8">
   <title>Document</title>
     <script src="angular-1.2.19/angular.js"></script> <!-- 引入了AngularJS包 -->
     <script src="controll.js"></script> //引入控制器
   </head>
   <body>
     <div ng-controller="controller"> 
       <input type="text" ng-model="text">
       <b>{{greeting.text}} {{text}}</b>
     </div>
   </body>
 </html>

1. 먼저angularjs 패키지를 시작할 때 전체 범위를 지정하는 ng-app 지시문을 찾으세요.

2. 그런 다음 계속해서 특정 지침을 찾습니다. 여기서는 "텍스트" 데이터 모델을 정의하는 ng-model을 찾을 수 있습니다.

3. 아래에서는 텍스트 모델을 사용하므로 양방향 바인딩이 이루어집니다. (ng-app 범위 내라면 텍스트를 바로 사용 가능합니다)

2. 컨트롤러 사용법은?

먼저 컨트롤러 사용의 몇 가지 핵심 사항에 대해 이야기해 보겠습니다.

1. 뷰에 컨트롤러를 재사용하지 마세요. 컨트롤러는 일반적으로 소수의 뷰 집합(일대일 대응)만 담당합니다.

2. 컨트롤러에서 DOM을 직접 조작하지 마세요. DOM을 조작하려면 지시어 명령을 사용하세요.

3. 컨트롤러에서 데이터 필터링 작업을 수행하지 마세요. 이를 구현하는 전용 필터 서비스가 있습니다.

4. 일반적으로 서로 다른 컨트롤러는 서로 호출하지 않으며 컨트롤러 간의 상호 작용은 일반적으로 이벤트를 통해 수행됩니다.

그러면 위 코드의 파란색 부분을 살펴보겠습니다. control.js의 내용은 다음과 같습니다.

 function controller($scope){
   $scope.greeting = {
     text : 'hello'
   };
 }

Angularjs는 ng-controller 명령을 찾은 다음 이 명령이 정의된 위치인 control.js 파일을 찾은 다음 Greeting.text를 사용하여 해당 값을 직접 가져올 수 있습니다.

3. 뷰는 어떻게 사용하나요?

뷰 사용 방법을 이야기할 때 지시문을 언급해야 합니다. (이것이 새로운 지식입니다!!!)

코드를 살펴보겠습니다.

var appModule = angular.module('app', []); //app是html中ng-app指令的名称

appModule.directive('hello', function() { //定义一个指令，名称叫hello
  return {
    restrict: 'E',
    template: '<div>Hi there</div>',
    replace: true
  };
});

위의 코드는 명령 태그를 정의합니다. HTML에서 직접 5d31ad12eb7f2467fa10436b397d69f6ce2196d7bcfa28427152ee3efb4b3e34를 시도하면 어떤 일이 일어나는지 확인할 수 있습니다. ! !

그러면 각 속성의 의미를 설명하겠습니다.

1.restrict: (문자열) 명령이 DOM에서 선언되는 형식을 나타내는 선택적 매개변수입니다. 값은 다음과 같습니다: E(요소), A(속성), C(클래스), M(주석) 위의 예는 요소 형식(5d31ad12eb7f2467fa10436b397d69f6ce2196d7bcfa28427152ee3efb4b3e34)으로 설정됩니다.

2.템플릿: (문자열 또는 함수) 선택적 매개변수, 반환된 콘텐츠, 위의 예에서는 div를 반환합니다.

3.templateUrl: 위와 동일하게 url을 통해 콘텐츠를 반환합니다. 반환되는 콘텐츠가 많은 경우 이 속성을 사용하는 것이 좋습니다.

4.relace: (부울 값), 기본값은 false입니다. 위의 예는 true로 설정됩니다. 페이지는 hello 태그를 사용한 후 반환된 div로 대체됩니다.

5.transclude: (부울 값), true로 설정된 경우. 이 구성 옵션을 사용하면 지시문 요소에 포함된 콘텐츠를 추출하여 ng-transclude와 함께 사용되는 지시문 템플릿의 특정 위치에 배치할 수 있습니다.

6. 다른 속성도 나중에 자세히 알아보겠습니다. . .

자, 위의 내용은 세 가지 주요 모듈을 사용하기 위한 지침입니다. 모든 분들의 공부에 도움이 되었으면 좋겠습니다. . . 위의 내용에 대해 이해가 되지 않는 부분이 있는 경우 저에게 문의하시면 확실히 답변해 드리겠습니다. 모두 행복한 삶을 누리시길 바랍니다!

성명：

이전 기사：JS를 사용하여 웹사이트 메뉴의 드래그 앤 드롭 효과를 구현하는 방법다음 기사：JS를 사용하여 웹사이트 메뉴의 드래그 앤 드롭 효과를 구현하는 방법

Anglejs의 세 가지 주요 모듈 연구 노트(모달, 컨트롤러, 뷰)_AngularJS

관련 기사