Quick View of Angular JS for High School

Nome do Documento / Cliente / 1 de maio de 2023 / 11Nome do Documento / Cliente / 1 de maio de 2023

2015

WorkShop Getting Start With AngularAlexandre 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 YOUPresent Yourself

Tell us what brings you here

What you want to take

What’s your Story?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:[email protected] / [email protected]@alexmarreiroshttp://www.linkedin.com/pub/alexandre-marreiros/8/4b8/a21www.digitalmindignition.com

mailto:[email protected]


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



http://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




AngularWritten 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

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

To Watch a ShowCase

Of APPS Made With

Angular




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 BindingTwo 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 PopularStrong communitie and Popular




Unit Tests ReadyStrong communitie and Popular



JAVASCRIPT PATTERNS & PRATICES




JavaScript Patterns

Functions and AbstrationsFunctions to build ModulesFunctions as variablesFunctions as modelation methodsAbstract 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




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:

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




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/

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

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



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 servicePost 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 / EXERCISESTRAINING ANGULAR

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



WRAPUP




Questions

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

contacts@[email protected]@innovagency.comwww.digitalmindignition.com



http://www.digitalmindignition.com/

Technology

Quick View of Angular JS for High School