AngularJS for beginners - 90% DISCOUNT COUPON (
-
Upload
arun-arunachalam -
Category
Internet
-
view
62 -
download
0
Transcript of AngularJS for beginners - 90% DISCOUNT COUPON (
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
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
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
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/>
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)
Understanding DOM - Sample HTML
<!DOCTYPE html><html ng-app="AngularAppName">
<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></html>
DOM building
Browser
<!DOCTYPE html><html ng-app="AngularAppName">
<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></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
<!DOCTYPE html><html ng-app="AngularAppName">
<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>
</html>
AngularJS - Browser event loop
Actor access browser
Browser
Java Script Engine listens to the event
Invokes
Browser publishes event
Delegatesto AngularJS
ManipulatesDOM elements
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
<!DOCTYPE html><html ng-app="AngularAppName">
<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>
</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
Component-A depends on Component-B
Hard Wired or Hard Coded ========> Not being flexible
GLOBAL SCOPE
Dependency - Option #2: Refer it
Component - A Component - B
Component-A depends on Component-B
Hard Wired or Hard Coded ========> Not being flexible
Dependency - Option #3: Magic!
Component - A Component - B
Component-A depends on Component-B
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); }; })
Java Script Engine
AngularJS - closer look
Browser
ExtSys
Router Controller
Service
View Directive
Scope
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.
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.
Results Page: Weather Report ResultWeather
WS
result.html
directive.html
routeProvider
ResultController
weatherService
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
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!