AngularJS

AngularJS를 정리 합니다.

• 홈페이지 : http://angularjs.org/

• JavaScript 웹 개발 화면 : http://jsfiddle.net/api/post/library/pure/
• CheatSheet : http://www.cheatography.com/proloser/cheat-sheets/angularjs/
• API : http://docs.angularjs.org/api/ng
• Developer Guide: http://docs.angularjs.org/guide

• Bootstrap : http://docs.angularjs.org/guide/bootstrap

• 다운로드 :
• 라이선스 :
• 플랫폼 : JavaScript

AngularJS 개요

구성 요소

구성 요소	설명
$scope	컨트롤러와 템플릿을 연결하고 모델을 보강하여 양방향 바인딩을 할 수 있게 하는 객체
module	코드를 관리하는 컨테이너
controller
template
directive	HTML에 새로운 기능을 알려 주는 역할 restrict A : Attribute E : Element C : Class M : coMment replace: true template : HTML 요소 link : function(scope, element, attrs) { ~ } app.directive('~", function() { return ~; });
filter	{ { ~ | filter }} app.filter('checkmark', function() { return function(input) { return input ? 'aa' : 'bb'; }; });
service	어플리케이션에 어떤 기능을 제공하는 싱글톤 클래스 app.factory('~', function() { return ~; });

주요 문법

• ng-app="phonecatApp"
• ng-controller="PhoneListCtrl"
• ng-model="query"
• ng-view
• ng-repeat="phone in phones"

• ng-repeat="phone in phones | filter:query"
• ng-repeat="phone in phones | filter:query | orderBy:orderProp"

• ng-src
• ng-click="setImage(img)"
• { { ~ | filter }}

• Sample JavaScript

var phonecatApp = angular.module('phonecatApp', []);
phonecatApp.controller('PhoneListCtrl', function ($scope) { ~ }

phonecatApp.controller('PhoneListCtrl', function ($scope, $http) {
   $http.get('phones/phones.json').success(function(data) {
       $scope.phones = data;
    });
});

app.factory('Phone', ['$resource',
   function($resource){
       return $resource('phones/:phoneId.json', {}, {
           query: {method:'GET', params:{phoneId:'phones'}, isArray:true}
   });
}]);

app.controller('PhoneDetailCtrl', ['$scope', '$routeParams', 'Phone', function($scope, $routeParams, Phone) {
}

$resource('data/project.json/:id', {id: '@id'});
Project.get({id: $routeParams.id}): new Project();

참고 문헌

• http://programmingsummaries.tistory.com/category/AngularJS

• Grid : http://angular-ui.github.io/ng-grid/, http://programmingsummaries.tistory.com/151
• Tree : http://programmingsummaries.tistory.com/248

• Bootstrap

• http://mobicon.tistory.com/392
• http://getbootstrap.com/, http://startbootstrap.com/
• http://addyosmani.github.io/jquery-ui-bootstrap/
• http://angular-ui.github.io/bootstrap/
• http://angular-ui.github.io/, https://github.com/angular-ui/
• http://angular-ui.github.io/, http://angular-ui.github.io/bootstrap/

• https://github.com/matys84pl/angularjs-requirejs-lazy-controllers/

• http://www.nextree.co.kr/p3241/
• http://weblogs.asp.net/dwahlin/archive/2013/05/22/dynamically-loading-controllers-and-views-with-angularjs-and-requirejs.aspx

• https://github.com/DanWahlin/CustomerManager

• http://blog.outsider.ne.kr/975
• http://jcf.daewoobrenic.co.kr/blog/?p=237
• https://gist.github.com/ysyun/5394125
• http://blog.outsider.ne.kr/1002?category=22
• https://medium.com/opinionated-angularjs/a2fcbf874a1c