Download - AngularJS at AIESEC Academy '15

Transcript

@

DESPRE NOI

DESPRE NOI

BOGDAN COCHIOR

DESPRE NOI

IULIAN GIOADĂ

DESPRE VOI

DESPRE VOI

DESPRE VOI

AGENDA

S1

• INTRODUCERE IN ANGULARJS

• CE APLICATIE VOM FACE?

• PREGATIREA MEDIULUI DE LUCRU (environment setup)

• DIRECTIVE (CORE)

AGENDA

S2 CONTROLERE (controllers)

AGENDA

S3

• RUTAREA (routing)

• DESPRE REST (REpresentational State Transfer)

• SERVICII (http services and custom services)

AGENDA

S4 BIBLIOTECI EXTERNE (third party)

INTRODUCERE IN

A JS FRAMEWORK

A JS LIBRARY?

CONCEPTS

oficial

CONCEPTS

personal

CONCEPTS

Cand?

Cum?

CORE FEATURES

CORE FEATURES - DI

DESIGN PATTERN

DESIGN PATTERN - MVC

PRO

Single Page Application

Data binding capability to HTML

Unit testable

Dependency injection and make use of separation of concerns

Reusable components (directives)

Less code and get more functionality

Views = pure html pages;

Controllers = business logic

CON

Not Secure

Not degradable

APLICATIA

Basic To Do List

SPECIFICATII

1. Lista de taskuri

2. Adaugare de taskuri

3. Editare a taskurilor

4. Stergere a taskurilor

5. Marcarea taskurilor drept completate

SETUP

ANGULAR

Metode de instalare

- Download - https://angularjs.org/

- Bower/NPM

- Yeoman

BOOTSTRAP

Metode de instalare

- Download - http://getbootstrap.com/getting-started

- Bower

CORE DIRECTIVEs

CORE DIRECTIVES

ng-app

ng-model

ng-bind

ng-app

ng-model

ng-bind

CORE DIRECTIVES

ng-controller

ng-repeat

ng-click

ng-show/hide/class/href/src

CORE DIRECTIVES

ng-controller

ng-repeat

ng-click

ng-show/hide/class/href

CORE DIRECTIVES

ng-if ng-change ng-checked ng-disabled ng-init ng-change ng-dblclick ng-form ng-blur

ng-focus ng-include ng-mousedown ng-mouseup ng-mousenter ng-options ng-

readonly ng-style ng-submit etc.

CORE DIRECTIVES

CONTROLLERS

CONTROLLERS

• The business logic that controls the app

• Data-provider for our views

• The business logic that controls the app

• Data-provider for our views

CONTROLLERS

DIRTY CHECKING, WATCH LIST si DIGEST LOOP

{{a+b}}oldValuenewValuefunction

ROUTING

ROUTING

SPA?

ROUTING

ROUTING

ROUTING

REST

Representational State Transfer

REST este un tip de architectura ce exploateaza tehnologiile si protocoalele Web existente, inclusiv HTTP

REST

WHY REST?

GET

PUT

HEAD OPTIONS

DELETE

POST PATCH

REST VERBS

SERVICES

SERVICES

• singletons that carry out specific tasks

• lazy instantiated (only when you need them)

SERVICES interaction

Provides inter- and cross-communication across scopes, services, filters, and other AngularJS artifacts.

Just because a service encapsulates state does not mean you can persist the state there (do a refresh)

• $scope

• $rootScope

• $location

• $http / $resource

SERVICES - familiar till now

• SERVICE

• FACTORY

• PROVIDER

SERVICES

$http service

$http request object

$httpBackend service

$httpBackend.whenGET(/^\/tasks\?limit=\d+&offset=\d+/).respond(fetchTasks); $httpBackend.whenGET(/^\/tasks\/\d+/).respond(fetchTask);

$httpBackend.whenPUT(/^\/tasks\/\d+\/done/).respond(completeTask);

$httpBackend.whenPUT(/^\/tasks\/\d+/).respond(updateTask);

$httpBackend.whenPATCH(/^\/tasks\/\d+/).respond(updateTask);

$httpBackend.whenDELETE(/^\/tasks\/\d+/).respond(deleteTask);

$httpBackend.whenPOST(/^\/tasks/).respond(addTask);

$httpBackend.whenGET(/.*/).passThrough();

THIRD-PARTY

Useful resources

• Pluralsight

• Egghead.io

• ngBook

• AngularJS TDD development

• codeschool / tutorialspoint