angularjs for beginners - 90% discount coupon (

AngularJS for beginners

Course Objectives

❏ “Know” the history behind AngularJS❏ “Learn” the various concepts of AngularJS❏ “Understand” how AngularJS actually works❏ “Try” it out (AngularJS hands-on lab)

Who should take this course?● No prior knowledge of HTML or Javascript required● Passion to learn AngularJS from scratch● Want to learn how to setup AngularJS development

environment● Try hands-on lab to reinforce the course learnings

What is needed for this course

OR

&&

1 1/2 Hrs of your time!

About the instructor❖ My name is Arun Arunachalam❖ 20 years of experience working for leading companies in

North America ❖ Have been involved in Java and Java script technologies

since 1999.❖ Sun Java certified professional❖ Excellent public speaking skills❖ Love technology and its impact on the society❖ A very passionate teacher!

Course Curriculum❖ Course Prerequisite (HTML and Java Script)❖ AngularJS from scratch

➢ AngularJS-Background➢ AngularJS-BootStrapping & Browser Event Loop➢ AngularJS-Important concepts➢ AngularJS-Inside the black box

❖ Hands-on LAB➢ AngularJS setup➢ Building a Weather Application

❖ Summary & Next Steps

Course PrerequisiteIntro to HTML & Javascript

8

Potato Guy

Browser Guy Java

Script Monkey

ServerGuy

Meet the important characters of the web!

Potato Guy - Wants to go to google.com

9

Potato Guy - he gets to google.com

10

What’s behind the pretty page?

11

12

Potato Guy

Browser Guy

Java Script Monkey

ServerRobot

Potato Guy wants to go to google.com

1

2

34

5

B L A C K - B O X

6

13

Potato Guy

Browser Guy

Java Script Monkey

ServerGuy

Opening the so called “Black Box”..

1 - Request2 - Request to server

3 - HTML

4 - Translate

5 - Help

Black B

ox

6 - Human language

Human Language The World of HTML and Javascript

How does HTML and Java Script look?<!DOCTYPE html><html>

<head><h1>Welcome to Arun's web site</h1>

</head><body>

<p>This is what the potato guy asked for</p><p id="demo"></p>

</body><script>document.getElementById("demo").innerHTML = "I am java script and I am behind this trick";</script> </html>

Browser Guy & Javascript Monkey

15

<!DOCTYPE html><html>

<head><h1>Welcome to Arun's web

site</h1></head><body>

<p>This is what the potato guy asked for</p>

<p id="demo"></p></body>

<script>document.getElementById("demo").innerHTML = "I am java script and I am behind this trick";</script> </html>

HTML - DOM

As I go thru the HTML document, if I see a <script> tag then I will let my trusted friend JS Monkey to know about it

I am glad to help. Thanks for giving me access to the document elements so that I can do my job!

Next step in the journey!

16

Our course “AngularJS for beginners” is going to focus on the Browser Guy and the JS Monkey with a focus on how AngularJS framework brings out the best in them.

Buckle up and get ready for the exciting journey!

HTML - DOM

AngularJS - Background

Story behind AngularJSWho created AngularJS?AngularJS was created, as a side project, in 2009 by two developers, Misko Hevery and Adam Abrons

Why its called AngularJS? As per Hevery: “HTML has angle brackets, so angle brackets, Angular…..”

<angular/>

Why should we care about AngularJS?

What is AngularJS?

★ 100% client side technology stack ★ 100% javascript based framework★ Speaks the same language as HTML

AngularJS - Good & BadWhat’s good:● Single Page Apps (SPA)● Form based CURD applications

What’s bad:● Not meant for Gaming apps● SEO optimizations● Google analytics (especially with SPA/Single URL)

AngularJS Bootstrapping &Browser Event Loop

Understanding DOM - Sample HTML

<!DOCTYPE html><html ng-app="AngularAppName">


</head><body>


</body></html>

DOM building

Browser



</head><body>


</body></html>

html (ng-app=”AngularAppName”)

head body

h1 p p=”demo”

Building of the Document Object Model

AngularJS - Bootstrapping!DOM Tree(Document Object Model)

Angular initializes automatically upon DOMContentLoadedbrowser event

Angular looks for the ng-app directive which designates your application root.

Browser

ServerRequests for information

Builds DOM Tree

HTML & JAVA SCRIPT



</head><body>



</html>

AngularJS - Browser event loop

Actor access browser

Browser

Java Script Engine listens to the event

Invokes

Browser publishes event

Delegatesto AngularJS

ManipulatesDOM elements

AngularJS - Important Concepts

Root application

Purpose:● named as part of the ng-app

built in directive● Entry point to AngularJS● Triggers the init of global

scope● There is one ng-app directive

per html document● Manual bootstrapping allows

more than on ng-app directive

Main entry point into the world ofAngularJS



</head><body>



</html>

View

Purpose:Views are HTML artifacts enriched by various Angular directives and the markup used for data binding.

It can be a whole HTML document or a HTML fragment called “partial”.

Is what you see on the page

<form><label for="cityName">Enter the City Name</label><input id="cityName" placeholder="City Name" ng-model="cityName"

required><button ng-click="getWeatherInfo(cityName)">Get Weather</button>

</form>

DirectivePurpose:● Directives are markers on a

DOM element which attach a special behavior to it.

● Directives can be built-in or we can write custom ones.

Directive

Teach “HTML” new tricks

DOM Tree(Document Object Model)

<div myweatherappdirective></div><button ng-click="goHomePage()">go to home page</button>

angular.module('myWeatherApp') .directive('myweatherappdirective', function() { return { //Points to the URL that loads a snipet of appropriate view templateUrl: 'directive.html' };});

ControllerPurpose:● Serve as an entry-point into

your front-end business logic

● Initialize the scope with the models that is used on the pages/views

● Uses Services/Factories to retrieve or update model information

Big Helper and co-ordinator

angular.module('myWeatherApp').controller('ResultController',function($scope,weatherService,$http,$routeParams){

//Setting up the scope attribute $scope.cityName = $routeParams.cityName;

//Calling a service component to get the data to be displayedweatherService.async($scope.cityName).then(function(resultdata) {

$scope.results = resultdata; }); });

Scope

● Can “$watch” for model changes

● Propagate model changes into views via “$apply” (outside angular realm)

Model(properties)

Behavior(change properties)

Its the glue between View and Controller...

Purpose:angular.module('myWeatherApp'). controller('HomeController', function($scope,$location, $rootScope) { //Scope attributes $scope.applicationname = 'Weather Report using AngularJS'; $scope.cityName = 'Los Angeles'; //default city value //Scope behavior $scope.getWeatherInfo = function(cityName){ $location.path('/showresult/'+cityName); }; })

Router

Purpose:● Its like a traffic cop in an

intersection

● Determines the next view and controller to be invoked

Traffic cop to tell where to go next...

myAppModule.config(['$routeProvider', function($routeProvider) { //The default home route is pointing to home.html and uses mycontroller $routeProvider. when('/', { templateUrl: 'home.html' }).

when('/showresult/:cityName', { templateUrl: 'result.html', controller: 'ResultController' }) }]);

ServicePurpose:● In Angular a service is a

function or an object and is used to share data and/or behavior across controllers, directives, filters, other services etc.

● A service is treated as a singleton, that is there is only one instance of a specific service available during the whole lifetime of the Angular application.

Reusable - Data and Behavior

app.service('weatherService', function($http){ return { async: function(cityName) { //$http.get will make the actual web service call return $http.get('http://api.openweathermap.org/data/2.5/weather?q='+cityName+',usa') //JSON response come back as an async response .then(function(response) {

if (typeof response.data === 'object') { return response.data; } else { // invalid response return response.error; }

}, function(response) { // something went wrong return response.error; });

} };});

FilterPurpose:● In Angular, filter is a specific

term for a function that takes an input value and returns a formatted and/or filtered output value

● There are built in filters that are available OOB

● Custom filters can be built as well

{{ lastName | uppercase }}smith SMITH

Dependency Injection?Dependency Injection (DI) is a software design pattern that deals with how components get hold of their dependencies.

The Angular injector subsystem is in charge of creating components, resolving their dependencies, and providing them to other components as requested.

Injector

Component - A

Component - B

Component-A depends on Component-B

Dependency - Option #1: Own it

Component - A Component - B


Hard Wired or Hard Coded ========> Not being flexible

GLOBAL SCOPE

Dependency - Option #2: Refer it



Hard Wired or Hard Coded ========> Not being flexible

Dependency - Option #3: Magic!



Injector

Freedom and Flexibility!!... that’s what dependency injection provides for us.

angular.module('myWeatherApp'). controller('HomeController', function($scope,$location, $rootScope) { $scope.applicationname = 'Weather Report using AngularJS'; $scope.cityName = 'Los Angeles'; //default city value $scope.getWeatherInfo = function(cityName){ $location.path('/showresult/'+cityName); }; })

Inside the black box of AngularJS

AngularJS - closer look

Java Script Engine

AngularJS - closer look

Browser

ExtSys

Router Controller

Service

View Directive

Scope

Hands-on LAB

AngularJS Setup

What do I need to run AngularJS?

1. AngularJS java script files (from Google CDN)

2. A simple Web Server to host the application

AngularJS java script files

AngularJS java script files (from Google CDN):● <script src="https://ajax.googleapis.

com/ajax/libs/angularjs/1.3.13/angular.js"></script>● <script src="https://ajax.googleapis.

com/ajax/libs/angularjs/1.3.13/angular-route.js"></script>

A simple web server(node-http-server)

Node based Http Server called node-http-server is recommended for this course

Download and install node-http-server

● Click & Dowload Node.js at nodejs.org official site. This will install Node.js and npm (node package manager). PS: Its a good idea to create a new folder called nodetest before we go to the next step

● Once downloaded then install the http-server using the following command:npm install http-server -g (g is for global scope) under a folder named ‘nodetest’

Write a server config script (server.js)

var server = require(‘node-http-server’);server.deploy( {

port:8000,root:’.’

});

Write a simple index.html file for test

<html>Hello World!

</html>Make sure this index.html file is saved at the root folder (nodetest folder) where we started the node-http-sever!

Start the node-http-server

Use the following command to run the node-http-server in the nodetest folder:

Node server.js > serverlog.log &

>serverlog.log is the logfile& is to indicate for this to run in background mode

Testing time!

Go to the browser and type:

http://localhost:8000

Do you see Hello World!. If so you are done! Congratulations on the successful setup of node-http-server.



Weather Application

Application & Code Components Walk Thru

Home Page View of the application

Weather Report - Results page

Template layout (index.html)

Header Information

Java Script Includes

Swappable View (ng-view)

Project File Layoutnodetest

angularproject

node_modules

node-http-server

● app.js● controller.js● service.js● directive.js

● index.html● home.html● result.html● directive.html

serverlog.logserver.js

Views

Index.html (template)

Header Information

Java Script Includes

Swappable View (home.html,result.html) directive.html

AngularJS main file: app.js● Perform a “Bootstrap” function● Create a new module at the app level ('myapp')● Specify the router dependency (['ngRoute'])● Configure the the router using routerProvider to

point to the right view and controller

controllers.js

● Associated with the ‘myapp’ module● Setting the model attributes within Scope● Setting behavior within Scope● Call Service module to get weather data form an

external source

directive.js

● Associated with the ‘myapp’ module● Custom made/Built in Directive’s● Used as a way to inject certain HTML snippets into

the view construct

service.js

● Make a call to the “openweathermap” API and get the weather report using a JSON REST interface.

● $http object is injected into service code to make the web service call.

How the “Weather Application” actually works?

Home Page: http://localhost:8000

HomeController

home.html

index.html

routeProvider

Results Page: Weather Report ResultWeather

WS

result.html

directive.html

routeProvider

ResultController

weatherService

Summary

What we learned in this course❖ Learned about the basics of HTML and JavaScript❖ Gained a good understanding of AngularJS background❖ Mastered the basic concepts that drive AngularJS❖ “Opened the black box” of AngularJS❖ Hands-on LAB (reinforce the knowledge from above)

➢ Were able to setup AngularJS in your machine➢ Built an actual Weather application using AngularJS

Next Steps

What’s next?❖ If you really like AngularJS and are interested in knowing

some advanced concepts including➢ AngularJS animation➢ Promise in AngularJS➢ Various design patterns that are used in AngularJS➢ AngularJS best practices

Study Tuned, Phase II of this course will cover the above exciting topics!

angularjs for beginners - 90% discount coupon (

Internet