"AngularJS 튜토리얼 - Hello 예제 4"의 두 판 사이의 차이

2020년 11월 2일 (월) 02:53 기준 최신판

1 개요[ | ]

AngularJS 튜토리얼 - Hello 예제 4

1개의 파일로 구성된 예제
간단한 Controller를 적용한 예제

<body ng-app="HelloApp4">

<div ng-controller="HelloController">
  <label>이름:</label>
  <input type="text" ng-model="name" placeholder="여기에 이름을 입력하세요">
  <h1>안녕 {{name}}!</h1>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.16/angular.min.js"></script>
<script>
var app = angular.module('HelloApp4', []);

app.controller('HelloController', ['$scope', function($scope) {
  $scope.name= "John Smith";
}]);
</script>

2 같이 보기[ | ]

@@ 4번째 줄: / 4번째 줄: @@
 *간단한 Controller를 적용한 예제
-==hello4.html==
+<syntaxhighlight lang='html'>
-<source lang='html5'>
-<!doctype html>
-<html>
-<head>
-<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.16/angular.min.js"></script>
-</head>
 <body ng-app="HelloApp4">
 <div ng-controller="HelloController">
    <label>이름:</label>
-   <input type="text" ng-model="yourName" placeholder="여기에 이름을 입력하세요">
+   <input type="text" ng-model="name" placeholder="여기에 이름을 입력하세요">
-   <h1>안녕 {{yourName}}!</h1>
+   <h1>안녕 {{name}}!</h1>
 </div>
+<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.16/angular.min.js"></script>
 <script>
 var app = angular.module('HelloApp4', []);
 app.controller('HelloController', ['$scope', function($scope) {
-   $scope.yourName = "친구들";
+   $scope.name= "John Smith";
 }]);
 </script>
+</syntaxhighlight>
-</body>
+<jsfiddle height='180'>mcj74f4u</jsfiddle>
-</html>
-</source>
-==테스트==
-*http://zetawiki.com/ex/angular/hello4.html
 ==같이 보기==