AngularJS 응용 프로그램
이제 실제 AngularJS 단일 페이지 웹 응용 프로그램 (SPA)을 만들 시간입니다.
AngularJS 응용 프로그램 예제
AngularJS에 대해 충분히 배웠으며 이제 첫 번째 AngularJS 응용 프로그램을 만들 수 있습니다.
단어 수는 남아 있습니다 : 100
응용 프로그램 설명
AngularJS 인스턴스
<! docType html> <html> <head> <meta charset = "utf-8"> <script src = "http://apps.bdimgs/libs/angular.js/1.4.6/angular.min.js"> </script> </head> <body ng-app = "mynoteapp" ng-controller = "mynotectrl"> <h2> my notes </h2> <textarea ng-model = "message"cols = "40"rows = "10"> </textarea> <p> <버튼 ng-click = "save ()"> save </button> <button () count </button> </p> <p> <p> ng-bind = "left ()"> </span> </p> <script src = "mynoteapp.js"> </script> <scrc = "mynotectrl.js"> </script> </body> </html>
실행 결과 :
단어 수는 남아 있습니다 : 100
응용 프로그램 파일 "mynoteapp.js":
var app = angular.module ( "mynoteapp", []);
컨트롤러 파일 "mynotectrl.js":
app.controller ( "mynotectrl", function ($ scope) {$ scope.message = ""; $ scope.left = function () {return 100- $ scope.message.length;}; $ scope.clear = function () {$ scope.message = ";};});<html> 요소는 AngularJS 응용 프로그램의 컨테이너입니다. ng-app = "mynoteapp":
<html ng-app = "mynoteapp">
<div>는 html 페이지의 컨트롤러의 범위입니다 : ng-controller = "mynotectrl":
<div ng-controller = "mynotectrl">
NG-Model 지시문은 <TextRea>를 컨트롤러 변수 메시지에 바인딩합니다.
<TextArea ng-model = "message"cols = "40"rows = "10"> </textArea>
두 개의 ng- 클릭 이벤트는 컨트롤러 함수를 호출하고 () 및 save ()를 호출합니다.
<button ng-click = "save ()"> 저장 </button> <button ng-click = "clear ()"> clear </button>
NG-BIND 지시문은 나머지 문자를 표시하기 위해 Left ()에 <span>에 컨트롤러 함수를 바인딩합니다.
남은 문자 수 : <span ng-bind = "left ()"> </span>
AngularJS를 실행 한 후에 응용 프로그램 라이브러리 파일을로드해야합니다.
<script src = "mynoteapp.js"> </script> <script src = "mynotectrl.js"> </script>
AngularJS 응용 프로그램 아키텍처
위의 예는 완전한 AngularJS 단일 페이지 웹 응용 프로그램 (SPA)입니다.
<html> 요소에는 angularjs 응용 프로그램 (ng-app =)이 포함됩니다.
<div> 요소는 AngularJS 컨트롤러 (ng-controller =)의 범위를 정의합니다.
하나의 응용 프로그램에서는 많은 컨트롤러로 구성 될 수 있습니다.
응용 프로그램 파일 (내 ... App.js)은 응용 프로그램 모델 코드를 정의합니다.
하나 이상의 컨트롤러 파일 (My ... ctrl.js) 컨트롤러 코드를 정의합니다.
요약 - 어떻게 작동합니까?
NG-APP 지시문은 응용 프로그램의 루트 요소 아래에 있습니다.
단일 페이지 웹 응용 프로그램 (SPA)의 경우 응용 프로그램의 루트는 일반적으로 <html> 요소입니다.
하나 이상의 NG-Controller 지시문은 응용 프로그램의 컨트롤러를 정의합니다. 각 컨트롤러에는 자체 범위 :: 정의 된 HTML 요소가 있습니다.
AngularJS는 HTML DomContentLoaded 이벤트에서 자동으로 시작됩니다. NG-APP 지시문이 발견되면 AngularJS는 지침에 모듈을로드하고 NG-APP을 응용 프로그램의 루트로 컴파일합니다.
응용 프로그램의 루트는 전체 페이지 또는 페이지의 작은 부분 일 수 있으며 작은 부분 인 경우 더 빨리 컴파일되고 실행됩니다.
위의 내용은 AngularJS의 간단한 적용에 대한 자세한 설명입니다. AngularJS 프로그래밍에 도움이되기를 바랍니다.