JavaScript의 AngularJS 라이브러리를 사용하여 hello world를 작성하는 방법_AngularJS
- WBOY원래의
- 2016-05-16 15:53:261156검색
이 글은 AngularJS 프레임워크로 구현된 Hello World 코드 예제를 보여줍니다.
다음은 Hello World 예제와 다음 코드 예제를 볼 때 집중해야 할 몇 가지 측면입니다.
- ng-app, ng-controller, ng-model 지시어
- 두 개의 중괄호가 있는 템플릿
1단계: e0d5b055b128e8aa6d694e7a88aabe96 섹션에 Angular Javascript
를 포함합니다.93f0f5c25f18dab9d176bd4f6de5d30e9c3bca370b5104690d9ef395f2c5f8d1에 다음 코드를 포함하여 Angularjs 자바스크립트 파일을 가져옵니다. 다음 작성 방법을 사용하여 Google 관리 라이브러리에서 최신 코드를 가져올 수 있습니다.
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.17/angular.min.js"></script>
2단계: d90fcdb535d6081491edebb07224a674 요소에 ng-app 지시어 적용
다음과 같이 100db36a723c770d327fc0aef2ce13b1 요소에 ng-app 지시문을 적용합니다. 선택적으로 앱에 이름을 지정하면 간단히 ab620c2ce5dd4d9766434fb51c51baab로 작성할 수 있습니다. 이는 애플리케이션 루트 요소의 html 요소입니다. 이를 통해 애플리케이션 개발자는 전체 HTML 페이지 또는 일부만 Angular 애플리케이션으로 처리해야 한다고 Angular에 알릴 수 있습니다.
<html ng-app="helloApp">
3단계: 9c5594a5fc8d2e506f1a8147102c836b 요소에 ng-controller 지시어 적용
9c5594a5fc8d2e506f1a8147102c836b 요소에 ng-controller 지시문을 적용합니다. 컨트롤러 지시문은 div와 같은 모든 요소에 적용될 수 있습니다. 아래 코드에서 "HelloCtrl"은 컨트롤러의 이름이며 3f1c4e4b6b16bbbd69b2ee476dc4f83a2cacc6d41bbb37262a98f745aa00fbf0 요소에 있는 컨트롤러 코드에서 참조할 수 있습니다.
<body ng-controller="HelloCtrl">
4단계: 입력 요소에 ng-model 지시어 적용
ng-model 지시문을 사용하여 입력을 모델에 바인딩할 수 있습니다.
<input type="text" name="name" ng-model="name"/>
5단계: 템플릿 코드 작성
다음은 "name"이라는 모델의 모델 값을 표시하는 템플릿 코드입니다. "name"이라는 모델이 4단계의 입력에 바인딩되어 있습니다.
Hello {{name}}! How are you doing today?
6단계: 6919634607f14bdbe1a4299125db9861에서 컨트롤러 코드 생성
<script>
var helloApp = angular.module("helloApp", []);
helloApp.controller("HelloCtrl", function($scope) {
$scope.name = "Calvin Hobbes";
});
</script>