Quick View of Angular JS for High School

Nome do Documento / Cliente / 04.03.16 / 11Nome do Documento / Cliente / 04.03.16
2015
WorkShop Getting Start With Angular
Alexandre Marreiros

Este documento é propriedade intelectual de Innovagency, não podendo ser alterado ou usado para outro fim, a não ser o previamente acordado, sem autorização da mesma.
WorkShop – Getting Start With Angular
ABOUT YOU
Present Yourself
Tell us what brings you here
What you want to take
Startatsv.com

ABOUT
• CTO @ Innovagency
• Technical Trainer, Speaker & Consultant as Self Employee
• Lecturer @ EDIT
• Software Developer & Architect as Consultant
• Tech Writer and Reviewer as Self Employee
• Digital Technical UX Consultant
• Microsoft DevCamp Trainer
• Microsoft Most Valuable Professional for Windows Platfor
• MCPD
Alexandre Marreiros
Contacts:
amarreiros@innovagency.com / amarreiros@gmail.com
@alexmarreiros
http://www.linkedin.com/pub/alexandre-
marreiros/8/4b8/a21
www.digitalmindignition.com

FUNDAMENTALS

Agenda
Fundamental Angular Blocks:
Expressions
Directives
Scopes

AGENDA

Agenda
# 1 State of the Web Development
#2 What’s Angular JS
#3 Building Blocks
#4 Controllers and Modules
#5 Directives and Views

Agenda
#6 Services
#7 Routing
#8 Comunication With Events

STATE OF THE ART

INTRODUCTION

JavaScript Challenge
Cross Browsing
Help on Responsive Behaviour
Help With Async
Ritch Client Interface
Data Exploring on client
Operating System Native Action

JavaScript Challenge
Not Type Safe
Based on a Old Standard
Functional based
Written in 2 Weeks
Uncopled from modern Web
Expensive learning curve
Big Investement

Angular
Written by Misko Hevery
“With the intent to extend HTML Acording to standards
and good pratices. Allow tohave ritch components
that help reach data and have data driven event handling”

Angular atual HeadQuarter
Angularjs.org

Angular Future
Angular.io

START ENGINES

Start Engines
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.1/angular.js">
</script>
<body ng-app>

</body>
Include Angular on Project
Define Angular Boundaries
* There are no dependicies to other script files all the Angular Core is here

FIRST DEMOS

Binding Boxes

ShowCase

Plunker is made with AngularJS
Our example live editor to build our demos are also build with Angular

DEVELOPMENT ENVIROMENT

ANGULAR
USAGE BENEFITS

Development time reduction

Code Reduction and Reusage
80% to 90%

Data Binding
Forms (validation and save)
One Way Binding
Two Way Binding
Optimized
Support out of the box

Includes all the major features of webapps

Support for accebility
Using the directive ng-area to develop
future on the workshop

Strong Communitie and Popular
Strong communitie and Popular

Unit Tests Ready
Strong communitie and Popular

JAVASCRIPT
PATTERNS & PRATICES

JavaScript Patterns
Functions and Abstrations
Functions to build Modules
Functions as variables
Functions as modelation methods
Abstract Functions

PATTERN DEMOS

Single Page APP
“Why do we want to write single page apps?
The main reason is that they allow us to
offer a more-native-app-like experience to
the user.” From SinglePageAppBook

SPA

CONTROLLERS

MVC

MVM

Controllers
Controller directive in HTML (ng-controller)
Controller will be a function that Angular invokes
Controller takes a $scope parameter
Attach model to $scope

Controllers

Controllers
“Scopes provide a single source of truth within your
application. The idea is that no matter in how many places
you display some data in your view layer, you should only
have to change it in one place (a scope property), and the
change should automatically propagate throughout the
view.”
$scope:

Controllers
Multiple controllers
Complex objects
Nest controllers

DIRECTIVES

Directives
“Directives are the heart and soul of Angular.”
https://docs.angularjs.org/guide/directive

Directives

Directives
http://www.cheatography.com/proloser/cheat-sheets
/angularjs/

CONSUMING WEBAPis
JASON BASED

http service
Services consumption is made using a promise approach, in the case off
the http, we have a method representing each verb. We have also a
response explaining if the http call had been succeeded or not.
Next we will analysis the 2 fundamental verbs post and get

http service
$http.get('/someUrl'). success(function(data, status,
headers, config) {
// tis callback will be called asynchronously
// when the response is available
}). error(function(data, status, headers, config) {
// called asynchronously if an error occurs
// or server returns response with an error status.
});
Get method

http service
Post method
$http.post('/someUrl‘,{msg:’hi there’}).
success(function(data, status, headers, config) {
// this callback will be called asynchronously
// when the response is available
}). error(function(data, status, headers, config) {
// called asynchronously if an error occurs
// or server returns response with an error status.
});

Demo
Create a SPA that consumes GitHub page

DEMO / EXERCISES
TRAINING ANGULAR
Experiment Directives on your own
Showing common bugs
Showing api documentation problems
Show the different discussed Javascript patterns aplied in Angular development

WRAPUP

Questions
Feel free to put your Questions now
Or if you prefer use one off my contacts @alexmarreiros
amarreiros@gmail.com
amarreiros@innovagency.com
www.digitalmindignition.com

Quick View of Angular JS for High School

Mais conteúdo relacionado

Destaque

Semelhante a Quick View of Angular JS for High School

Mais de Alexandre Marreiros

Quick View of Angular JS for High School