AngularJS 프레임 워크를 간단히 소개 한 후,이 기사는 예를 사용하여 {{{}} 보간 방법 및 Ng-bind 명령의 사용을 보여줍니다.
프론트 엔드 개발을 강화하고 단순화하는 클래스 라이브러리 인 JQuery와 달리 AngularJS는 완전한 웹 프론트 엔드 프레임 워크이므로 학습 곡선이 훨씬 높습니다.
Angularjs는 Java의 스프링 프레임 워크와 유사하다는 느낌을줍니다. 내장 구성 요소 중 다수는 이미 일반적인 시나리오를 충족 할 수 있으며 프레임 워크 아이디어에 따라 특별한 시나리오를 확장 할 수 있습니다.
가장 기본적인 콘텐츠부터 시작하겠습니다.
코드 사본은 다음과 같습니다.
<! doctype html>
<html ng-app>
<헤드>
<meta charset = "utf-8">
<title> ng-bind directive </title>
</head>
<body ng-controller = "hellocontroller">
<div>
<p> 직접 출력 문자열 리터럴 </p>
안녕하세요 {{ "world"}}
<HR>
</div>
<div>
<p> 자리 표시자를 사용하여 변수를 출력하십시오 </p>
안녕하세요 {{greeting}}
<HR>
</div>
<div>
<p> NG-BIND 명령어를 사용하여 변수를 출력하십시오 </p>
hello <span ng-bind = "greeting"> </span>
<HR>
</div>
<스크립트 src = "../ lib/angularjs/1.2.26/angular.min.js"> </script>
<cript>
기능 hellocontroller ($ scope) {
$ scope.greeting = "World";
}
</스크립트>
</body>
</html>
NG-App은 AngularJS 모듈을 선언하고 HTML 태그를 선언하는 범위로 제한됩니다.
NG-Controller는 모듈에서 AngularJ를 선언하는 컨트롤러입니다. 컨트롤러에는 여러 컨트롤러가있을 수 있지만 컨텍스트가 분리되어 있으며 컨트롤러의 범위는 가능한 한 좁아져야합니다.
{{}}은 JSP의 el expression $ {}과 유사한 AngularJS의 보간 구문입니다. 첫 번째 출력은 "세계"가 문자 그대로 값이기 때문에 프로그램이 직접 출력되기 때문입니다. 두 번째 출력은 인사말이 컨트롤러에 정의 된 변수이므로 변수의 해당 값도 출력이므로 세계이기도합니다. 세 번째 출력은 AngularJS에 내장 된 NG-BIND 속성 명령어를 사용하며 최종 결과는 {{}}과 동일하지만 습자 = 다음에 문자열이 뒤 따릅니다. 잘못 쓰지 마십시오.
JS의 HelloController는 신체의 지시에 해당합니다. Entry Parameter $ 범위는 프레임 워크가 제공하는 서비스이며 현재 컨트롤러의 컨텍스트를 나타내며 다른 유사한 서비스가 있습니다. 프레임 워크가 자동으로 주입되며 나중에 천천히 이해합니다. 이 메소드 본문에는 한 줄만 있으며 $ 범위의 변수를 정의합니다. 이는 HTML 코드에서 참조 된 변수입니다.
이 기사는 매우 간단하며 코드를 복사 한 후 코드를 실행할 수 있습니다. Angular.min.js는 1.2 지점의 최신 버전입니다. 1.3.0 버전으로 동일한 코드를 실행할 수 없습니다. 그 이유는 알려져 있지 않습니다. 1.3.0이 최종 릴리스 버전이 아닐 수도 있습니다.