반응형

Angular-deckgrid: A masonry-like grid for Angular JS

deckgrid

Homepage: http://akoenig.github.io/angular-deckgrid/#/
GitHub: https://github.com/akoenig/angular-deckgrid

 

A lightweight masonry-like grid for AngularJS.

http://akoenig.github.io/angular-deckgrid

반응형
저작자표시

'프로그래밍 > Web' 카테고리의 다른 글

IE 11 일경우 확인 하는 방법  (0) 2014.01.23
[Web] CodePlayer: Watch your code like a movie  (0) 2014.01.23
[Framework] Semantic UI: A language for sharing UI  (0) 2014.01.09
Web Developer Checklist: Everything you need to make your code its best  (0) 2014.01.06
[jQuery] 원하는 위치로 브라우저 스크롤  (0) 2014.01.03
반응형

/angular-invoicing

 

Create free and unlimited one off invoices using this little Invoicing app made with Angular JS

http://metaware.github.io/angular-invoicing/

 

Angular Invoicing

Use this extremely small and lightweight project built in Angular JS to build your one off Invoices. No monthly fees, No Subscriptions - No heavy duty features, Just simple invoices.

Usage

Use this project here: Angular Invoicing or clone it and customize it to your hearts content.

 

 

Simple Invoicing: Invoicing with AngularJS

simple invoicing

Homepage: http://metaware.github.io/angular-invoicing/
GitHub: https://github.com/metaware/angular-invoicing

 

 

반응형
저작자표시

'프로그래밍 > Web' 카테고리의 다른 글

Programr - http://www.programmr.com/  (0) 2013.12.11
[PHP] Yaf – Yet Another Framework: A fast PHP framework  (0) 2013.12.09
[PHP] Nette Framework 2.0: A PHP tool for web development  (0) 2013.12.06
[HTML5] Enables <video> and <audio> tags in all major browsers.  (0) 2013.12.05
NudgePad: Faster prototyping in your browser  (0) 2013.12.02
반응형

역활별 자바스크립트

 

 역활

