Navigation Menu

Skip to content

Instantly share code, notes, and snippets.

@jays1204
Created May 21, 2014 02:07
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save jays1204/92f9c62ee6e9fb01efc8 to your computer and use it in GitHub Desktop.
Save jays1204/92f9c62ee6e9fb01efc8 to your computer and use it in GitHub Desktop.
Angular.js Tutorial

Angular.js

Front-end MV* Framework라고 한다. 이때 *는 Whatever(무엇이든)이라고 하나 우리는 그냥 기존에 알고있던 MVC의 개념으로 이해하면 된다. C말고 다른걸 쓰는게 있으면 바꾸면 되고.

Features of Angular.js

- front-end directory structure

angular에서 권장하는 구조는 다음과 같다.

https://docs.google.com/document/d/1XXMvReO8-Awi1EZXAXS4PzDzdNvV6pGcuaF4Q9821Es/pub

구글에서 사용하는 가이드를 따르라고 한다. application의 복잡도에 따라 여러가지 구조를 제시하고 있다.

우리는 무난하게 angular.js의 tutorial에서도 사용중인 구조를 사용하면 된다.

- Dependency Injection

Spring에 친숙한 개발자라면 DI를 많이 들어것이다. 사실 본인이 스프링에서만 써봐서 그렇기도 하다.

Anulgar에서는 각 service, controller에 의존성을 주입할 수 있다.

예를 들어보자.

var testControllers = angular.module('testControllers', []);

testControllers.controller('CtrlForDI', ['$scope', 
  function ($scope) {
  $scope.testVal = 'mo im ma';
}]);;

위에서 보다시피 []안의 '$scope'란 문자열을 넣어주었고 그다음에 나오는 function에 이 $scope을 argument로 주었다.

$scope를 Controller에 injection해주는 구문이다.

Controller에서 Service를 호출할 때 사용하는 예제를 보면 더 쉽게 알 수 있다.

//service.js
var testService = angular.module('testService', []);

testService.factory("serviceDI", function() {
  var msg = {
    name : "DD"
  };
  
  return msg;
});

//controller.js
var testControllers = angular.module('testControllers', []);

testControllers.controller('CtrlForDI', ['$scope', 'serviceDI' 
  function ($scope) {
  $scope.testVal = 'mo im ma';
  $sopce.getVal = serviceDI.name;
}]);;
//getVal은 DD라는 문자열 값을 갖는다.

사용방법은 간단하다. 이미 정의한 service를 controller에서 문자열로 []에 argument로 넣어주면 된다.

Angular의 DI에 대해 더 자세한 이해를 하고 싶다면 다음 페이지를 보면 된다.

https://docs.angularjs.org/guide/di

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment