블로그 이미지
플로거
Android/J2EE/Web/Spring/Database

calendar

        1 2 3
4 5 6 7 8 9 10
11 12 13 14 15 16 17
18 19 20 21 22 23 24
25 26 27 28 29 30 31

Notice

Statistics Graph
2019.01.04 15:54 Programming/Angular

Updating Angular

npm run update-deps

bower.json

angular version -> 해당 version 의 최신 버전으로 업데이트

"dependencies": {
   "angular": "~1.5.0",
   "angular-route": "~1.5.0",
   "angular-loader": "~1.5.0",
   "angular-mocks": "~1.5.0",
   "html5-boilerplate": "^5.3.0"
 }


===>


"dependencies": {
   "angular": "~1.5.11",
   "angular-route": "~1.5.11",
   "angular-loader": "~1.5.11",
   "angular-mocks": "~1.5.11",
   "html5-boilerplate": "^5.3.0"
 }


posted by 훈즈 플로거
2019.01.04 15:46 Programming/Angular

AngularJS Seed

- the seed for AngularJS apps

https://github.com/angular/angular-seed

git clone https://github.com/angular/angular-seed.git

cd angular-seed

npm install

npm start  - http://localhost:8000/index.html

Directory Layout - _test.js -> .spec.js

npm test

Running End-to-End Tests

cd e2e-tests

npm start

npm run update-webdriver

npm run protractor


posted by 훈즈 플로거
2019.01.04 11:14 Programming/Angular

Angularjs Tutorial


0 - Bootstrapping - https://docs.angularjs.org/tutorial/step_00

1 - Static Template - https://docs.angularjs.org/tutorial/step_01

2 - AngularJS Templates - https://docs.angularjs.org/tutorial/step_02

3 - Components - https://docs.angularjs.org/tutorial/step_03

4 - Directory and File Organization - https://docs.angularjs.org/tutorial/step_04

5 - Filtering Repeaters - https://docs.angularjs.org/tutorial/step_05

6 - Two-way Data Binding - https://docs.angularjs.org/tutorial/step_06

7 - XHR & Dependency Injection - https://docs.angularjs.org/tutorial/step_07

8 - Templating Links & Images - https://docs.angularjs.org/tutorial/step_08

9 - Routing & Multiple Views - https://docs.angularjs.org/tutorial/step_09

10 - More Templating - https://docs.angularjs.org/tutorial/step_10

11 - Custom Filters - https://docs.angularjs.org/tutorial/step_11

12 - Event Handlers - https://docs.angularjs.org/tutorial/step_12

13 - REST and Custom Services - https://docs.angularjs.org/tutorial/step_13

14 - Animations - https://docs.angularjs.org/tutorial/step_14

The End - https://docs.angularjs.org/tutorial/the_end


posted by 훈즈 플로거
2019.01.03 12:59 Programming/Angular

PhoneCat Tutorial App


  • Environment Setup

Install Git - http://git-scm.com/download

Install Node.js - https://nodejs.org/en/download

node --version - Node.js v4+

git clone --depth=16 https://github.com/angular/angular-phonecat.git

cd angular-phonecat


  • npm install

This command reads angular-phonecat's package.json file and downloads the following tools into the node_modules directory:

Running npm install will also automatically use bower to download the AngularJS framework into the app/bower_components directory.

npm install -g bower -> bower install

npm start  -> Running the Development Web Server


  • Running Unit Tests

npm test

Karma - https://karma-runner.github.io/1.0/index.html

app/phone-list.component.spec.js

describe('phoneList', function() {
 // Load the module that contains the `phoneList` component before each test
 beforeEach(module('phonecatApp'));
 // Test the controller
 describe('PhoneListController', function() {
   it('should create a `phones` model with 3 phones', inject(function($componentController) {
     var ctrl = $componentController('phoneList');
     expect(ctrl.phones.length).toBe(3);
   })); }); });


  • Running E2E Tests

The E2E tests are kept in the e2e-tests directory.

cd e2e-tests

npm run update-webdriver

npm start

npm run protractor - seperate terminal/command

protractor.conf.js

scenarios.js


posted by 훈즈 플로거
2018.12.31 23:00 Programming/Angular

Directives

Directives are a unique and powerful feature available in AngularJS. Directives let you invent new HTML syntax, specific to your application.

Reusable Components

We use directives to create reusable components. A component allows you to hide complex DOM structure, CSS, and behavior. This lets you focus either on what the application does or how the application looks separately.

Localization

An important part of serious apps is localization. AngularJS's locale aware filters and stemming directives give you building blocks to make your application available in all locales.

