AngularJS에서 양방향 데이터 바인딩 이해

angularjs 양방향 데이터 바인딩의 자세한 설명 및 적용 : 동적 비즈니스 카드 생성기

코어 포인트

AngularJS의 양방향 데이터 바인딩을 사용하면 변경 사항을 업데이트 할 수 있으며 그 반대도 마찬가지입니다. 이것은 AngularJS 내장 지시문을 통해 및 를 통해 달성됩니다.

angularjs의
• 객체는 양방향 데이터 바인딩에 중요한 역할을하며 컨트롤러와 뷰 사이의 브리지 역할을하여 모델 데이터 및 기능을 저장합니다. ng-model AngularJS는 이벤트와 속성 바인딩 및 다이제스트 기간 메커니즘을 결합하여 데이터가 변경 될 때 모니터 및 업데이트보기에 양방향 데이터 바인딩을 구현합니다. ng-bind 양방향 데이터 바인딩은 뷰와 모델을 자동으로 동기화하여 개발을 단순화 할 수 있지만, 부적절하게 사용되는 경우 각 바인딩에 대한 모니터가 추가되어 성능에 부정적인 영향을 줄 수 있습니다.
• 이 튜토리얼은 동적 비즈니스 카드 생성기를 구축하여 양방향 데이터 바인딩이 AngularJS에서 어떻게 작동하는지 보여줍니다. 이 생성기를 사용하면 이름, 경력, 이메일, 회사 로고 및 홈페이지 및 소셜 미디어 웹 사이트에 대한 링크로 개인화 할 수있는 고유 한 가상 명함을 만들 수 있습니다. HTML5 색상 입력을 사용하여 카드의 배경 및 텍스트 색상을 조정하고 실시간으로 변경된 변경 사항을 볼 수 있습니다. 최종 효과는 다음과 같습니다. $scope
• 시작
• 우리는 Bower를 사용하여 프로젝트 종속성을 관리합니다. Bower는 NPM을 사용하여 설치할 수있는 웹 패키지 관리자입니다 (이는 Node.js를 설치해야 함). Node.js (또는 NPM)를 설치하는 데 도움이 필요한 경우이 주제에 대한 최근 SitePoint 기사를 확인하십시오. Bower 설치에 도움이 필요한 경우 홈페이지에서 지침을 볼 수 있습니다. 이 프로젝트의 종속성은 부트 스트랩 프레임 워크 (스타일 및 아코디언 구성 요소), 글꼴 굉장한 (아이콘 용) 및 jQuery (부트 스트랩이 그것에 따라 다름) 및 angularjs입니다. Bower가 설치되고 구성되었다고 가정하고 새 디렉토리를 작성하고 해당 디렉토리로 이동하여 Bower로 프로젝트를 초기화하십시오.
그런 다음 Bower는 프로젝트의 루트 디렉토리에

파일을 만듭니다. 또한 프로젝트 이름, 저자 이름, 설명 등과 같은 몇 가지 질문을합니다. 이름 (Angular Card Generator의 경우) 아래에 "ACG"를 입력하고 필요에 따라 나머지를 채우거나 기본값을 수락하십시오). 생성 된 JSON 파일은 다음과 같아야합니다

다음, 터미널에서 다음 명령을 실행하십시오 :

이것은 프로젝트에 필요한 모든 종속성을 라는 디렉토리에 설치하고 종속성을 파일에 저장합니다. 이 폴더를 GitHub 저장소에 업로드하지 않으려면 에 를 추가하는 것이 좋습니다. 모든 기고자는 프로젝트 종속성의 루트에서

를 실행하여 동일하게 설치할 수 있으므로 를 GitHub 저장소에 업로드하지 않으려면 더 좋습니다.

angularjs 응용 프로그램의 구조

ACG 폴더에서 라는 파일을 만들고 라는 다른 파일을 만듭니다. 다음 코드를 : 에 추가하십시오 <code>index.html 우리는 태그에 및 style.css를 추가하여 웹 페이지를 시작합니다. index.html 지시문은 각 페이지를 AngularJS 응용 프로그램으로 알려주기 위해 필요하며 지시문은 컨트롤러 클래스를 우리의 시점에 첨부합니다. 그런 다음 제목에 지시문을 사용하여 페이지 제목이 모델과 동기화 된 다음 관련 CSS 파일 (in

) 및 js 파일 (의 최종 태그 이전)을 포함시킵니다. 이 파일 ( 제외)은 모두

mkdir ACG && cd ACG
bower init

폴더에 있습니다. 마지막으로, (응용 프로그램 부팅에로드되는 기본 모듈) 및

객체의 초기 상태 (컨트롤러 및 공유 데이터를보기)를 설정합니다. ng-app="myApp" (공간 제한으로 인해 다음 단계, 아코디언 구성 요소 및 후속 컨트롤러 코드, 스타일 코드 등의 세부 코드가 여기에서 생략됩니다. 전체 코드는 Codepen 또는 Github에서 찾을 수 있습니다.) ng-controller="BusinessCardController" 전체 코드는 원래 링크를 참조하십시오. ng-app 요약 ng-controller ng-bind 이 명함 생성기가 AngularJS에서 데이터 바인딩의 기본 개념을 배우는 데 도움이되기를 바랍니다. Codepen에서 전체 코드 데모를 찾거나 GitHub 에서이 기사의 코드를 복제 할 수 있습니다. 저장소를 포크하고, 코드를 시도하고, 어떤 멋진 것들을 만들 수 있는지 확인하는 것이 좋습니다. (원본 텍스트에 제공된 FAQ 부분도 생략되었지만 핵심 내용은 핵심 사항에 요약되었습니다.)

위 내용은 AngularJS에서 양방향 데이터 바인딩 이해의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!