AngularJS

Controller

view의 비지니스 로직을 구현함

DOM Control 부분은 구현하지 않음

Singleton으로 구성

Controller 와는 다르게 재사용 가능

특정한 행위의 기능을 가진 사용자 정의 DOM 엘리먼트

angular.module.('...')
	.directive('myExample', function() {
		// TODO
	})

<my-example></my-example>
<my:example></my:example>
<my_example></my_example>

아래 body 부분에 angular 코드가 포함되어 있다

모듈을 정의하는 함수

angular.module({{모듈명}}, {{압축할 라이브러리들}})

컨드롤러를 만드는 함수

angular.contoller({{컨트롤러명}}, {{함수}})

HTML 파일과 JS 의 파라미터 매핑

<body ng-app="todo" ng-controller="TodoCtrl">
	<h1> Hello {{name}}!</h1>
</body>

(function(){
	var app = angular.module('todo', []);
	app.controller('TodoCtrl', ['$scope', function($scope){
		$scope.name = 'Chris';
	}]);
})();

값 변경을 지켜봄.

아래 코드는 name 모델이 변경될 경우 updated 모델 값을 1 증가시키는 코드입니다.

$scope.$watch('name', function(){
	$scope.updated++;
})

Angular JS 사용해서 todo 만들기 (feat. Bootstrap) (0)	2019.05.14