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 차원 배열이고

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

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

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

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

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

<tr ng-repeat="row in board.grid">

이 경우 컨트롤러 함수는 컨트롤러의 종속성

인 매개 변수 ['ng']를 허용합니다. AngularJS는 종속성 분사 를 사용 하여이 서비스 객체를 제공하여 함수 매개 변수의 이름에서 올바른 개체를 유추합니다 (미니 화를 허용하는 대체 구문이 있습니다).

이제 우리는 이제 HTML 템플릿에 ng-app 지시문을 추가하여 컨트롤러에 연결합니다.

동일, 컨트롤러 이름이있는 속성만큼 간단합니다. 흥미로운 일이 여기에서 발생합니다 - 우리 바디 태그 내부에 중첩 된 요소는 이제

<td ng-repeat="cell in row">
  {{ cell.marker }}
</td>

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

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

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

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

app = angular.module('ngOughts', ['ng'])

공장을 추가하십시오

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

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

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

우리는 각

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

요소에

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

<tr ng-repeat="row in board.grid">

양방향 입니다. 모델의 변화를 관찰하고 다시보기로 전파합니다. 마찬가지로보기를 업데이트하면 해당 모델이 업데이트됩니다. 우리의 태그는

내부 그리드에서 업데이트되며

의 내용이이를 반영하도록 즉시 변경됩니다. 이것은 전에 작성해야 할 취약한 선택기 의존적 보일러 플레이트 코드를 많이 제거합니다. 파이프 라인이 아닌 응용 프로그램 논리 및 동작에 집중할 수 있습니다.

우리가 누군가가 이길 것이라는 것을 알고 있다면 좋을 것입니다. 그것을 구현합시다. 여기에서 당첨 기준을 확인하는 코드를 생략하지만 최종 코드에는 존재합니다. 우리가 승자를 찾을 때, 우리는 승자를 구성하는 각 셀에서 승리 속성을 설정할 것이라고 가정합니다.

그러면 우리는

