AngularJS 문서 원본 보기
←
AngularJS
둘러보기로 가기
검색하러 가기
문서 편집 권한이 없습니다. 다음 이유를 확인해주세요:
요청한 명령은 다음 권한을 가진 사용자에게 제한됩니다:
사용자
.
이 문서는 편집하거나 다른 명령을 할 수 없도록 보호되어 있습니다.
문서의 원본을 보거나 복사할 수 있습니다.
AngularJS를 정리 합니다. *홈페이지 : [http://angularjs.org/ http://angularjs.org/] :*JavaScript 웹 개발 화면 : [http://jsfiddle.net/api/post/library/pure/ http://jsfiddle.net/api/post/library/pure/] :*CheatSheet : [http://www.cheatography.com/proloser/cheat-sheets/angularjs/ http://www.cheatography.com/proloser/cheat-sheets/angularjs/] :*API : [http://docs.angularjs.org/api/ng http://docs.angularjs.org/api/ng] :*Developer Guide: [http://docs.angularjs.org/guide http://docs.angularjs.org/guide] ::*[[Bootstrap|Bootstrap]] : [http://docs.angularjs.org/guide/bootstrap http://docs.angularjs.org/guide/bootstrap] *다운로드 : *라이선스 : *플랫폼 : [[JavaScript|JavaScript]] == AngularJS 개요 == === 구성 요소 === {| cellspacing="0" cellpadding="2" border="1" width="100%" bgcolor="#FFFFFF" align="center" |- | width="20%" align="center" valign="middle" style="background-color:#eee;" | 구성 요소 | width="80%" align="center" valign="middle" style="background-color:#eee;" | 설명 |- | align="center" valign="middle" | $scope | align="left" valign="middle" | *컨트롤러와 템플릿을 연결하고 모델을 보강하여 양방향 바인딩을 할 수 있게 하는 객체 |- | align="center" valign="middle" | module | align="left" valign="middle" | 코드를 관리하는 컨테이너 |- | align="center" valign="middle" | controller | align="left" valign="middle" | |- | align="center" valign="middle" | template | align="left" valign="middle" | |- | align="center" valign="middle" | directive | align="left" valign="middle" | *HTML에 새로운 기능을 알려 주는 역할 *restrict :*A : Attribute :*E : Element :*C : Class :*M : coMment *replace: true *template : HTML 요소 *link : function(scope, element, attrs) { ~ } app.directive('~", function() { return ~; }); |- | align="center" valign="middle" | filter | align="left" valign="middle" | { { ~ | filter }} app.filter('checkmark', function() { return function(input) { return input ? 'aa' : 'bb'; }; }); |- | align="center" valign="middle" | service | align="left" valign="middle" | *어플리케이션에 어떤 기능을 제공하는 싱글톤 클래스 app.factory('~', function() { return ~; }); |} * === http://frontend.diffthink.kr/2016/07/angularjs-angularjs.html === === 주요 문법 === *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 http://programmingsummaries.tistory.com/category/AngularJS] :*Grid : [http://angular-ui.github.io/ng-grid/ http://angular-ui.github.io/ng-grid/], [http://programmingsummaries.tistory.com/151 http://programmingsummaries.tistory.com/151] :*Tree : [http://programmingsummaries.tistory.com/248 http://programmingsummaries.tistory.com/248] *[[Bootstrap|Bootstrap]] :*[http://mobicon.tistory.com/392 http://mobicon.tistory.com/392] :*[http://getbootstrap.com/ http://getbootstrap.com/], [http://startbootstrap.com/ http://startbootstrap.com/] :*[http://addyosmani.github.io/jquery-ui-bootstrap/ http://addyosmani.github.io/jquery-ui-bootstrap/] :*[http://angular-ui.github.io/bootstrap/ http://angular-ui.github.io/bootstrap/] :*[http://angular-ui.github.io/ http://angular-ui.github.io/], [https://github.com/angular-ui/ https://github.com/angular-ui/] :*[http://angular-ui.github.io/ http://angular-ui.github.io/], [http://angular-ui.github.io/bootstrap/ http://angular-ui.github.io/bootstrap/] *[https://github.com/matys84pl/angularjs-requirejs-lazy-controllers/ https://github.com/matys84pl/angularjs-requirejs-lazy-controllers/] *[http://www.nextree.co.kr/p3241/ 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 http://weblogs.asp.net/dwahlin/archive/2013/05/22/dynamically-loading-controllers-and-views-with-angularjs-and-requirejs.aspx] :*[https://github.com/DanWahlin/CustomerManager https://github.com/DanWahlin/CustomerManager] *[http://blog.outsider.ne.kr/975 http://blog.outsider.ne.kr/975] *[http://jcf.daewoobrenic.co.kr/blog/?p=237 http://jcf.daewoobrenic.co.kr/blog/?p=237] *[https://gist.github.com/ysyun/5394125 https://gist.github.com/ysyun/5394125] *[http://blog.outsider.ne.kr/1002?category=22 http://blog.outsider.ne.kr/1002?category=22] *[https://medium.com/opinionated-angularjs/a2fcbf874a1c https://medium.com/opinionated-angularjs/a2fcbf874a1c] [[Category:JavaScript|Category:JavaScript]]
AngularJS
문서로 돌아갑니다.
둘러보기 메뉴
개인 도구
로그인
이름공간
문서
토론
변수
보기
읽기
원본 보기
역사 보기
더 보기
검색
주요 메뉴
오픈소스 컨설팅
오픈소스
오픈소스 라이선스
오픈소스 커뮤니티
오픈소스 종류
오픈소스 현황
오픈소스 한글화
문자셋과 인코딩
Storage
Network
보안
고가용성
모니터링
오픈 API
오픈 서비스
Cloud
BigData
Android
산사랑 노트
둘러보기
인기 문서
최근 수정 문서
모든 문서
모든 분류
임의 문서
위키 사용법
자매 사이트
CMS
오비컨 홈페이지
오비컨 CMS
블로그
데모 - SuiteCRM
산사랑의 Twitter
산사랑의 Facebook
친구 사이트
공개SW 포털
OLIS
한국공개소프트웨어협회
AppCenter 지원본부
OLC
PSEG
개발자 블로그
블로터
개인 메뉴
메뉴 수정
양식함
도구
여기를 가리키는 문서
가리키는 글의 최근 바뀜
특수 문서 목록
문서 정보