응용 프로그램 AngularJS와
이제 단일 페이지 웹 응용 프로그램 (단일 페이지 웹 응용 프로그램, SPA)을 실제 AngularJS와를 만들 수있는 시간입니다.
AngularJS와 적용 사례
당신은 AngularJS와 대한 충분한 지식을 배웠어요, 당신은 지금 당신의 첫번째 AngularJS와 응용 프로그램을 만드는 시작할 수 있습니다 :
내 노트
남은 단어 개수 :100
응용 프로그램을 설명
예를 AngularJS와
<헤드>
<메타 문자 집합 = "UTF-8 ">
<스크립트 SRC = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"> </ script>
</ 헤드>
<바디>
<사업부의 NG 컨트롤러 = "myNoteCtrl ">
<H2> 내 노트 </ H2>
<P> <텍스트 영역 NG 모델 = "메시지"COLS = "40"행 = "10"> </ 텍스트 영역> </ P>
<P>
<버튼 "저장 = NG는 클릭 ()"> 저장 </ 버튼>
<버튼 = "맑은 NG는 클릭 ()"> 삭제 </ 버튼>
</ P>
문자 <P> 번호 왼쪽 : <스팬 NG-바인드 = "왼쪽 ()"> </ SPAN> </ P>
</ DIV>
<스크립트 SRC = "myNoteApp.js"> </ script>
<스크립트 SRC = "myNoteCtrl.js"> </ script>
</ BODY>
</ HTML>
»시도
응용 프로그램 파일 "myNoteApp.js"
컨트롤러 파일 "myNoteCtrl.js"
$ Scope.message = "";
- $ Scope.left = 함수 () {$의 scope.message.length (100)를 반환;}
$ Scope.clear = 함수 () {$의 scope.message = ""을;};
$ Scope.save = 함수 () {경고 ( "저장된 주");};
});
ng를 인앱 = "myNoteApp"컨테이너 : <HTML> 요소는 AngularJS와 응용 프로그램입니다 :
ng를 컨트롤러 = "myNoteCtrl"범위 : 컨트롤러의 <div> HTML 페이지 :
컨트롤러 변수 메시지에 NG 모델 지시어 바인드 <텍스트 영역>
두 NG-클릭 이벤트는 명확 컨트롤러 기능 ()과 (저장)를 호출합니다 :
<버튼 = "맑은 NG는 클릭 지우기 </ 버튼> ()">
NG-바인드 명령은 <SPAN>에 컨트롤러 기능 왼쪽 () 바인딩, 나머지 문자를 표시하는 데 사용됩니다 :
응용 프로그램 라이브러리 파일은 AngularJS와 로딩 후 수행하는 데 필요한 :
<스크립트 SRC = "myNoteCtrl.js"> </ script>
AngularJS와 응용 프로그램 아키텍처
위의 예는 완전한 AngularJS와 단일 페이지 웹 응용 프로그램 (단일 페이지 웹 응용 프로그램, SPA)입니다.
<HTML> 요소는 AngularJS와 응용 프로그램이 포함 (NG-응용 프로그램을 =).
<DIV> 요소는 (NG-컨트롤러 =) AngularJS와 컨트롤러의 범위를 정의합니다.
애플리케이션 컨트롤러 많이 할 수있다.
어플리케이션 파일 (내 ... App.js) 모델 코드의 애플리케이션을 정의한다.
하나 이상의 제어기 파일 (내 ... Ctrl.js)는 컨트롤러 번호를 정의한다.
요약 - 어떻게 작동합니까?
응용 프로그램의 루트 요소에 NG-앱 지시어.
단일 페이지 웹 응용 프로그램 (단일 페이지 웹 응용 프로그램, SPA), 보통 <HTML> 요소 루트 응용 프로그램의 경우.
하나 이상의 NG 컨트롤러 지시어는 응용 프로그램 컨트롤러를 정의합니다. 각 컨트롤러는 자신의 범위 정의의 HTML :: 요소가 있습니다.
HTML DOMContentLoaded 이벤트에 자동으로 시작 AngularJS와. 당신이 NG-앱 지시어, AngularJS와로드 명령 모듈 및 NG-앱을 찾을 경우, 응용 프로그램의 루트 컴파일 할있다.
이 작은 부분이 빠른 컴파일 및 실행 것 인 경우 루트 응용 프로그램은, 전체 페이지 또는 페이지의 작은 부분 일 수있다.