Get satrted angular js

WorkShopGetting Start With

ANGULAR2015, Alexandre Marreiros

Powered BY

2015AlexandreMarreiros

About YouPresent Yourself

Tell us what brings you here

What you want to take

WorkShopr Getting Start W

ithANGULAR

What’s your Story?Startatsv.com


AboutCTO @ 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 Platform

MCPD

Alexandre Marreiros

Contacts:[email protected] / [email protected]@alexmarreiroshttp://www.linkedin.com/pub/alexandre-marreiros/8/4b8/a21www.digitalmindignition.com


ithANGULAR

mailto:[email protected]


http://www.linkedin.com/pub/alexandre-marreiros/8/4b8/a21

http://www.linkedin.com/pub/alexandre-marreiros/8/4b8/a21

http://www.digitalmindignition.com/

Fundamentals



ithANGULAR


Agenda WorkShopr Getting Start W

ithANGULARFundamental Angular Blocks:

Expressions

Directives

Scopes

Agenda



ithANGULAR



ithANGULAR

# 1 State of the Web Development

#2 What’s Angular JS

#3 Building Blocks

#4 Controllers and Modules

#5 Directives and Views



ithANGULAR

#6 Services

#7 Routing

#8 Comunication With Events

State Of the Art



ithANGULAR



ithANGULAR

Vca.au.net



ithANGULAR

Introduction



ithANGULAR



ithANGULAR



ithANGULAR

JavaScript Challenge

Cross Browsing

Help on Responsive BehaviourHelp With Async

Ritch Client InterfaceData Exploring on clientOperating System Native Action



ithANGULAR

JavaScript Story

Not Type SafeBased on a Old StandardFunctional based

Written in 2 WeeksUncopled from modern WebExpensive learning curve

Big Investement



ithANGULAR

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”



ithANGULAR

Angular atual HeadQuarter

Angularjs.org



ithANGULAR

Angular Future

Angular.io

Start Engines



ithANGULAR

Start Engines WorkShopr Getting Start W

ithANGULAR

<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

* Ng is the short name for angular, this directive tell that this area is controlled by Angular

First Demos



ithANGULAR


Binding Boxes WorkShopr Getting Start W

ithANGULAR


Math example WorkShopr Getting Start W

ithANGULAR


Helho World WorkShopr Getting Start W

ithANGULAR


ShowCase WorkShopr Getting Start W

ithANGULAR

To Watch a ShowCase

Of APPS Made With Angular


Plunker is made with AngularJS WorkShopr Getting Start W

ithANGULAR

Our example live editor to build our demos are also build with Angular

Development Enviroment



ithANGULAR

Angular Usage Benefits



ithANGULAR


Deveopment time reduction WorkShopr Getting Start W

ithANGULAR

Pluralsight.com


Code Reduction and reusage WorkShopr Getting Start W

ithANGULAR

Pluralsight.com

80% to 90%


Data Binding WorkShopr Getting Start W

ithANGULAR

Pluralsight.com

Forms (validation and save)One Way BindingTwo Way Binding

Optimized Support out of the box


Includes all the major features of webapps


ithANGULAR


Support for accebility W

orkShopr Getting Start With

ANGULAR

Using the directive ng-area to develop future on the workshop


Strong communitie and PopularW


ANGULAR


Unit Tests ReadyW


ANGULAR

JavaScriptPatterns & Pratices



ithANGULAR


JavaScript Patterns WorkShopr Getting Start W

ithANGULAR

Functions and AbstrationsFunctions to build ModulesFunctions as variablesFunctions as modelation methodsAbstract Functions

Pattern Demos



ithANGULAR

SPA



ithANGULAR



ithANGULARSingle 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



ithANGULAR

SPA

Controllers



ithANGULAR



ithANGULAR

MVC



ithANGULAR

MVM



ithANGULAR

Controllers

Controller directive in HTML (ng-controller)

Controller will be a function that Angular invokes

Controller takes a $scope parameter

Attach model to $scope



ithANGULAR

Controllers



ithANGULAR

Controllers

$scope:

“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.”

http://en.wikipedia.org/wiki/Single_Source_of_Truth



ithANGULAR

Controllers

Multiple controllers

Complex objects

Nest controllers

Directives



ithANGULAR



ithANGULAR

Directives

“Directives are the heart and soul of Angular.”

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



ithANGULAR

Directives



ithANGULAR

Directives

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

Directives

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

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

Demo / ExercisesTraining Angular



ithANGULAR

Experiment Directives on your ownShowing common bugsShowing api documentation problemsShow the different discussed Javascript patterns aplied in Angular development

WrapUP



ithANGULAR



ithANGULAR

Feel free to put your Questions nowOr if you prefer use one off my contacts

@[email protected]@innovagency.com 2015

AlexandreMarreiros


ithANGULAR

Questions



Get satrted angular js

Technology

Transcript of Get satrted angular js