AngularJS module

AngularJS module 정의

AngularJS 의 module 정의와 controller

// 데이터 준비 : 서버측에서 Ajax 로 전송되는 데이터라고 가정
arrs = [{
  num: 10,
  name: 'AngularJS',
  lib: '앵귤러'
}, {
  num: 11,
  name: 'jQuery',
  lib: '제이쿼리'
}, {
  num: 12,
  name: 'javaScript',
  lib: '자바스크립트'
}];

// 모듈(ng-app) 선언 (모듈은 애플리케이션의 개념)
var myModule = angular.module("myModule", []);

// 컨트롤러(ng-controller) 선언 (특정위치에 데이터 출력)
// 사용자 정의의 컨트롤러 이름 정의
myModule.controller("myController", function($scope) {
  $scope.arrs = arrs;
});

See the Pen AngularJS 모듈 by jaeheekim (@jaehee) on CodePen.

factory 정의

// [1] 모듈(ng-app) 선언 : app.js 등으로 분리
var myModule = angular.module("myModule", [])

// [2] 컨트롤러(ng-controller) 선언 : XXX-controller.js 등으로 분리
myModule.controller("myController", function($scope, ajaxServiceData) {
  $scope.items = ajaxServiceData.items;
});

// [3] 매개변수로 데이터를 주입: angular 데이터 형식 생성 : 각각의 페이지에 맞는 데이터를 받아오기
myModule.factory("ajaxServiceData", function() {
  return {
    items: [{
      num: 11,
      name: 'AngularJS',
      lib: '앵귤러'
    }, {
      num: 12,
      name: 'jQuery',
      lib: '제이쿼리'
    }, {
      num: 13,
      name: 'requireJS',
      lib: '모듈로더'
    }]
  };
});

See the Pen AngularJS factory by jaeheekim (@jaehee) on CodePen.

AngularJS value 메서드

// [1] 모듈(ng-app) 선언 : app.js 등으로 분리
var myModule = angular.module("myModule", []);

// [2] 컨트롤러(ng-controller) 선언 : XXX-controller.js 등으로 분리
myModule.controller("myController", function($scope, items, title) {
  $scope.items = items;
  $scope.title = title;
});

// [3] value()를 사용하여 정적인 데이터 주입
myModule.value("items", [
  { num: 10, name: 'AngularJS', lib: '앵귤러'}, 
  { num: 11, name: 'jQuery', lib: '제이쿼리'}, 
  { num: 12, name: 'reactJS', lib: '리액트'}
]);

myModule.value('title', "AngularJS 기초");

See the Pen AngularJS value 주입 by jaeheekim (@jaehee) on CodePen.