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/

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"
 }

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

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

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:

• Bower - client-side code package manager

• Http-Server - simple local static web server

• Karma - unit test runner

• Protractor - end-to-end (E2E) test runner

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

Directives

[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

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.

AngularJS

AngularJS

개발자	구글
발표일	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

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