[index.html]

  1. <!doctype html>
  2. <html ng-app="app">
  3. <head>
  4. <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.5/angular.min.js"></script>
  5. <script src="components.js"></script>
  6. <script src="app.js"></script>
  7. </head>
  8. <body>
  9. <tabs>
  10. <pane title="Localization">
  11. <span>Date: {{ '2012-04-01' | date:'fullDate' }}</span><br>
  12. <span>Currency: {{ 123456 | currency }}</span><br>
  13. <span>Number: {{ 98765.4321 | number }}</span><br>
  14. </pane>
  15. <pane title="Pluralization">
  16. <div ng-controller="BeerCounter">
  17. <div ng-repeat="beerCount in beers">
  18. <ng-pluralize count="beerCount" when="beerForms"></ng-pluralize>
  19. </div>
  20. </div>
  21. </pane>
  22. </tabs>
  23. </body>
  24. </html>

[components.js]

  1. angular.module('components', [])
  2.  
  3. .directive('tabs', function() {
  4. return {
  5. restrict: 'E',
  6. transclude: true,
  7. scope: {},
  8. controller: function($scope, $element) {
  9. var panes = $scope.panes = [];
  10.  
  11. $scope.select = function(pane) {
  12. angular.forEach(panes, function(pane) {
  13. pane.selected = false;
  14. });
  15. pane.selected = true;
  16. }
  17.  
  18. this.addPane = function(pane) {
  19. if (panes.length == 0) $scope.select(pane);
  20. panes.push(pane);
  21. }
  22. },
  23. template:
  24. '<div class="tabbable">' +
  25. '<ul class="nav nav-tabs">' +
  26. '<li ng-repeat="pane in panes" ng-class="{active:pane.selected}">'+
  27. '<a href="" ng-click="select(pane)">{{pane.title}}</a>' +
  28. '</li>' +
  29. '</ul>' +
  30. '<div class="tab-content" ng-transclude></div>' +
  31. '</div>',
  32. replace: true
  33. };
  34. })
  35.  
  36. .directive('pane', function() {
  37. return {
  38. require: '^tabs',
  39. restrict: 'E',
  40. transclude: true,
  41. scope: { title: '@' },
  42. link: function(scope, element, attrs, tabsController) {
  43. tabsController.addPane(scope);
  44. },
  45. template:
  46. '<div class="tab-pane" ng-class="{active: selected}" ng-transclude>' +
  47. '</div>',
  48. replace: true
  49. };
  50. })

[app.js]

  1. angular.module('app', ['components'])
  2.  
  3. .controller('BeerCounter', function($scope, $locale) {
  4. $scope.beers = [0, 1, 2, 3, 4, 5, 6];
  5. if ($locale.id == 'en-us') {
  6. $scope.beerForms = {
  7. 0: 'no beers',
  8. one: '{} beer',
  9. other: '{} beers'
  10. };
  11. } else {
  12. $scope.beerForms = {
  13. 0: 'žiadne pivo',
  14. one: '{} pivo',
  15. few: '{} pivá',
  16. other: '{} pív'
  17. };
  18. }
  19. });

출처 - angularjs.com


posted by 훈즈 플로거
2018.12.31 02:47 Programming/JavaScript

Underscore.js


Underscore is a JavaScript library that provides a whole mess of useful functional programming helpers without extending any built-in objects. It’s the answer to the question: “If I sit down in front of a blank HTML page, and want to start being productive immediately, what do I need?” … and the tie to go along with jQuery's tux and

underscore.js 는 내장객체를 확장하지 않고, 사용하기 쉬운 함수 프로그래밍에 도움을 주는 자바스크립트 라이브러리 입니다.


https://github.com/jashkenas/underscore


Downloads

Development Version (1.9.1)
 60kb, Uncompressed with Plentiful Comments


Production Version (1.9.1)

6.5kb, Minified and Gzipped  (Source Map)


