angular js & ionic framework AngularJS

2017.01.29 22:10

AngularJS

AngularJS를 시작해보자. 홈 페이지에 들어가서 라이브러리를 받고 문서를 확인해보자.

들어가보면 알겠지만 튜토리얼이나 문서가 잘 정리되어있어서 시작하는데 어려움은 없을 것이다. ~~어차피 튜토리얼이라고 해봐야 복붙이다.~~

AngularJS를 학습해보는 이 포스트는 ‘사용법을 익히는’것과는 다르게 좀 더 안쪽으로 들어가 살펴보도록하자. 또한, 그때그때 적어내는 포스트이니 사설이 많을 것이다. 그에 대한 양해는 미리 구한다.

우선, 전투에 앞서서 적에 대한 정보가 너무 없으니, 적이 어떤 녀석인지부터 알고 넘어가도록하자.

AngularJS란?

AngularJS는 구글에서 제작하고 2009년에 발표된 자바스크립트 프레임워크이다. 이 바닥에서 굴러먹었다면 한 번쯤은 들어봤을 법한 backbone이나 ember와 같은 프레임워크의 한 종류이다. 어차피 우리 웹 개발자들이 실제로 대면하는건 jQuery였을 것이며 jQuery였고, jQuery이다.

그렇다면, jQuery쓰면 되지 왜또 신기술을 배워야 하는가?라는 물음을 시작으로, 왜 속세에서 AngularJS가 도마에 올랐으며, 당신을 왜 이 포스트에까지 눈길을 주게 되었는지. AngularJS에 대해서 확인할 명분이 충분하다.

이 글을 조금씩 읽어보고 AngularJS라는 것을 소화해내야 할지, 그렇지 말아야 할지 판단해보길 바란다.

AngularJS를 검색해보면 가장 흔하게 보이는 키워드들은 ~~(뭐 워낙 많아서 눈을 어디에 두어야 할지 모르겠다만)~~ MVW, DI, 양방향 데이터 바인딩, 직관적인 API와 문법, 쉬운~~(?)~~ 개발 정도일 것이다. 우선 이것들을 정리하고 넘어가보자.

혹, AngularJS를 시작하려는 의도가 아니라 AngularJS가 뭐하는 놈이길래 들어온 사람이라면, 바로 맨 아래쪽을 보도록 하자.

MVW Framework

여하튼, AngularJS는 MVW(Model View Whatever) 프레임워크라고 하는데, 어디서는 흔히 알고 있는 MVC라고도 표현한다. 그냥 보면 크게 다를 것 없는 말이기도 한데, 엄밀히 따지자면 다르다. MV~ 형태의 프레임워크의 종류는 MVC,MVP,MVVM등이 있는데 MVW라는 것은 뭐든지 니가 알아서 만들 수 있다는 이야기다. MVC라고 표현하는 것도 틀리지 않는 다는건 이러한 이유다. 참조 : Xenomity Blog

양방향 데이터 바인딩(Two-way Data Binding)

솔직히 ‘양방향’ 이라는 짝을 짓는 개념보다는 ‘두가지 방식의’로 이해하는 것이 더 표현에 가깝다.

흔히 웹 개발의 꽃은 자바스크립트와 HTML태그의 조화로운 움직임에 있을 것이다. 요즘에야 프레임워크들이 잘 나오고 UI툴들이 산재하여, screen.availWidth를 사용해본 회사원이 있을지 의문인 것 처럼. 자바 스크립트 자체에 대한 이해도의 장벽이 많이 낮아졌다.

왜 서두를 길게 하느냐, HTML의 데이터 조작에 대해서 설명하기 위해서다. 화면에 노출되어있는 HTML 데이터들은 결국 DOM에 저장된 데이터들이다. HTML 뷰에서 바꾸는 방법과, 자바스크립트에서 DOM에 접근해서 바꾸는 방법이 있다. 더 쉽게 말하면 input 엘리먼트에 사용자가 입력하는 데이터와 자바스크립트가 변수로 들고 있는 데이터가 있다는 말이 된다.

