Angularjs

코어 포인트

Google이 개발 한 JavaScript 프레임 워크 인 AngularJS를 통해 개발자는 문서 개체 모델 (DOM)을 직접 조작하지 않고도 프론트 엔드 코드를 만들 수 있습니다. 지침 및 데이터 바인딩을 사용하여 동적 뷰 및 컨트롤러를 정의하여 달성 할 수 있습니다.

AngularJS는 MVC (Model-View-Controller) 구조를 사용합니다. 이 모델은 지침을 통해 HTML에 연결된 각도 모듈 및 컨트롤러로 정의됩니다. 이를 통해 모델의 변경 사항은 자동으로보기를 자동으로 업데이트하고 그 반대의 양방향 데이터 바인딩이 가능합니다.

AngularJS에서 지시문은 HTML의 어휘를 확장하여보다 역동적이고 강력한 템플릿을 제공합니다. 예로는 세트 반복을위한 NG- 반복, 이벤트 처리를위한 NG- 클릭 및 조건부 렌더링을위한 NG-SHOW가 있습니다.
• AngularJS는 학습 곡선과 비표준 HTML 속성의 사용에 대한 비판을 받았지만, 더욱 복합적이고 테스트 가능한 응용 프로그램의 생성을 장려하는 웹 개발에 대한 독특한 접근 방식을 제공합니다. MVC와의 설계 문제를 분리하면 구성 요소를 연결하는 데 필요한 코드의 양이 줄어 듭니다.
• Angularjs는 고급 철학으로 가장 인기있는 JavaScript 프레임 워크 중 하나가되었습니다. Google의 지원 및 개발을 통해 AngularJS의 프론트 엔드 접근 방식은 처음에는 약간 이상하게 보일 수 있지만, 왜 이전에 다른 접근법을 사용했는지 궁금해 할 것입니다. AngularJS를 통해 개발자는 DOM을 직접 조작하지 않고도 프론트 엔드 코드를 작성할 수 있습니다. 이 튜토리얼은 지침 및 데이터 바인딩을 사용하여 동적보기 및 컨트롤러를 정의하는 응용 프로그램을 구축하여 프로세스를 안내합니다. CoffeeScript (AngularJS가 요구하지 않음)에 익숙하다면이 기사에 더 관심이 있지만 JavaScript의 기본 사항을 마스터하는 것으로 충분합니다. 당신은 전에 많은 할 일 앱을 보았을 것입니다. 그래서 흥미로운 것을 만들어 봅시다-Tic Toe! 우리는 마킹 보드부터 시작합니다. AngularJS는 JavaScript 뒤에 DOM을 숨기는 대신 HTML의 어휘를 확장한다고 주장합니다. 아이디어는 HTML 자체가 꽤 좋지만 이미 익숙한 강력하고 역동적 인 템플릿 언어를 구축하기 위해 일부 요소와 속성을 추가 할 수 있습니다. 우리 보드는 단순한 테이블입니다. 우리가 좋은 욕망으로 프로그램한다면, 우리는 실제로 보드를 반복하고 각 셀에 대해 하나의 셀을 출력하면됩니다. 실제 코드는 우리의 아이디어에 매우 가깝습니다 :
• 잠깐, 그 이상한 ng 요소와 수염 괄호는 무엇입니까? 한 걸음 물러서 단계별로 가져 가자.
Angularjs 명령 는 Angularjs의 지시

이며 제공된 HTML 확장자 중 하나입니다. 이를 통해 컬렉션을 반복하고 각 프로젝트의 템플릿을 인스턴스화 할 수 있습니다. 이 예에서는 Angularjs에 객체의

속성에서 각 선을 반복하도록 지시합니다. 가 2 차원 배열이고

<code class="language-html"><table>
  <tr ng-repeat="row in board.grid">
    <td ng-repeat="cell in row">
      {{ cell.marker }}
    </td>
  </tr>
</table></code>

가 창의 물체라고 가정 해 봅시다.

<code class="language-html"><table>
  <tr ng-repeat="row in board.grid">
    <td ng-repeat="cell in row">
      {{ cell.marker }}
    </td>
  </tr>
</table></code>

