ANGULARJS TIPS

DI? - 알면 좋은 것
ui-router - nested view!
resource - be careful
animation - so easy
useful javascript library

dependency injection

function(GroupService) {
    return GroupService.query();
}

GroupService???

대체 어디서??

DEPENDENCY INJECTION

source

https://github.com/angular/angular.js/blob/master/src/auto/injector.js#L56

DEPENDENCY INJECTION

function => toString() => parse.. parse.. parse..

-_-

DI with minifier

function(GroupService) {
    var group = GroupService.get({id:1});
    GroupService.update(group, function(data) {
    });
    return GroupService.query();
}

minify!!

function(a){return var b = a.get({id:1}); a.update(b, function(c){});return a.query();}

DI fail!

magnle => false

ruby on rails use

:mangle => false

function(GroupService){return var b = GroupService.get({id:1}); GroupService.update(b, function(c){});
return GroupService.query();}

no more good solution?

NGMIN

["GroupService", function(GroupService) {
    return GroupService.query();
}]

["GroupService", function(a) {
    return a.query();
}]

NGMIN SOLUTION

https://github.com/btford/ngmin

ui-router

https://github.com/angular-ui/ui-router

ngRouter extention from angular-ui team

state manager
nested view
multiple named view
event

nested view

nested view

nested view

        .state('app.group', {
          url: '/app/groups',
          templateUrl: '/views/app/group.html',
          controller: 'AppGroupCtrl',
          abstract: true
        })
          .state('app.group.item', {
            url: '/:group_id/items',
            templateUrl: '/views/app/group/items.html',
            controller: 'AppGroupItemCtrl'
          })
          .state('app.group.report', {
            url: '/:group_id/report',
            templateUrl: '/views/app/group/report.html',
            controller: 'AppGroupReportCtrl'
          })

ui-view

app.html

<ui-view></ui-view>

app/group.html

<ui-view></ui-view>

app/group/setting.html

directory structure

resource

use instance method!

default - get/save/query/remove/delete

custom method

group.$update()

group.$remove()

class method vs instance method

class

var group = GroupService.get({id:1});
group.name = "modify name";
GroupService.update(group);
if(confirm("confirm?")) {
  GroupService.remove({id:group.id});
}

instance

var group = GroupService.get({id:1});
group.name = "modify name";
group.$update();
if(confirm("confirm?")) {
  group.$remove();
}

resource usage

assign / callback / $q(promise/deferred)

assign

간단한 쿼리

callback

간단한데 추가작업이 필요할 때

단계적인 작업이 필요할 때

assign

var groups = GroupService.query();
alert(groups.length); 
=> X(receiving...)

async!

callback

GroupService.query(function(data) {
  $scope.groups = data;
  alert(data.length);
});
=> O

GroupService.get({id:1}, function(data) {
  $scope.group = data;
  CommentService.query({group_id:data.id}, function(data) {
    $scope.group.comment = data;
  })
});
=> ?

$q (promise/deferred)

http://docs.angularjs.org/api/ng.$q

http://documentup.com/kriskowal/q/

GroupService.get({id:1}).$promise
  .then(function(data) {
    $scope.group = data;
    return data;
  }).then(function(data) {
    // use data = $scope.group
    ...
  }).then(function() {
    ...
  });