라이브러리 명 

 모듈화 지원

 - Backbone.js 

 비동기 로드 지원

 - RequireJS

 MVC(Model - View - Controller)

 - AngularJS

 - knockoutJS

 End-to-End framework

 - Meteor(http://www.meteor.com) on Node.js

 - Derby(http://derbyjs.com) on Node.js

 

- 자바스크립트 MVC는 서버 사이드에서처럼 브라우저 단에서도 데이터와 뷰, 로직 처리를 분리해 개발 및 확장, 유지보수성을 높이고 최저 품질을 높이기 위한 방법을 지원하자는 취지에서 개발됨.

 

- End-to-End 프레임워크는 Node.js 진영에서 지원되는 프레임워크로 서버에서 브라우저까지 모두 자바스크립트로 개발 할 수 있도록 돼 있다. 서버에 설치부터 필요함.

 

- AngularJS, KnockoutJS는 Data Binding을 지원한다. Data Binding이란 자바스크립트의 객체 값으로 HTML의 태그와 양방향 통신을 해서 일치시켜 주는 작업을 지원하는 것을 말한다. 별도 HTML태그를 컨트롤 할 필요없이 자바스크립트 객체값만 변경시키면 UI는 저절로 변경이 된다. 그렇다고 아무것도 안하는 것은 아니다.

 

* 라이브러리를 익혀 나가는 순서.

1. Backbone으로 모듈화 및 기본적인 MVC 의 개념을 익힌다.

2. RequireJS로 비동기적으로 js를 불러와 네트워크 트래픽을 분산시키는 기법을 익힌다.

3. Backbone + Require 또는  AngularJS + RequireJS(KnockoutJS + RequireJS) 의 조합으로 MVC르 ㄹ좀더 심화시킨다. (AngularJS는 구글에서, KnockoutJS는 MS에서 지원하고 있다. )

 

angular , require backbone 

 

.

반응형
저작자표시

'프로그래밍 > Web' 카테고리의 다른 글

StackEdit: An online editor with Markdown Extra support  (0) 2013.09.26
구글지도 마커 쉽게 만들기  (0) 2013.09.26
Favico.js: Animate your favicon - http://lab.ejci.net/favico.js/  (0) 2013.09.16
ASP 날짜, 시간 - date(), Now(), time()  (0) 2013.09.16
Perimeter.js: Detect mouse breaches of an invisible perimeter  (0) 2013.09.16
반응형

[마소] 2013.07 Angular.JS - 서비스들과 의존성 주입

 

AngularJS의 서비스는 특정 기능을 담당하는 객체들을 서비스라고 한다.

공통된 특정 작업을 수행하는 싱글톤(singleton) 객체다.

singleton은 인스턴스가 단 1개만 존재하는 것을 보증하는 디자인 패턴이다.

예를 들어 기본 서비스로 제공하는 $http service  는 브라우저의 낮은 레벨에 해당하는 XMLHttpRequest 객체의 기능을 제공한다.

 

Angular services are singletons that carry out specific tasks common to web apps, such as the$http service that provides low level access to the browser'sXMLHttpRequest object.

 

To use an Angular service, you identify it as a dependency for the dependent (a controller, or another service) that depends on the service. Angular's dependency injection subsystem takes care of the rest. The Angular injector subsystem is in charge of service instantiation, resolution of dependencies, and provision of dependencies to factory functions as requested.

 

service

  • $anchorScroll  HTML5 spec에 지정된 규칙과 location hash의 현재 값에 따라 관련 요소의 
                               스크롤 처리를 한다.
  • $cacheFactory 캐시화할 객체를 관리한다.
  • $compile         HTML문자열이나 DOM의 템플릿을 스코프에 연결하도록 컴파일한다.
  • $controller       콘트롤러를 인스턴스화 한다.
  • $document       JQuery(lite)로 감싼 window.document 이다.
  • $exceptionHandler  angularJS에서 감지되는 모든 예외가 위임된다.
  • $filter                     정보 표현에 대한 formatting 처리를 한다.
  • $http                     XMLHttpReqeust 또는 JSONP에 대한 기능을 제공한다.
  • $httpBackend    테스트하는 경우 $http에 대한 대체처리가 된다. 직접 호출은 불가하다.
  • $interpolate     $compile의 처리와 같이 데이터 바인딩의 처리를 컴파일한다.
  • $locale        다국어 규칙을 제공한다.
  • $location     window.location 보다 발전된 기능을 제공한다. (HTML5 처리 등)
  • $log            로깅을 처리한다.
  • $parse        AngularJS 표현식으로 변환한다.
  • $q              Kris Kowal's Q(promise/deferred)와 동일한 기능을 제공한다.
  • $rootElement  AngularJS APP의 루트 요소를 얻는다.
  • $rootScope    AngularJS APP의 루트 스코프를 얻는다.
  • $route           URL을 감시해 해당 경로의 컨트롤러와 뷰를 mapping한다.
  • $routeParams  URL상의 파라미터를 관리한다.
  • $templateCache HTML templete을 cache한다.
  • $timeout     window.setTimeout과 같은 기능을 하지만 $exceptionHadler와 연동 처리된다.
  • $window   전역 변수 오염의 방지와 테스트를 위해 브라우저의 window와
                         동일한 기능을 하는 객체를 제공한다.

    •  

     

     

    * 의존성 주입 (Dependency Injection)
    의존성 주입 적용으로 얻을 수 있는 이점

    - 종속성의 설정을 컴파일 시에서 실행 시로 조정해 모듈 간의 결합도를 낮출 수 있다.

    - 여러 곳에서 사용 중인 모듈을 소스 코드의 수정없이 사용할 수 있어 재사용율이 높다.

    - 모의 객체 등을 이용한 단위 테스트 시 편의성을 높여준다.

     

    의존성 주입 패턴

    - 생산자 주입 : 필요한 의존성을 모두 포함하는 클래스의 생성자를 만들고, 그 생성자를 통해 의존성을 주입한다.(new 연산자를 통한 생성)

    - 세터(setter)를 통한 주입 : 의존성을 입력받는 세터 메소드를 만들어 의존성을 중비한다.

    - 인터페이스를 통한 주입 : 의존성을 주입하는 함수가 포함된 인터페이스를 작성하고, 이를 구현하도록 함으로써 실행 시 의존성을 주입한다.

     

     

     

     

     

    반응형
    저작자표시

    '프로그래밍 > Script' 카테고리의 다른 글

    [CSS] Pickadate.js — Responsive date & time picker  (0) 2013.07.25
    [jQuery] jQuery 참고 사이트  (0) 2013.07.24
    [jQuery] 20 Most Popular Responsive jQuery Plugins  (0) 2013.07.24
    [jQuery] jQuery Plugins with Backbone – Articles List Shedding the Light Onto Sweet Couple  (0) 2013.07.22
    [javascript] 모바일웹에서 새 창 닫기  (0) 2013.07.18
    반응형

    [마소] 2013.05 Angular.JS 의 구조와 특징

     

    예제를 로컬에 구현해 보았다.

    여러번 해본 것이지만 예제 나온김에 한번 더.

    angular.js 파일은 받아두어야 한다.

     

    기본적으로 일단 <html> 태그에 ng-app 를 입력해주어야 한다.

    <body>에는 ng-controller 를 입력해주어야 한다.

     반복문은 반복하려는 구문에  ng-repeat 를 입력해주면 해당 데이터 배열 갯수만큼 반복된다.

     

     $scope로 데이터를 전달한다.

     데이터 출력은 "{{데이터}}"의 형식으로 된다.

     

    모델은 $scope의 속성값이다. (todoList)

    뷰는 DOM, 보이는 템플릿 자체가 뷰인 셈이다.

    컨트롤러는 자바스크립트 함수로, $scope를 argument로 가지고 있다.  

     

    ※ Angular.JS 에서 사용하는 지시문

     

     ng-app

     Declares an element as a root element of the application allowing behavior to be modified through custom HTML tags.

     ng-bind

     Automatically changes the text of a HTML element to the value of a given expression.

     ng-model

     Similar to ng-bind, but allows two-way data binding between the view and the scope.

     ng-class

     Allows class attributes to be dynamically loaded.

     ng-controller

     Specifies a JavaScript controller class that evaluates HTML expressions.

     ng-repeat

     Instantiate an element once per item from a collection.

     ng-show

    & ng-hide

     Instantiate an element once per item from a collection.

     ng-switch

     Conditionally instantiate one template from a set of choices, depending on the value of a selection expression.

     ng-view

     The base directive responsible for handling routes that resolve JSON before rendering templates driven by specified controllers.

     

     

    ※ Model–view–controller (MVC)

     

     

     

     Model          >     JS Objects

     View            >     DOM

     Controller     >     JS Function

     

     

    ※ Template, Model, View 방식으로 구현된다.  
            (참고 : http://docs.angularjs.org/#!/tutorial/step_04)

     

     

    ※ 예제 구현 화면 

     

    ※ 소스 화면 (Sublime Text 2) 

     

    .

    반응형
    저작자표시

    '프로그래밍 > Web' 카테고리의 다른 글

    Codeblock.js— A better code learning environment  (0) 2013.06.20
    PreloadJS  (0) 2013.06.20
    Text editor -텍스트에디터 : Brackets  (0) 2013.06.13
    Text editor - 텍스트 에디터 : Sublime with TrailingSpaces  (0) 2013.06.13
    ICEcoder — In-browser code editor  (0) 2013.06.04
    반응형

    jquery와 angulars 같이 사용하기.

    requireJS로 시작했다가 무거운거 같아서 그냥 같이 쓰는걸로 해봤다.

    문법적인 문제는 발견되지 않았다. 너무 간단한 테스트라서 그럴지도.

     

    AS-IS

     : index.html에 require.js와 main.js, angular.js, controllers.js 등을 녹여넣었다.

    * index.html

    <!doctype html>
    <html lang="en" ng-app>
        <head>
            <title>jQuery+RequireJS Sample Page</title>
            <!-- This is a special version of jQuery with RequireJS built-in -->
            <script data-main="scripts/main" src="scripts/require-jquery.js"></script>
                   </script>
        </head>
        <body ng-controller="PhoneListCtrl" >
            <h1>jQuery+RequireJS Sample Page</h1>
            <p>Look at source or inspect the DOM to see how it works.</p>
           
           
           
            <div id="mydiv">aaa</div>
            <p>Total number of phones: {{phones.length}} </p>
            <p>Angulars Templates - http://docs.angularjs.org/tutorial/step_02</p>

     <p>Nothing here {{'yet' + '!'}}</p>
     
     <p>1 + 2 = {{ 1 + 2 }}</p>
     
     <p class="hello">{{hello}}______</p>
        </body>
    </html> 

    * main.js - require.js에서 사용함. 

     require(["jquery"], function($) {
      $("#mydiv").html("Hello this is RequireJS talking");
    });


    require(["jquery", "jquery.alpha", "jquery.beta"], function($) {
        //the jquery.alpha.js and jquery.beta.js plugins have been loaded.
        $(function() {
            $('body').alpha().beta();
        });
    });

    // angular.JS, controllers.js 를 LOAD.
    require(["angular"], function($) {

    });
    require(["controllers"], function($) {

    });

    * controllers.js - angular.js에서 사용 

     function PhoneListCtrl($scope) {
      $scope.phones = [
        {"name": "Nexus S",
         "snippet": "Fast just got faster with Nexus S.",
         "age": 0},
        {"name": "Motorola XOOM™ with Wi-Fi",
         "snippet": "The Next, Next Generation tablet.",
         "age": 1},
        {"name": "MOTOROLA XOOM™",
         "snippet": "The Next, Next Generation tablet.",
         "age": 2}
      ];
     
      $scope.orderProp = "age";  
      $scope.hello = "Hello, world!"; 
    }

     

    TO-BE

    * index.html 에 다 순차적으로 호출하였다.(require.js 사용안함) 

     <!doctype html>
    <html lang="en" ng-app>
        <head>
            <title>jQuery+RequireJS Sample Page</title>
            <!-- This is a special version of jQuery with RequireJS built-in -->
            <script src="scripts/angular.js" ></script>
          <script src="scripts/controllers.js"></script>
          <script src="scripts/jquery-1.5.2.min.js"></script>
          <script src="scripts/jquery.alpha.js" ></script>
          <script src="scripts/jquery.beta.js" ></script>
            <script>        
             $(document).ready(function(){
                 $("#mydiv").html("Hello this is RequireJS talking");
                 $('body').alpha().beta();
             });       
            </script>
        </head>
        <body ng-controller="PhoneListCtrl" >
            <h1>jQuery+RequireJS Sample Page</h1>
            <p>Look at source or inspect the DOM to see how it works.</p>
           
           
           
            <div id="mydiv">aaa</div>
            <p>Total number of phones: {{phones.length}} </p>
            <p>Angulars Templates - http://docs.angularjs.org/tutorial/step_02</p>

     <p>Nothing here {{'yet' + '!'}}</p>
     
     <p>1 + 2 = {{ 1 + 2 }}</p>
     
     <p class="hello">{{hello}}______</p>
        </body>
    </html>

     

     

     

     

     

     

    반응형
    저작자표시

    '프로그래밍 > Script' 카테고리의 다른 글

    [APP] cocoa > HTML5, 오브젝트 C를 HTML5로 변환하다.  (0) 2013.02.17
    [javascript] Backgrid.js – A set of core Backbone UI elements  (0) 2013.02.17
    [javascript] RequireJS - http://requirejs.org/ . a javascript module loader  (0) 2013.02.13
    [JBoss] Modularized JavaScript with JBoss Portal Platform 6 – Avoid Conflicts, Promote Re-usability  (0) 2013.02.07
    [jQuery] 25+ Excellent jQuery Menu Plugins  (0) 2013.02.05
    반응형

    IT 트랜드 2013.02

    Spring보다 쉽고 빠른 웹 개발
     - 파이썬3 기반 웹프레임워크 (Pylatte)

     └ http://www.pylatte.org/
     └ http://pypi.python.org/pypi/Pylatte
     └ http://www.facebook.com/pylatte
     └ https://github.com/rucifer1217/pylatte
     └ http://code.google.com/p/pylatte/
     └ http://code.google.com/p/pylatte/source/browse/pylatte_git/
     └ http://rucifer.tistory.com/category/Programing/Python
     └ http://wiki.python.org/moin/WebFrameworks


    AngularJS 시작하세요.
    http://angularjs.org
    https://github.com/angular/angular.js
    http://docs.angularjs.org/tutorial/
    http://code.angularjs.org/
    http://www.youtube.com/user/angularjs

    Backbone.js
    Angulars.js + Bootstrap 웹앱 개발 데모


    MongoDB(빅데이터)

    네이버에서 NGINX 도입시, 이렇게 테스트 했다.
     - 외부 시스템 Mocking을 통한 웹서버 확장 모듈테스팅 기법

     

    클라우드의 이클립스 - goom IDE로 자바개발하기


    2013 django 변화와 진화
    ⊙ django의 장점/단점
    ⊙ fabric을 이용한 django 배포
    ⊙ django와 celery
    ⊙ pypy와 django
    ⊙ django 1.5의 변화된 점
    ⊙ django on the cloud

    반응형
    저작자표시

    '프로그래밍 > Architect' 카테고리의 다른 글

    Pencil Project  (0) 2013.03.04
    Project Climbing : PM이 되고자 할 때 알아야 하는 9가지  (0) 2013.02.08
    외래어 표기 - 자주 틀리는 외래어 표기. 메뉴얼 , 콘텐츠 , 메뉴  (0) 2013.01.31
    오컴의 면도날  (0) 2013.01.29
    카니발리제이션[ cannibalization ]  (0) 2013.01.24
    반응형

    angular.js

     

    HTML enhanced for web apps!

     

    jquery보다 훨씬 동적이면서 구문에 자유로운 구현이 가능하다.

    확장성이 높아서 웹앱을 제작하는데 있어서 동적구현이 가능하다.

     

     

    AngularJS 시작하세요.
    http://angularjs.org


    github : https://github.com/angular/angular.js

    Tutorial : http://docs.angularjs.org/tutorial/

    Download : http://code.angularjs.org/

    Video : http://www.youtube.com/user/angularjs

     

    AngularJS lets you write client-side web applications as if you had a smarter browser. It lets you use good old HTML (or HAML, Jade and friends!) as your template language and lets you extend HTML’s syntax to express your application’s components clearly and succinctly. It automatically synchronizes data from your UI (view) with your JavaScript objects (model) through 2-way data binding. To help you structure your application better and make it easy to test, AngularJS teaches the browser how to do dependency injection and inversion of control. Oh yeah and it also helps with server-side communication, taming async callbacks with promises and deferreds; and make client-side navigation and deeplinking with hashbang urls or HTML5 pushState a piece of cake. The best of all: it makes development fun!

     

     

     

    반응형
    저작자표시

    '프로그래밍 > Script' 카테고리의 다른 글

    Beginner HTML5, JavaScript, jQuery, Backbone, and CSS3 Resources  (0) 2013.01.30
    NGINX - node.js  (0) 2013.01.25
    [APP] 웹앱 제작시 중요고려사항 - Important Considerations When Building Single Page Web Apps  (0) 2013.01.24
    [javascript] 자바스크립트 숫자 소수점 보여주기  (0) 2013.01.23
    12+ jQuery Mobile Layout Plugins and Examples  (0) 2013.01.16

    + Recent posts

    티스토리툴바