그런 다음, 우리는 다른 지침을 사용하여 행의 셀을 반복합니다. 여기의 이중 브레이스는 angularjs 데이터 결합 를 사용하는 expression >의 내용이 해당 셀의 ng-repeat 속성으로 대체 될 것임을 나타냅니다. 지금까지, 그것은 매우 간단합니다. 생성 된 태그가 어떻게 보일지 즉시 이해할 수 있습니다. 새로운 요소를 만들고 채우기 위해 jQuery와 같은 헤비급 도구를 사용할 필요가 없습니다. 단지 템플릿을 명확히해야합니다. 이것은 유지하기가 더 쉽습니다. 우리는 HTML을보고 실제로 글을 쓰지 않는 모호한 JavaScript 코드를 추적하지 않고 DOM이 어떻게 변할 것인지 정확히 알 수 있습니다. 이제 우리는 보드의 상태를 시각화 할 수 있으며 의 실제 내용을 정의하여 데이터 소스를 제공합니다. 먼저 응용 프로그램의 AngularJS 모듈을 정의하기 위해 일부 JavaScript 코드를 추가합니다. 첫 번째 매개 변수는 응용 프로그램의 이름입니다. <td>는 핵심 AngularJS 서비스를 제공하는 AngularJS의 "NG"모듈이 필요하다는 것을 의미합니다. <code>marker 우리는 지시문을 사용하도록 HTML을 조정하여 응용 프로그램 모듈을 사용하도록 지시합니다.

MVC- 컨트롤러 및 뷰를 정의 board angularjs의 MVC 기능이 여기에서 작용합니다. 새로 생성 된 응용 프로그램 모듈에서 컨트롤러 함수를 호출하여 컨트롤러의 이름과이를 구현하는 기능을 전달하기 위해 JS 코드를 추가합니다.

<code class="language-html"><tr ng-repeat="row in board.grid">
이 경우 컨트롤러 함수는 컨트롤러의  종속성 <p> 인 매개 변수 <code>['ng']</code>를 허용합니다. AngularJS는 <s s> 종속성 분사 를 사용 하여이 서비스 객체를 제공하여 함수 매개 변수의 이름에서 올바른 개체를 유추합니다 (미니 화를 허용하는 대체 구문이 있습니다). </s></p>
<p>
<a> 이제 우리는 이제 HTML 템플릿에 <code>ng-app</code> 지시문을 추가하여 컨트롤러에 연결합니다.
</a></p>
 동일, 컨트롤러 이름이있는 속성만큼 간단합니다. 흥미로운 일이 여기에서 발생합니다 - 우리 바디 태그 내부에 중첩 된 요소는 이제 <pre class="brush:php;toolbar:false"><code class="language-html"><td ng-repeat="cell in row">
  {{ cell.marker }}
</td></code>

서비스 객체에 액세스 할 수 있습니다. 그런 다음 속성은 의 범위 내에서

변수를 찾을 것이므로 다음을 정의해 봅시다 :

우리는 지금 약간의 진전을 이루고 있습니다. 우리는 컨트롤러에

를 주입하여 인스턴스화하여 의 범위 내에서 사용할 수 있도록합니다. 계속해서 간단한 클래스를 구현합시다.

<code class="language-javascript">app = angular.module('ngOughts', ['ng'])</code>

공장을 추가하십시오

$scope 그런 다음 팩토리 를 정의 할 수 있으며 클래스 만 반환하여 컨트롤러에 주입 할 수 있습니다. 는 공장 함수 내에서 직접 정의 할 수 있고

를 창 객체에 넣을 수도 있지만 여기에 독립적으로 유지하면 angularjs와 독립적으로

를 테스트하고 재사용 성을 장려 할 수 있습니다. ng-controller 그래서 이제 우리는 빈 체스 보드가 있습니다. 흥미 진진한 것들? 셀을 클릭하면 마크가 표시되도록 설정합시다.

우리는 각

<code class="language-html"><table>
  <tr ng-repeat="row in board.grid">
    <td ng-repeat="cell in row">
      {{ cell.marker }}
    </td>
  </tr>
</table></code>

요소에

지시를 추가했습니다. 테이블 셀을 클릭하면 클릭 된 셀 객체를 사용하여 의 함수를 호출합니다. 채우기 구현 : <td> <code>ng-click 양방향 데이터 바인딩 board playCell 알겠습니다. 이제 보드 모델을 업데이트 했으므로보기를 업데이트해야합니다. Board 아니요! AngularJS 데이터 바인딩은