를 다음과 같은 것으로 바꿀 수 있습니다. Board 가 사실이라면, <td>는 "승리"CSS 클래스를 에 적용 할 것입니다. 우리의 승리를 축하하기 위해 즐거운 녹색 배경을 설정합시다. 당신은 다른 게임을 할 것이라고 말했습니까? 리셋 보드 버튼이 필요합니다 <our> 컨트롤러에 추가하면 버튼을 클릭하면 <p> 호출합니다. 보드 마커가 지워지고 모든 CSS 클래스가 지워지고 다시 시작할 준비가되었습니다. DOM 요소를 업데이트 할 필요가 없습니다. </p> <show> 우리가 정말로 우리의 승리를 과시합시다 : <p> </p> 명령을 통해 게임이 이길 때 조건부 <p> 요소를 표시 할 수 있으며 데이터 바인딩을 사용하면 당첨자 태그를 삽입 할 수 있습니다. 단순하고 표현력이 있습니다. <code><td> 결합하기가 더 쉽고 테스트하기가 더 쉬워 지도록 추가하십시오. <not> 대부분의 코드는 평범한 오래된 JavaScript 코드를 처리한다는 점에 주목할 가치가 있습니다. 이것은 의도적 인 것입니다 - 프레임 워크 객체를 확장하지 않고 JS 코드를 작성하고 호출합니다. 이 접근법은 결합하기 쉬운 응용 프로그램을 만들고 테스트하기 쉬운 응용 프로그램을 만들 수 있으며 가볍게 느껴집니다. 우리의 설계 문제는 MVC로 분리되어 있지만 함께 연결하기 위해 많은 코드를 작성할 필요는 없습니다. <pre class='brush:php;toolbar:false;'>&lt;td ng-repeat=&quot;cell in row&quot;&gt; {{ cell.marker }} &lt;/td&gt;</pre> <ular> 그러나 AngularJS는 제한이 없습니다. 많은 사람들이 공식 문서와 비교적 가파른 학습 곡선에 대해 불평하며, 일부는 SEO에 대한 걱정을하고 다른 사람들은 비표준 HTML 속성 및 요소를 사용하는 것을 싫어합니다. <pre class='brush:php;toolbar:false;'>app = angular.module('ngOughts', ['ng'])</pre> 그러나 <are> 그러나 이러한 문제에 대한 해결책이 있으며 웹 개발에 대한 AngularJS의 독특한 접근 방식은 확실히 탐색 할 가치가 있습니다. <p><the> PLUNKR에 대한 최종 코드의 실제 효과를 보거나 GitHub에서 다운로드 할 수 있습니다. <p> 이 기사에서 댓글이 닫혔습니다. Angularjs에 대해 궁금한 점이 있습니까? 포럼에서 질문하는 이유는 무엇입니까? </p> Angularjs 지시 사항 및 데이터 바인딩 <p> <em>에 대한 FAQ </em> AngularJS 지침과 구성 요소의 차이점은 무엇입니까? </p> AngularJS 지침 및 구성 요소는 AngularJS 프레임 워크의 강력한 기능입니다. 지시문을 사용하면 재사용 가능한 사용자 정의 HTML 요소 및 속성을 만들 수 있으며 구성 요소는 더 간단한 구성을 사용하는 특수 지시문입니다. 구성 요소는 구성 요소 기반 애플리케이션 구조를 구축하는 데 적합하며, 이는 오늘날 프론트 엔드 개발에보다 현대적이고 널리 사용됩니다. 그러나 지침은 더 유연하며 구성 요소가 수행 할 수없는 DOM을 직접 작동시킬 수 있습니다. <p> </p> <h2 id="angularjs의-데이터-결합은-어떻게-작동합니까"> angularjs의 데이터 결합은 어떻게 작동합니까? </h2> AngularJS에서의 데이터 바인딩은 모델과 뷰 구성 요소 간의 데이터의 자동 동기화입니다. AngularJS는 모델을 응용 프로그램에서 단일 사실 소스로 취급 할 수있는 방식으로 데이터 바인딩을 구현합니다. 보기는 항상 모델의 투영입니다. 모델이 변경되면보기는 변경 사항을 반영하고 그 반대도 마찬가지입니다. </the></p> 일원 데이터 바인딩과 양방향 데이터 바인딩의 차이점을 설명 할 수 있습니까? <p> 일원 데이터 바인딩은 모델에서 뷰로 또는 모형으로의 간단한 데이터 흐름입니다. 즉, 모델 상태가 변경되면보기가 업데이트되지 않습니다. 반면, 양방향 데이터 바인딩은 모델 상태가 변경되면보기가 업데이트되면 (예 : 사용자 상호 작용으로 인해) 모델 상태가 업데이트됩니다. 이를 통해 실시간 효과를 허용합니다. 즉, 변경 (예 : 사용자 입력)이 모델 상태에 즉시 반영됩니다. </p> <h3> </h3> AngularJS에서 사용자 정의 지시문을 만드는 방법은 무엇입니까? <p> angularjs에서 사용자 정의 지시문을 만들려면 함수를 사용해야합니다. 지침의 이름을 지정 한 다음 모든 지침 옵션을 저장하는 공장 기능을 만들 수 있습니다. 공장 함수는 종속성 (있는 경우)을 사용하여 주입 한 다음 지침 옵션을 정의하는 객체를 반환합니다. </p> <p> </p> AngularJS 지침의 격리 범위는 얼마입니까? AngularJS 지시문의 분리 범위를 사용하면 지침을위한 새로운 범위를 만들 수 있습니다. 이는 지침 범위의 모든 변경 사항이 상위 범위에 영향을 미치지 않으며 그 반대도 마찬가지입니다. 재사용 가능한 모듈 식 구성 요소를 만들 때 매우 유용합니다. <p> </p> <h3 id="AngularJS-지침에서-전사를-사용하는-방법은-무엇입니까"> AngularJS 지침에서 전사를 사용하는 방법은 무엇입니까? </h3> 전사는 AngularJS의 기능으로 사용자 정의 컨텐츠를 지침에 삽입 할 수 있습니다. 지시문 정의 오브젝트에서 로 설정하면 디렉토리를 사용하여 지침 템플릿에 사용자 정의 컨텐츠를 삽입 할 수 있습니다. <p> </p> <p> AngularJS 지침의 링크 함수는 무엇입니까? </p> 링크 함수는 AngularJS 지시에 사용되어 DOM을 조작하거나 이벤트 리스너를 추가합니다. 템플릿을 복제 한 후에 실행됩니다. 이 기능은 일반적으로 DOM 이벤트 처리기 설정, 모델 속성 변경 모니터링 및 DOM 업데이트와 같은 작업을 수행하는 데 사용됩니다. <p> </p> <p> AngularJS 지시문에서 컨트롤러 기능을 사용하는 방법은 무엇입니까? </p> <h3> </h3> 컨트롤러 함수는 AngularJS 범위를 향상시키는 데 사용되는 JavaScript 생성자입니다. 컨트롤러가 지시를 통해 DOM에 부착되면 AngularJS는 지정된 컨트롤러 생성자를 사용하여 새로운 컨트롤러 객체를 인스턴스화합니다. 새로운 서브 스코프가 생성자로서 주입 가능한 매개 변수로 컨트롤러에 생성되어 제공됩니다. <p> </p> <p> 지침 범위 옵션에서 "@", "="및 "&"의 차이점은 무엇입니까? <code>ng-controller $scope 이 기호는 데이터를 명령어 범위에 바인딩하는 데 사용됩니다. "@"는 문자열 바인딩에 사용되며, "="는 양방향 모델 바인딩에 사용되며 "&"는 메소드 바인딩에 사용됩니다. 스코프를 분리하여 지침을보다 모듈화하고 재사용 할 수 있습니다.

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

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

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