AngularJS_codeLab 챕터1,2
1.앵귤러 개념들
- AngularJS Document(https://docs.angularjs.org/guide/concepts)
- Directives: 커스텀 속성과 요소들로 확장된 HTML
- Expressions: 스코프에서 변수와 함수에 접근, 중괄호 두 개로 표현
<!--variable 변수의 값을 출력-->
<h1>
<!---->
</h1>
- Module: 거대한 컨테이너로 Directives, Controller 등이 들어있다
- Controller: View의 비즈니스 로직을 다룰 때만 사용
- Service: 재사용할 수 있는 비즈니스 로직(Controller는 재사용 불가)
2. 개발해 보기
- 플런커(https://plnkr.co) 접속
- [New] -> [AngularJS] 선택
- AngularJS를 이용해 개발할 수 있다
- CDN을 이용해 angularJS 와 bootstrap 삽입
<head>
<!--angularJS CDN 삽입-->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
<!--bootstrap CDN 삽입-->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css"/>
</head>
-
ng-app: 선언된 부분부터 angular를 사용한다는 뜻 -> 해당 태그 범위 내에서 angular 디렉티브를 찾는다
-
ng-init: javaScript 변수 혹은 함수를 초기화
<!--javaScript변수 name에 Chris를 입력 후 Expressions을 통해 출력 출력-->
<body ng-app ng-init="name = 'Chris'">
<h1>
<!---->
</h1>
</body>
<!--Chris가 출력된다-->
- angular.module(‘모듈명’, 배열);
- 모듈을 정의한다
(function(){
var app = angular.module('todo',[]); //todo라는 모듈을 정의
})();
<!--ng-app에 모듈명 입력-->
<body ng-app="todo" ng-init="name = 'Chris'">
- 모듈.controller(‘컨트롤러명’, [‘$scope’, function($scope){ }]);
- 컨트롤러를 정의한다
- $scope: 컨트롤러와 html 파일을 연결해주는 역할
app.controller('TodoCtrl', ['$scope', function($scope){
$scope.name = 'Chris'; //변수에 값 넣기
}]);
<!--ng-controller에 컨트롤러명 입력-->
<body ng-app="todo" ng-controller="TodoCtrl">
- 실습: Todo만들기
//script.js
import angular from 'angular'; //CDN으로 삽입한 angular가 작동 안 해서 삽입
(function(){
var app = angular.module('todo',[]); //todo라는 모듈을 정의
app.controller('TodoCtrl', ['$scope', function($scope){
//todo 객체 만들기
$scope.todo = {
title: '요가수련',
complete: false,
createdAt: Date.now()
}
}]);
})();
<!-- index.html -->
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="lib/style.css" />
<script src="lib/script.js"></script>
<!--angularJS CDN 삽입
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
-->
<!--bootstrap CDN 삽입-->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css"/>
</head>
<!--변수를 출력-->
<body ng-app="todo" ng-controller="TodoCtrl">
<h1>Todo만들기</h1>
<h3>제목: </h3>
<input type="text" ng-model="todo.title"/>
<input type="checkbox" ng-model="todo.complete"> <br>
<date>날짜: </date> <br><br>
<h3>Todo객체</h3>
</body>
</html>
- 결과 화면
참고
- https://www.youtube.com/watch?v=EklH54kysps&list=PLs_XsVQJKaBk_JN5RctLmmVrGwEzpzqaj