<code class="language-html"><tr ng-repeat="row in board.grid"> 양방향 입니다. 모델의 변화를 관찰하고 다시보기로 전파합니다. 마찬가지로보기를 업데이트하면 해당 모델이 업데이트됩니다. 우리의 태그는 <h2> 내부 그리드에서 업데이트되며 </h2>의 내용이이를 반영하도록 즉시 변경됩니다. 
<ates> 이것은 전에 작성해야 할 취약한 선택기 의존적 보일러 플레이트 코드를 많이 제거합니다. 파이프 라인이 아닌 응용 프로그램 논리 및 동작에 집중할 수 있습니다. <p>
우리가 누군가가 이길 것이라는 것을 알고 있다면 좋을 것입니다. 그것을 구현합시다. 여기에서 당첨 기준을 확인하는 코드를 생략하지만 최종 코드에는 존재합니다. 우리가 승자를 찾을 때, 우리는 승자를 구성하는 각 셀에서 승리 속성을 설정할 것이라고 가정합니다. </p>
<change change> 그러면 우리는 <p>를 다음과 같은 것으로 바꿀 수 있습니다.
<em>
</em>
<code>Board</code> 가 사실이라면, <code><td>는 "승리"CSS 클래스를 에 적용 할 것입니다. 우리의 승리를 축하하기 위해 즐거운 녹색 배경을 설정합시다. 당신은 다른 게임을 할 것이라고 말했습니까? 리셋 보드 버튼이 필요합니다

<our> 컨트롤러에 추가하면 버튼을 클릭하면 <p> 호출합니다. 보드 마커가 지워지고 모든 CSS 클래스가 지워지고 다시 시작할 준비가되었습니다. DOM 요소를 업데이트 할 필요가 없습니다. </p>
<show> 우리가 정말로 우리의 승리를 과시합시다 : 
<p>
 </p> 명령을 통해 게임이 이길 때 조건부 <p> 요소를 표시 할 수 있으며 데이터 바인딩을 사용하면 당첨자 태그를 삽입 할 수 있습니다. 단순하고 표현력이 있습니다. <code><td>
  결합하기가 더 쉽고 테스트하기가 더 쉬워 지도록 추가하십시오.
<not> 대부분의 코드는 평범한 오래된 JavaScript 코드를 처리한다는 점에 주목할 가치가 있습니다. 이것은 의도적 인 것입니다 - 프레임 워크 객체를 확장하지 않고 JS 코드를 작성하고 호출합니다. 이 접근법은 결합하기 쉬운 응용 프로그램을 만들고 테스트하기 쉬운 응용 프로그램을 만들 수 있으며 가볍게 느껴집니다. 우리의 설계 문제는 MVC로 분리되어 있지만 함께 연결하기 위해 많은 코드를 작성할 필요는 없습니다. <pre class="brush:php;toolbar:false"><code class="language-html"><td ng-repeat="cell in row">
  {{ cell.marker }}
</td></code>

그러나 AngularJS는 제한이 없습니다. 많은 사람들이 공식 문서와 비교적 가파른 학습 곡선에 대해 불평하며, 일부는 SEO에 대한 걱정을하고 다른 사람들은 비표준 HTML 속성 및 요소를 사용하는 것을 싫어합니다.

<code class="language-javascript">app = angular.module('ngOughts', ['ng'])</code>

그러나 그러나 이러한 문제에 대한 해결책이 있으며 웹 개발에 대한 AngularJS의 독특한 접근 방식은 확실히 탐색 할 가치가 있습니다.

PLUNKR에 대한 최종 코드의 실제 효과를 보거나 GitHub에서 다운로드 할 수 있습니다.

이 기사에서 댓글이 닫혔습니다. Angularjs에 대해 궁금한 점이 있습니까? 포럼에서 질문하는 이유는 무엇입니까?

Angularjs 지시 사항 및 데이터 바인딩

에 대한 FAQ AngularJS 지침과 구성 요소의 차이점은 무엇입니까?

AngularJS 지침 및 구성 요소는 AngularJS 프레임 워크의 강력한 기능입니다. 지시문을 사용하면 재사용 가능한 사용자 정의 HTML 요소 및 속성을 만들 수 있으며 구성 요소는 더 간단한 구성을 사용하는 특수 지시문입니다. 구성 요소는 구성 요소 기반 애플리케이션 구조를 구축하는 데 적합하며, 이는 오늘날 프론트 엔드 개발에보다 현대적이고 널리 사용됩니다. 그러나 지침은 더 유연하며 구성 요소가 수행 할 수없는 DOM을 직접 작동시킬 수 있습니다.

