6. If youโre using JavaScript to create a dynamic webApps,
Angular is a good choice.
โข Angular helps you organize your JavaScript
โข Angular helps create responsive (as in fast) websites.
โข Angular is easy to test
โข Flexible filters
Why AngularJS ?
7. WebServer Web Browser
URL Request to server
Response with webPages & Assets
User Clicks on link, new Request
Response with webPages & Assets
Browser loads up
entire webpage.
Browser loads up
entire webpage.
Traditional Page-Refresh
:
8. WebServer
URL Request to server
Response with webPages & Assets
User Clicks on link, new Request
Response with JSON Data
Browser loads up
entire webpage.
Data is loaded into
existing page.
Responsive Website using Angular :
Web Browser
10. โข A client-side JavaScript Framework for adding
interactivity to HTML.
โข Open Source <3.
โข Devlopped By Google :p .
โข Used to build SPA Applications.
โข Based on the MVC pattern.
So ! What is Angular ?
18. โข Where we write pieces of our Angular application.
โข Makes our code more maintainable, testable, and
readable.
โข Where we define dependencies for our app.
Modules
19. var app = angular.module('store', [ ] );
The Angular
Core Module
Our AppName Dependencies
Modules that our app
Depends on
<html ng-app=โโstoreโโ>
Our First Module
20. โข Controllers are where we define our appโs
behavior by defining functions and values.
Controllers
21. var app = angular.module('store', [ ]);
//Our First Controller
app.controller('StoreController', function
($scope){
});
<div ng-controller="StoreController">
<!-- HTML Tags Here -->
</div>
Our First Controller :
24. Services give your Controller additional
functionality, like ...
โข Fetching JSON data from a web service with
$http
โข Logging messages to the JavaScript console with
$log
โข Filtering an array with $filter
Services :
25. The $http Service is how we make an async request to a
server ...
โข By using $http as a function with an options object:
$http({ method: 'GET', url: '/products.json' });
โข Or using one of the shortcut methods:
$http.get('/products.json', { apiKey: 'myApiKey' });
โข Both return a Promise object with .success() and .error()
โข If we tell $http to fetch JSON, the result will be
automatically decoded into JavaScript objects and arrays.
Introducing $http Service :