여기서 딜레마가 출현한다. 사용자가 입력한 데이터를 자바스크립트와 ‘동기화’하기 위해서는 이벤트와 코드가 필요하고, 실제로 이 문제 때문에 많은 시간을 할애하기도 한다.

AngularJS는 이러한 문제를 자동적으로 해결해준다. VIEW의 데이터와 MODEL의 데이터를 항상 동기화시켜준다. 물론, jQuery나 네이티브 코드로도 가능하지만 위에서 말한 것 처럼 이를 구현하기 위해 자바스크립트가 DOM에서 엘리먼트를 셀렉트하는 작업이나 셀렉트를 위해 엘리먼트에 name이나 id를 부여하고, 변수를 업데이트 하는 작업의 코드가 필요해진다. 한두개라면 괜찮지만 그리드에 이걸 적용한다고 생각한다면 어머님이 누구신지 물어보고 싶은 여성을 볼때보다 아찔하다.

양방향 데이터 바인딩

자, AngularJS를 시작하면 많이 보는 그림이다. 설명한 것처럼 양방향으로(뷰에서 바꾸든, 모델에서 바꾸든) 두 데이터가 서로 동기화 된다는 이야기를 표현한 것이다.

단방향 데이터 바인딩

자, 이건 번외편으로, 단방향 데이터 바인딩을 표현한 것이다. 흔히 봐왔을 Spring프레임워크를 생각해보자. Controller, Service등을 이용해서 Model에 데이터를 넣은 것 까지 기억이 나시는가? 그리고 어떻게 하더라? 어떻게 하긴, View로 Forward해서 <c:foreach> 돌렸지 않는가?

View에서 무슨 개지랄을 떨어도 Spring에서 할당한 Model은 바뀌지 않는다. 조금 개념이 다르긴한데 그렇게 생각하면 쉽다.

자바스크립트도 마찬가지다. 사용자가 textarea를 붙잡고 블루스를 추든 생쇼를 하던 자바스크립트에 있는 모델을, 그러니까 할당하고 싶은 변수를 업데이트 해주는 코드가 없다면 절.대.로. 바뀔일 없다. 상관없다는 이야기다. 참조 : 넥스트리 | NEXTREE

직관적인 API와 문법

솔직히 무슨 API를 쓰건 거기에 익숙해 지지 않으면 직관적인지 아닌지도 모르겠다. J2EE프로젝트를 줄창하던 사람이 어느날 호기심에 php를 만났다고 생각했을때, mysql_connection() 함수를 이용해 손쉽게 커넥션을 맺는 정도의 직관성이 아닐까 생각해본다. 여하튼 말이 나왔으니 찾아보자… 라고 말하고 싶으나… 솔직히 근거가 될만한게 지금 튜토리얼 밖에 없고, 어떤게 직관적이고 어떤게 추상적인지는 개인의 특성에 따른 일이라고 생각한다.

그러니 코드를 보고 각자의 판단에 맞겨보도록 하겠다.

<!doctype html>
<html ng-app="todoApp">
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"></script>
    <script src="todo.js"></script>
    <link rel="stylesheet" href="todo.css">
  </head>
  <body>
    <h2>Todo</h2>
    <div ng-controller="TodoListController as todoList">
      <span>{{todoList.remaining()}} of {{todoList.todos.length}} remaining</span>
      [ <a href="" ng-click="todoList.archive()">archive</a> ]
      <ul class="unstyled">
        <li ng-repeat="todo in todoList.todos">
          <input type="checkbox" ng-model="todo.done">
          <span class="done-{{todo.done}}">{{todo.text}}</span>
        </li>
      </ul>
      <form ng-submit="todoList.addTodo()">
        <input type="text" ng-model="todoList.todoText"  size="30"
               placeholder="add new todo here">
        <input class="btn-primary" type="submit" value="add">
      </form>
    </div>
  </body>
</html>

<!doctype html>

<head>

</head>

<body>