angularjs의 데이터 결합은 어떻게 작동합니까?

AngularJS에서의 데이터 바인딩은 모델과 뷰 구성 요소 간의 데이터의 자동 동기화입니다. AngularJS는 모델을 응용 프로그램에서 단일 사실 소스로 취급 할 수있는 방식으로 데이터 바인딩을 구현합니다. 보기는 항상 모델의 투영입니다. 모델이 변경되면보기는 변경 사항을 반영하고 그 반대도 마찬가지입니다.
일원 데이터 바인딩과 양방향 데이터 바인딩의 차이점을 설명 할 수 있습니까?

일원 데이터 바인딩은 모델에서 뷰로 또는 모형으로의 간단한 데이터 흐름입니다. 즉, 모델 상태가 변경되면보기가 업데이트되지 않습니다. 반면, 양방향 데이터 바인딩은 모델 상태가 변경되면보기가 업데이트되면 (예 : 사용자 상호 작용으로 인해) 모델 상태가 업데이트됩니다. 이를 통해 실시간 효과를 허용합니다. 즉, 변경 (예 : 사용자 입력)이 모델 상태에 즉시 반영됩니다.

AngularJS에서 사용자 정의 지시문을 만드는 방법은 무엇입니까?

angularjs에서 사용자 정의 지시문을 만들려면 함수를 사용해야합니다. 지침의 이름을 지정 한 다음 모든 지침 옵션을 저장하는 공장 기능을 만들 수 있습니다. 공장 함수는 종속성 (있는 경우)을 사용하여 주입 한 다음 지침 옵션을 정의하는 객체를 반환합니다.

AngularJS 지침의 격리 범위는 얼마입니까? AngularJS 지시문의 분리 범위를 사용하면 지침을위한 새로운 범위를 만들 수 있습니다. 이는 지침 범위의 모든 변경 사항이 상위 범위에 영향을 미치지 않으며 그 반대도 마찬가지입니다. 재사용 가능한 모듈 식 구성 요소를 만들 때 매우 유용합니다.

AngularJS 지침에서 전사를 사용하는 방법은 무엇입니까?

전사는 AngularJS의 기능으로 사용자 정의 컨텐츠를 지침에 삽입 할 수 있습니다. 지시문 정의 오브젝트에서 로 설정하면 디렉토리를 사용하여 지침 템플릿에 사용자 정의 컨텐츠를 삽입 할 수 있습니다.

AngularJS 지침의 링크 함수는 무엇입니까?

링크 함수는 AngularJS 지시에 사용되어 DOM을 조작하거나 이벤트 리스너를 추가합니다. 템플릿을 복제 한 후에 실행됩니다. 이 기능은 일반적으로 DOM 이벤트 처리기 설정, 모델 속성 변경 모니터링 및 DOM 업데이트와 같은 작업을 수행하는 데 사용됩니다.

AngularJS 지시문에서 컨트롤러 기능을 사용하는 방법은 무엇입니까?

컨트롤러 함수는 AngularJS 범위를 향상시키는 데 사용되는 JavaScript 생성자입니다. 컨트롤러가 지시를 통해 DOM에 부착되면 AngularJS는 지정된 컨트롤러 생성자를 사용하여 새로운 컨트롤러 객체를 인스턴스화합니다. 새로운 서브 스코프가 생성자로서 주입 가능한 매개 변수로 컨트롤러에 생성되어 제공됩니다.

지침 범위 옵션에서 "@", "="및 "&"의 차이점은 무엇입니까? ng-controller $scope 이 기호는 데이터를 명령어 범위에 바인딩하는 데 사용됩니다. "@"는 문자열 바인딩에 사용되며, "="는 양방향 모델 바인딩에 사용되며 "&"는 메소드 바인딩에 사용됩니다. 스코프를 분리하여 지침을보다 모듈화하고 재사용 할 수 있습니다.

AngularJS 지침을 테스트하는 방법은 무엇입니까? AngularJS는 라는 모듈을 제공하여 단위 테스트에서 AngularJS 서비스를 주입하고 조롱 할 수 있습니다. 이를 사용하여 지침을 테스트 할 수 있습니다.

와 함께 Jasmine 또는 Mocha와 같은 다른 테스트 프레임 워크를 사용하여 테스트를 작성하고 실행할 수도 있습니다.

위 내용은 Angularjs의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!