ng-app : 여기서부터는(이미지에서는 body부분) angularJS를 사용하겠다는 의미.
ng-init : 자바스크립트 변수나 함수를 초기화 하는 것.
출력방법 :
expression(표현식)을 사용한다 : {{ name }}
<!DOCTYPE html>
<html>
<head>
<link data-require="bootstrap@3.3.6" data-semver="3.3.6" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<script data-require="bootstrap@3.3.6" data-semver="3.3.6" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script data-require="angularjs@1.5.7" data-semver="1.5.7" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-app ng-init="name='World'">
<h1>Hello {{name}}!</h1>
</body>
</html>
AngularJS 기본 틀.
(function(){
})();
모듈 만들기 :
AngularJS에 app이라는 변수를 만들어 angular모듈을 만든다.
<script data-require="angularjs@1.5.7" data-semver="1.5.7" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
angular라이브러리를 추가했기 때문에 그 안에있는 함수에 angular.module()이란 모듈을 정의할 수 있는 함수를 사용할 수 있다.
(function(){
var app = angular.module();
})();
첫번째 함수에 모듈 이름(todo)을 적는다, 두번째 변수에는 배열([])을 넘겨준다
(function(){
var app = angular.module('todo', []);
})();
만든 모듈을 적용하는 방법은 ng-app에 새로 만든 모듈 이름을 적으면 된다
<body ng-app="todo" ng-init="name='World'">
컨트롤러 만들기 :
모듈은 큰 컨테이너이다.
모듈 안에는 컨트롤러, 디렉티브, 서비스들이 있다.
그래서 컨트롤러를 만들 때 모듈 안에 만들어야 한다.
첫번째 파라미터에 컨트롤러 이름을 적어준다.
컨트롤러는 보통 첫번째 문자를 대문자로 만든다.
두번째 파라미터에는 함수를 만든다.
(function(){
var app = angular.module('todo', []);
app.controller('TodoCtrl', function(){
});
})();
컨트롤러를 만들 때 두번째 파라미터는배열로 주고 $scope이라는 변수를 주입을 한다.
그러면 컨트롤러 안에서 scope이라는 변수를 사용할 수 있다
scope : 컨트롤러와 html파일간의 연결고리 역할을 한다.
아래 스크립트는 scope.name이라는 변수에 World라는 이름을 할당해준다.
(function(){
var app = angular.module('todo', []);
app.controller('TodoCtrl', ['$scope', function($scope){
$scope.name = 'World';
}]);
})();
ng-init="name='World'"를 지우고 ng-controller="TodoCtrl" 을 넣어주면
Controller scope의 name이라는 변수에 있는 값을 사용할 수 있다.
<!DOCTYPE html>
<html>
<head>
<link data-require="bootstrap@3.3.6" data-semver="3.3.6" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<script data-require="bootstrap@3.3.6" data-semver="3.3.6" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script data-require="angularjs@1.5.7" data-semver="1.5.7" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-app ng-init="name='World'">
<h1>Hello {{name}}!</h1>
</body>
</html>
간단하게 todo를 출력하는 로직 만들기.
todo 데이터를 정의하고 객체로 만든 후 내용을 넣는다.
(function(){
var app = angular.module('todo',[]);
app.controller('TodoCtrl',['$scope', function($scope){
$scope.todo = {
title : '제목',
contents : '내용출력',
completed : false,
name : '홍길동',
regdate : Date.now()
};
}]);
})();
<!DOCTYPE html>
<html>
<head>
<link data-require="bootstrap@3.3.7" data-semver="3.3.7" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<script data-require="bootstrap@3.3.7" data-semver="3.3.7" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script data-require="angularjs@1.5.7" data-semver="1.5.7" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-app="todo" ng-controller="TodoCtrl">
<h1>Hello</h1>
<p>{{todo}}</p>
<p>제목 : {{todo.title}}</p>
<p>내용 : {{todo.contents}}</p>
<p>완료여부 : {{todo.completed}}</p>
<p>등록일 : {{todo.regdate}}</p>
</body>
</html>결과 화면
input 테그에서 사용하기
ng=model="todo.title" 을 입력하면 값이 들어가진다.
<p><input type="text" ng-model="todo.title"></p> <p><input type="checkbox" ng-model="todo.completed">완료여부</p>
값을 수정하면 실시간으로 적용이 된다.
'JavaScript > angularJS' 카테고리의 다른 글
| AngularJS Login App (0) | 2018.07.22 |
|---|---|
| Routeing (0) | 2018.07.21 |
| AngularJS01. Hello World (0) | 2018.07.20 |
| 3. todo 여러개 출력하기(반복문 사용하기) - ng-repeat (0) | 2018.05.18 |
| 1. AngularJS 기본 개발 환경 (0) | 2018.05.18 |