<span>{{todoList.remaining()}} of {{todoList.todos.length}} remaining</span>

[ <a href="" ng-click="todoList.archive()">archive</a> ]

</li>

</ul>

<input type="text" ng-model="todoList.todoText" size="30"

placeholder="add new todo here">

</form>

</div>

</body>

</html>

어떤가? 직관적인가? 아니면, 앞으로 익숙해지면 직관적이겠는가?

어차피 프레임워크라는게 사용자의 경험이 늘어날 수록 점점 직관적이게 되는거 아닐까 생각해본다. 필자의 경우 처음의 감상은 코드 어시스트 되나? 이 생각밖에 안들었다.

쉬운(?) 개발

어디서 나온 키워드인지는 몰라도 이런게 끼어들어 있었다. 세상에 쉬운 개발이 어디 있겠느냐만은 네이트브 코드로 하는 것 보다는 쉬운게 당연하고 쉽게 만들려고 만들어 놓은게 프레임워크 아니겠는가.

스프링프레임워크를 처음 만났던 그 순간을 생각해보라. Annotation이 어떤놈인지 당황해서 어버버 하던 그 시절… ‘아 스프링으로 하면 손쉽지’라는 말이 터진입이라고 담기 쉽지 않을 것이다.

여기서 쉬운 개발이란 말은 프레임워크를 통한 쉬운 개발이지, 쉬운 프레임워크의 이해는 아닐 것이다. 여기에 현혹되어 Angular를 보려고 한다면 너무 무른 생각이 아닐가 생각한다.

의존성 주입(Dependency Injection)

우리가 알고 있는 그 DI 맞다. @Autowired이나 @Injection을 보여주면 좀 더 이해하기 쉬울 것이라 생각한다.

AngularJS 홈페이지에도 자세한 문서가 있긴하지만 뼛속까지 조선인인 나는 영문을 보니 참 영문을 모르겠고 다른 똑똑한 조선인의 포스트를 봐보니…여러방법의 DI방식이 소개되고 있었다. 코드를 봐보자.

$provide 서비스를 이용하는 방법

<!DOCTYPE html>
<html lang="ko" ng-app="angularStart">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

    <title>angularStart</title>
    <meta name="description" content="">
    <meta name="author" content="team.codekin@gmail.com">
    <meta name="viewport" content="width=device-width; initial-scale=1.0">

    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"></script>
    <script src="/index.js"></script>
  </head>

  <body>
    <div ng-controller="MainController">
      msg: {{msg}}<br/>
      diMsg1: {{diMsg1}}<br/>
      diMsg2: {{diMsg2}}<br/>
      diMsg3: {{diMsg3}}<br/>
      diMsg4: {{diMsg4}}<br/>
      diMsg5: {{diMsg5}}<br/>
      diMsg6: {{diMsg6}}<br/>
      diMsg7: {{diMsg7}}
    </div>
  </body>
</html>

<!DOCTYPE html>

<head>

<title>angularStart</title>

</head>

<body>

msg: {{msg}}<br/>

diMsg1: {{diMsg1}}<br/>

diMsg2: {{diMsg2}}<br/>

diMsg3: {{diMsg3}}<br/>

diMsg4: {{diMsg4}}<br/>

diMsg5: {{diMsg5}}<br/>

diMsg6: {{diMsg6}}<br/>

diMsg7: {{diMsg7}}

</div>

</body>

</html>

우선 html코드를 작성하고

var module   = angular.module("angularStart", []);

module.controller("MainController", function($scope) {
  $scope.msg = "hello world";
});

var module = angular.module("angularStart", []);

module.controller("MainController", function($scope) {

$scope.msg = "hello world";

});

거기에 맞는 js코드를 추가하자. 우선, 변수 하나하나씩 대입해가면 결과를 확인하는 형태로 진행해보자. angular는 {{msg}} 라는 표현식을 해석하고 msg라는 모델을 찾아 값을 뿌려준다. 나머지는 할당하지 않았으니 비어있을 것이다.