Installation

  • Node.js npm install underscore
  • Meteor.js meteor add underscore
  • Require.js require(["underscore"], ...
  • Bower bower install underscore
  • Component component install jashkenas/underscore

유용한 함수들

uniq_.uniq(array, [isSorted], [iteratee]) Alias: unique 
findIndex_.findIndex(array, predicate, [context]) 
indexOf_.indexOf(array, value, [isSorted])

contains_.contains(list, value, [fromIndex]) Aliases: includeincludes 

isEmpty_.isEmpty(object) 

'Programming > JavaScript' 카테고리의 다른 글

[Javascript] Underscore.js  (0) 2018.12.31
posted by 훈즈 플로거
2018.12.31 02:20 Programming/Angular


Create Components

http://plnkr.co/edit/NomETVhyqSIryX2Pm6dc?p=preview

https://docs.angularjs.org/guide/component

Component is a special kind of directive that uses a simpler configuration which is suitable for a component-based application structure.

Advantages of Components:

  • simpler configuration than plain directives

  • promote sane defaults and best practices

  • optimized for component-based architecture

  • writing component directives will make it easier to upgrade to Angular

  • Angular 2 is able of using older AngularJS components.



Reference

  • Developer Guide

https://docs.angularjs.org/guide

  • AngularJS API Docs

https://docs.angularjs.org/api

  • Error Reference

https://docs.angularjs.org/error


Guide to AngularJS

  • Official AngularJS Tutorial

https://docs.angularjs.org/tutorial/index - PhoneCat Tutorial App

  • AngularJS Seed

https://github.com/angular/angular-seed

  • Angular Style Guide

https://github.com/johnpapa/angular-styleguide



posted by 훈즈 플로거
2018.12.31 01:54 Programming/Angular

AngularJS

AngularJS
AngularJS logo.svg
개발자구글
발표일2010년 10월 20일 (8년 전)[1]
최근 버전1.6.6 / 2017년 8월 18일 (15달 전)[2]
개발 상태개발 중
프로그래밍 언어자바스크립트
플랫폼크로스 플랫폼
크기144 KB (운영용)
1 MB (개발용)
종류자바스크립트싱글 페이지 애플리케이션 프레임워크
라이선스MIT 라이선스
웹사이트angularjs.org


AngularJS("Angular.js" 또는 "AngularJS 1.X")는 자바스크립트 기반의 오픈 소스 프론트엔드 웹 애플리케이션 프레임워크의 하나로, 싱글 페이지 애플리케이션 개발 중에 마주치는 여러 문제들을 해결하기 위해 개발되었으며 주로 구글과 개별 커뮤니티, 여러 회사에 의해 유지보수되고 있다. 자바스크립트 구성 요소들은 크로스 플랫폼 모바일 앱을 개발하기 위해 사용되는 프레임워크인 아파치 코도바를 보완한다. 리치 인터넷 애플리케이션에 공통적으로 사용되는 구성 요소들과 더불어 클라이언트 사이드의 모델-뷰-컨트롤러(MVC)와 모델-뷰-뷰모델(MVVM) 구조를 위한 프레임워크를 제공함으로써 이러한 애플리케이션들의 개발 및 테스트를 단순화하는 것이 목적이다. 2014년에 오리지널 AngularJS 팀은 Angular 플랫폼에 대한 작업에 착수하였다.

 - 참고 위키백과


AngularJS extends HTML with new attributes.

AngularJS is perfect for Single Page Applications (SPAs).

AngularJS is easy to learn.

- 참고 w3school


The Basics


  1. <!doctype html>
  2. <html ng-app>
  3. <head>
  4. <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.5/angular.min.js"></script>
  5. </head>
  6. <body>
  7. <div>
  8. <label>Name:</label>
  9. <input type="text" ng-model="yourName" placeholder="Enter a name here">
  10. <hr>
  11. <h1>Hello {{yourName}}!</h1>
  12. </div>
  13. </body>
  14. </html>

출처 - angularjs.com


아래 동영상은 JQuery 와 Angularjs 에 대해 기본적인 차이를 잘 보여준다.

  • JQuery vs Angularjs

https://youtu.be/uFTFsKmkQnQ



  • Add Some Control

Data Binding

Controller

Plain JavaScript


  1. <!doctype html>
  2. <html ng-app="todoApp">
  3. <head>
  4. <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.5/angular.min.js"></script>
  5. <script src="todo.js"></script>
  6. <link rel="stylesheet" href="todo.css">
  7. </head>
  8. <body>
  9. <h2>Todo</h2>
  10. <div ng-controller="TodoListController as todoList">
  11. <span>{{todoList.remaining()}} of {{todoList.todos.length}} remaining</span>
  12. [ <a href="" ng-click="todoList.archive()">archive</a> ]
  13. <ul class="unstyled">
  14. <li ng-repeat="todo in todoList.todos">
  15. <label class="checkbox">
  16. <input type="checkbox" ng-model="todo.done">
  17. <span class="done-{{todo.done}}">{{todo.text}}</span>
  18. </label>
  19. </li>
  20. </ul>
  21. <form ng-submit="todoList.addTodo()">
  22. <input type="text" ng-model="todoList.todoText" size="30"
  23. placeholder="add new todo here">
  24. <input class="btn-primary" type="submit" value="add">
  25. </form>
  26. </div>
  27. </body>
  28. </html>


  1. angular.module('todoApp', [])
  2. .controller('TodoListController', function() {
  3. var todoList = this;
  4. todoList.todos = [
  5. {text:'learn AngularJS', done:true},
  6. {text:'build an AngularJS app', done:false}];
  7.  
  8. todoList.addTodo = function() {
  9. todoList.todos.push({text:todoList.todoText, done:false});
  10. todoList.todoText = '';
  11. };
  12.  
  13. todoList.remaining = function() {
  14. var count = 0;
  15. angular.forEach(todoList.todos, function(todo) {
  16. count += todo.done ? 0 : 1;
  17. });
  18. return count;
  19. };
  20.  
  21. todoList.archive = function() {
  22. var oldTodos = todoList.todos;
  23. todoList.todos = [];
  24. angular.forEach(oldTodos, function(todo) {
  25. if (!todo.done) todoList.todos.push(todo);
  26. });
  27. };
  28. });

출처 - angularjs.com

https://youtu.be/WuiHuZq_cg4





posted by 훈즈 플로거
prev 1 next