반응형
ng-app 앵귤러를 사용하겠다는 의미
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link
rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"
integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk"
crossorigin="anonymous"
/>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
</head>
<body ng-app ng-init="name = 'hello'">
<div>
hello world {{name}}
</div>
</body>
</html>
위 방식처럼 사용하기보단 view부분과 data부분을 분리해서 사용한다
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link
rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"
integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk"
crossorigin="anonymous"
/>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
</head>
<body ng-app="todo" ng-controller="TodoCtrl">
<div>
{{todo}}
</div>
<script src="./script.js"></script>
</body>
</html>
script.js의 app을 기반으로 module을 선언한다 (ng-app에 script의 모듈이 들어간다)
ng-controller를 통해 $scope를 지정하고
기본적인 데이터및 함수들을 정의할수 있다
script.js
//모듈: 컨테이너
//모듈안에: 컨트롤러, 디렉티브, 서비스가 담겨있다
(function () {
// app이라는 변수에 todo라는 모듈이 담긴다
var app = angular.module("todo", []);
//두번째 파라미터는 배열로준다
app.controller("TodoCtrl", [
"$scope",
function ($scope) {
// $scope.name = "Chris";
// $scope.data = "aa";
$scope.todo = {
title: "요가 수련",
completed: false,
createdAt: Date.now(),
};
},
]);
})();
angular는 vue와 같이 양방향 바인딩을 지원한다
ng-model=todo.title을 통해 값을 변경하면 자연스럽게 todo.title이 변경된다
v-model과 비슷한 개념인거같다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link
rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"
integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk"
crossorigin="anonymous"
/>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
</head>
<body ng-app="todo" ng-controller="TodoCtrl">
<div>
<h1>Todo</h1>
<h3>{{todo.title}}</h3>
<input type="text" ng-model="todo.title" />
<input type="checkbox" ng-model="todo.completed" />
<p>{{todo.completed}}</p>
<date>{{todo.createdAt}}</date>
</div>
<script src="./script.js"></script>
</body>
</html>
반응형
'Angular > angularjs' 카테고리의 다른 글
| angular service(factory) (0) | 2020.05.22 |
|---|---|
| angular directive (모듈화) (0) | 2020.05.20 |
| angular form (유효성 검증) (0) | 2020.05.20 |
| ng-repeat, ng-filter, ng-click (0) | 2020.05.20 |
