중개 플랫폼 서비스 : AngularJS

AngularJS 개요

구성 요소
http://frontend.diffthink.kr/2016/07/angularjs-angularjs.html
주요 문법

참고 문헌

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 http://docs.angularjs.org/guide/bootstrap]
다운로드 :
라이선스 :
플랫폼 : JavaScript

AngularJS 개요

구성 요소

{| cellspacing="0" cellpadding="2" border="1" width="100%" bgcolor="#FFFFFF" align="center"
|- | width="20%" align="center" valign="middle" style="background-color:#eee;" | 구성 요소

컨트롤러와 템플릿을 연결하고 모델을 보강하여 양방향 바인딩을 할 수 있게 하는 객체

|-
| align="center" valign="middle" | module

align="left" valign="middle"
align="center" valign="middle"
align="left" valign="middle"
-
align="center" valign="middle"
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 ~; });

 { { ~ | filter }}
 app.filter('checkmark', function() {
    return function(input) {
        return input ? 'aa' : 'bb';
    };
 });

어플리케이션에 어떤 기능을 제공하는 싱글톤 클래스

 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', [](.md));
 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();

참고 문헌

최종 수정일: 2024-09-30 12:26:18