블로그 이미지
플로거
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 17:01 Programming/Angular

Angular Style Guide & Angular 2


The Angular 1 Style Guide.

The Angular 2 Style Guide.

https://angular.io

https://angular.io/docs/ts/latest/quickstart.html

https://angular.io/resources/live-examples/quickstart/ts/eplnkr.html

https://angular.io/docs/ts/latest/tutorial/

http://localhost:8080/index5.html


AngularJS Patterns: Clean Code

https://github.com/johnpapa/angular-styleguide/tree/master/a1

https://github.com/johnpapa/ng-demos

https://github.com/johnpapa/ng-demos/tree/master/modular

http://han41858.tistory.com/9

https://droidhere.com/02/angularjs-vs-angular-2-one-better/



posted by 훈즈 플로거

댓글을 달아 주세요

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 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: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 훈즈 플로거

댓글을 달아 주세요

prev 1 next