경축! 아무것도 안하여 에스천사게임즈가 새로운 모습으로 재오픈 하였습니다.
어린이용이며, 설치가 필요없는 브라우저 게임입니다.
https://s1004games.com

예상했던 결과가 잘 나왔다. 그러면, 이번엔 인젝션을 한 번 해보자.

var module = angular.module("angularStart", []);

module.config(function($provide) {
  $provide.provider("msgDI1", function() {
    this.$get = function() {
      return function($scope, text) {
        $scope.diMsg2 = 'hello word! i\'m injected msgDI1!! diMsg2!';
        return text;
      };
    };
  });
});

module.controller("MainController", function($scope, msgDI1) {
  $scope.msg = "hello world";
  $scope.diMsg1 = msgDI1($scope, "hello world! i'm injected msgDI1!!");
});

var module = angular.module("angularStart", []);

module.config(function($provide) {

$provide.provider("msgDI1", function() {

this.$get = function() {

return function($scope, text) {

$scope.diMsg2 = 'hello word! i\'m injected msgDI1!! diMsg2!';

return text;

};

});

module.controller("MainController", function($scope, msgDI1) {

$scope.msg = "hello world";

$scope.diMsg1 = msgDI1($scope, "hello world! i'm injected msgDI1!!");

});

js를 위 처럼 바꿔주자. 결과는?

이런식이 된다. 여기까지 해보면 별로 의미가 없어보인다. 어차피 결국엔 데이터 값을 DI함수로 전달을 해야되는 것이고 그럴거면 그냥 모델에 대입하면 되는거 아닌가 하는 의문점도 생긴다.

그럼 여기서 더 진행하기전에, 일단 DI에 대한 장점을, 왜 DI를 사용해야하는지를 살펴보고 가야한다. 흔히 알고 있는 @Autowired나 @Injection과도 일맥상통한다.

Angular에서의 DI는 매우 유용합니다. 특히 테스트를 위한 컴퍼넌트를 쉽게 만들수 있어 테스트에 매우 유용합니다.
DI는 어떻게 콤포넌트가 의존성을 가지는지를 다루는 디자인 패턴입니다,
Angular의 injector시스템은 컴포넌트를 생성하고, 각각의 종속성을 다루며, 컴포넌트가 요청한 곳에 제공을 해주는 역활을 합니다.
이 Angular는 DI를 통해서 얻을수 있는 장점이 몇가지 있습니다.

각 컴포넌트 간의 의존성을 느슨하게 만들어 코드의 유지보수를 더욱 편하게 만들어 줍니다.

좋은 테스트환경을 제공해 줍니다.

각각의 API들의 추상화가 이뤄집니다.

코드가 모듈화 되고 또 코드의 재사용성이 높아집니다.

간략하게 설명을 하면 Angular의 서비스는 $provide와 $injector를 기반으로 어플리케이션의 전반에서 사용이 가능합니다.

참조 : yubylab

코드의 재사용과 효율적인 테스트를 위하여 사용한다고 한다. 뭐 당연한 이야기지만, DI에 대하여 좀 더 자세히 알고자 한다면 서비스 개발을 위한 의존관계 주입 알아보기 : webframeworks.kr을 참조하자.

즉, 이 코드들은 ‘DI를 하는 방법’이지 DI를 사용하기에 ‘적확한 상황’은 아니란 것이다. 의존관계 즉, 객체를 생성하는 일련의 작업이 필요하다면 DI를 하면 된다.

여하간 다른 방법도 살펴보자.

var module = angular.module("angularStart", []);

module.config(function($provide) {
  $provide.provider("msgDI1", function() {
    this.$get = function() {
      return function($scope, text) {
        $scope.diMsg2 = 'hello word! i\'m injected msgDI1!! diMsg2!';
        return text;
      };
    };
  });

  $provide.factory("msgDI2", function(){
      return function(text) {
          return text;
      };
  });

  $provide.value("msgDI3", function(text) {
      return text;
  });
});

module.controller("MainController", function($scope, msgDI1, msgDI2, msgDI3) {
  $scope.msg = "hello world";
  $scope.diMsg1 = msgDI1($scope, "hello world! i'm injected msgDI1!!");
  $scope.diMsg2 = msgDI2("hello world! i'm injected msgDI2!!");
  $scope.diMsg3 = msgDI3("hello world! i'm injected msgDI3!!");
});

var module = angular.module("angularStart", []);

module.config(function($provide) {

$provide.provider("msgDI1", function() {

this.$get = function() {

return function($scope, text) {

$scope.diMsg2 = 'hello word! i\'m injected msgDI1!! diMsg2!';

return text;

};

});

$provide.factory("msgDI2", function(){

return function(text) {

return text;

};

});

$provide.value("msgDI3", function(text) {

return text;

});

module.controller("MainController", function($scope, msgDI1, msgDI2, msgDI3) {

$scope.msg = "hello world";

$scope.diMsg1 = msgDI1($scope, "hello world! i'm injected msgDI1!!");

$scope.diMsg2 = msgDI2("hello world! i'm injected msgDI2!!");

$scope.diMsg3 = msgDI3("hello world! i'm injected msgDI3!!");

});

이번엔 $provide.factory와 $provide.value를 사용하는 두가지 방법을 모두 사용해보았다.

아주 잘된다.

언제나 그렇지만 인간의 뇌가 CPU가 되지 않는 이상은 ‘코드는 간결할 수록 좋은 것’ 이라는 대전제는 없어지지 않는다. 위 코드만해도 읽기가 어렵다. 좀 더 쉬운 방법을 알아보자.

var module = angular.module("angularStart", []);

module.config(function($provide) {
  $provide.provider("msgDI1", function() {
    this.$get = function() {
      return function($scope, text) {
        $scope.diMsg2 = 'hello word! i\'m injected msgDI1!! diMsg2!';
        return text;
      };
    };
  });

  $provide.factory("msgDI2", function(){
      return function(text) {
          return text;
      };
  });

  $provide.value("msgDI3", function(text) {
      return text;
  });
});

module.provider("msgDI4", function(){
    this.$get = function(){
        return function(text) {
            return text;
        };
    };
});
 
module.factory("msgDI5", function(){
    return function(text) {
        return text;
    };
});
 
module.value("msgDI6", function(text) {
    return text;
});



module.controller("MainController", function($scope, msgDI1, msgDI2, msgDI3, msgDI4, msgDI5, msgDI6) {
  $scope.msg = "hello world";
  $scope.diMsg1 = msgDI1($scope, "hello world! i'm injected msgDI1!!");
  $scope.diMsg2 = msgDI2("hello world! i'm injected msgDI2!!");
  $scope.diMsg3 = msgDI3("hello world! i'm injected msgDI3!!");
  $scope.diMsg4 = msgDI4("hello world! i'm injected msgDI4!!");
  $scope.diMsg5 = msgDI5("hello world! i'm injected msgDI5!!");
  $scope.diMsg6 = msgDI6("hello world! i'm injected msgDI6!!");
});

var module = angular.module("angularStart", []);

module.config(function($provide) {

$provide.provider("msgDI1", function() {

this.$get = function() {

return function($scope, text) {

$scope.diMsg2 = 'hello word! i\'m injected msgDI1!! diMsg2!';

return text;

};

});

$provide.factory("msgDI2", function(){

return function(text) {

return text;

};

});

$provide.value("msgDI3", function(text) {

return text;

});

module.provider("msgDI4", function(){

this.$get = function(){

return function(text) {

return text;

};

});

module.factory("msgDI5", function(){

return function(text) {

return text;

};

});

module.value("msgDI6", function(text) {

return text;

});

module.controller("MainController", function($scope, msgDI1, msgDI2, msgDI3, msgDI4, msgDI5, msgDI6) {

$scope.msg = "hello world";

$scope.diMsg1 = msgDI1($scope, "hello world! i'm injected msgDI1!!");

$scope.diMsg2 = msgDI2("hello world! i'm injected msgDI2!!");

$scope.diMsg3 = msgDI3("hello world! i'm injected msgDI3!!");

$scope.diMsg4 = msgDI4("hello world! i'm injected msgDI4!!");

$scope.diMsg5 = msgDI5("hello world! i'm injected msgDI5!!");

$scope.diMsg6 = msgDI6("hello world! i'm injected msgDI6!!");

});

module.factory, module.provider, module.value 등을 이용해 인젝터를 등록하고, controller에서 바로 불러와 사용한모습이다. config() 안에서 이리저리 뒹구는 것보다는 직관적인 모습이 되었다.

awoeijf

잘 돌아간다.

$injector 서비스를 이용하는 방법

var module = angular.module("angularStart", []);

module.config(function($provide) {
  $provide.provider("msgDI1", function() {
    this.$get = function() {
      return function($scope, text) {
        $scope.diMsg2 = 'hello word! i\'m injected msgDI1!! diMsg2!';
        return text;
      };
    };
  });

  $provide.factory("msgDI2", function(){
      return function(text) {
          return text;
      };
  });

  $provide.value("msgDI3", function(text) {
      return text;
  });
});

module.provider("msgDI4", function(){
    this.$get = function(){
        return function(text) {
            return text;
        };
    };
});
 
module.factory("msgDI5", function(){
    return function(text) {
        return text;
    };
});
 
module.value("msgDI6", function(text) {
    return text;
});



module.controller("MainController", function($scope, $injector, msgDI1, msgDI2, msgDI3, msgDI4, msgDI5, msgDI6) {
  $scope.msg = "hello world";
  $scope.diMsg1 = msgDI1($scope, "hello world! i'm injected msgDI1!!");
  $scope.diMsg2 = msgDI2("hello world! i'm injected msgDI2!!");
  $scope.diMsg3 = msgDI3("hello world! i'm injected msgDI3!!");
  $scope.diMsg4 = msgDI4("hello world! i'm injected msgDI4!!");
  $scope.diMsg5 = msgDI5("hello world! i'm injected msgDI5!!");
  $scope.diMsg6 = msgDI6("hello world! i'm injected msgDI6!!");
  
  var msgDI7 = $injector.get('msgDI6');
  $scope.diMsg7 = msgDI7("hello world! i'm injected msgDI6!! but i am msg7! :P");
});

var module = angular.module("angularStart", []);

module.config(function($provide) {

$provide.provider("msgDI1", function() {

this.$get = function() {

return function($scope, text) {

$scope.diMsg2 = 'hello word! i\'m injected msgDI1!! diMsg2!';

return text;

};

});

$provide.factory("msgDI2", function(){

return function(text) {

return text;

};

});

$provide.value("msgDI3", function(text) {

return text;

});

module.provider("msgDI4", function(){

this.$get = function(){

return function(text) {

return text;

};

});

module.factory("msgDI5", function(){

return function(text) {

return text;

};

});

module.value("msgDI6", function(text) {

return text;

});

module.controller("MainController", function($scope, $injector, msgDI1, msgDI2, msgDI3, msgDI4, msgDI5, msgDI6) {

$scope.msg = "hello world";

$scope.diMsg1 = msgDI1($scope, "hello world! i'm injected msgDI1!!");

$scope.diMsg2 = msgDI2("hello world! i'm injected msgDI2!!");

$scope.diMsg3 = msgDI3("hello world! i'm injected msgDI3!!");

$scope.diMsg4 = msgDI4("hello world! i'm injected msgDI4!!");

$scope.diMsg5 = msgDI5("hello world! i'm injected msgDI5!!");

$scope.diMsg6 = msgDI6("hello world! i'm injected msgDI6!!");

var msgDI7 = $injector.get('msgDI6');

$scope.diMsg7 = msgDI7("hello world! i'm injected msgDI6!! but i am msg7! :P");

});

자, 바뀐 부분은 controller()의 마지막 2줄과 controller의 파라미터에 $injector를 추가한 것 뿐이다.

인젝션할 객체가 많다면 $injector를 이용하는게 더 좋을 거라 생각한다. 파라미터도 간결해지고 말이다.

잘 돌아간다. 코드 참조 : Aliencube Community

왜 AngularJS를?

여러 의문점이 있다. 까놓고 말해서 JSP를 스파게티로 짜든 짜파게티로 짜든 어차피 사용자 입장에서는 동일한 페이지고, 생산성의 문제라면 익숙하다못해 진절머리가 나는 jQuery를 이용하면 되는데…. 하는 의문들 말이다.

여기에는 주관적인 부분이 있다. 배우든 배우지 않든 어차피 본인의 선택이며 배워야 하는가?에 대한 답은 본인이 도출해야한다.

분명 jQuery도 백본도 엠버도 앵귤러도 모두 훌륭한 자바스크립트 라이브러리이다. 무엇을 배우든 분명히 도움이 되는 곳은 반드시 있게 마련이다.

풀어서 말해보자. 과거부터 현재까지 멈추지 않고 웹 브라우저의 기능이 점점 강화되면서 그 범용성이 점점 넓어져왔고, 그에따라 웹 브라우저가 표현할 수 있는… 그러니까 쉽게 말해서 웹 브라우저로 가능한 작업들의 수가 엄청나게 늘어났다. 이 말은 곧 각각의 웹 어플리케이션이 가지는 성질이 저마다 각양각색이고 거기에 어울리는 프레임워크도 각양각색이 된다는 이야기다. 내가 명함으로 쓸 html하나 짜리 홈페이지를 구축하는데 굳이 무거운 스프링 프레임워크를 올리는게 합리적인가? 뭐 그런 이야기다.

다시 본론으로 돌아와서 왜 AngularJS를 써야하는가? 자신의 웹 어플리케이션의 성질이 AngularJS와 조화를 이룬다면 AngularJS를 쓰라는 말이다. backbone이 더 어울리면 backbone을 쓰고, ember가 어울리면 ember를 쓰라는 소리다. 여기에 대해서는 다른 훌륭한 블로거들이 정리한 글을 참조하면 될거라 생각한다. ~~(절대 귀찮아서 안 찾아보려는거 아님)~~ 참조 : Sunhyoup’s Story

AngularJS를 사용하면 Google에서 제공하는 여러 서비스들처럼 싱글 페이지 어플리케이션을 만드는데 용이하다고 하니 참고하도록 하자.

AngularJS의 입문… 이라고 하는게 맞으려나.. AngularJS 시작하기로 검색하여 나온 주요 키워드들을 기준으로 한 번 봐보고 따라해보았다.

다음엔 간단한 페이지를 작성하면서 공부해보도록하자.

[출처] http://www.codekin.com/?p=1530

본 웹사이트는 광고를 포함하고 있습니다.
광고 클릭에서 발생하는 수익금은 모두 웹사이트 서버의 유지 및 관리, 그리고 기술 콘텐츠 향상을 위해 쓰여집니다.

이 게시물을

번호	제목	글쓴이	날짜	조회 수
1	[CSS 기초] DIV 태그를 이용하여 프레임 나누기	졸리운_곰	2017.08.25	496

첫 페이지 1 끝 페이지

쓰기

태그

angular js & ionic framework AngularJS

AngularJS

AngularJS란?

MVW Framework

양방향 데이터 바인딩(Two-way Data Binding)

직관적인 API와 문법

쉬운(?) 개발

의존성 주입(Dependency Injection)

$provide 서비스를 이용하는 방법

경축! 아무것도 안하여 에스천사게임즈가 새로운 모습으로 재오픈 하였습니다. 어린이용이며, 설치가 필요없는 브라우저 게임입니다. https://s1004games.com

$injector 서비스를 이용하는 방법

왜 AngularJS를?

댓글 0

로그인

경축! 아무것도 안하여 에스천사게임즈가 새로운 모습으로 재오픈 하였습니다.
어린이용이며, 설치가 필요없는 브라우저 게임입니다.
https://s1004games.com