Ng-init
hamdimessi
396 views
34 slides
Apr 17, 2015
Slide 1 of 34
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
About This Presentation
Getting started to Angular JS Framwork By Google
Slide Content
Ng-init
Software Engeneering @ ISSATSo
Member @ ISSATSo Google Club
JSA @ JCertif TN
@Hmidi Hamdi
Software Engeneering @ ISSATSo
Member @ ISSATSo Google Club
JSA @ JCertif TN
@Hmidi Hamdi
Must Know
HTML & CSS
JavaScript Basics
JSON Notation
JS Functions
REST API
HTML & CSS
JavaScript Basics
JSON Notation
JS Functions
REST API
Downloading the
Libraries
Download AngularJS http://angularjs.org/
We’ll need angular.min.js
Download Twitter Bootstrap http://getbootstrap.com/
We’ll need bootstrap.min.css
Libraries
Download AngularJS http://angularjs.org/
We’ll need angular.min.js
Download Twitter Bootstrap http://getbootstrap.com/
We’ll need bootstrap.min.css
Agenda
1-Why Angular JS.
2- What is Angular JS.
3- Directives, Filters and DataBinding.
4-Modules , Controllers and Scope.
5- Dependecies and Services.
6- Routing.
1-Why Angular JS.
2- What is Angular JS.
3- Directives, Filters and DataBinding.
4-Modules , Controllers and Scope.
5- Dependecies and Services.
6- Routing.
Why Angular JS ?
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 ?
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 ?
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
:
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
:
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
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
What is AngularJS ?
• 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 ?
interactivity to HTML.
• Open Source <3.
• Devlopped By Google :p .
• Used to build SPA Applications.
• Based on the MVC pattern.
So ! What is Angular ?
<!doctype html>
<html>
<head ng-app >
<title>Exemple 1</title>
<SCRIPT TYPE="text/javascript" src="JS/angular.min.js">
</SCRIPT>
</head>
<body >
<input type="text" ng-model="name" >
<h1>Hello {{name}} </h1>
</body>
</html>
Hello User ?
<html>
<head ng-app >
<title>Exemple 1</title>
<SCRIPT TYPE="text/javascript" src="JS/angular.min.js">
</SCRIPT>
</head>
<body >
<input type="text" ng-model="name" >
<h1>Hello {{name}} </h1>
</body>
</html>
Hello User ?
2 way DataBinding
Directives,
Filters and
DataBinding
Filters and
DataBinding
A Directive is a way to teach HTML new Tricks.
Directives
Directives
<!doctype html>
<html>
<head ng-app >
<title>Exemple 1</title>
<SCRIPT TYPE="text/javascript" src="JS/angular.min.js">
</SCRIPT>
</head>
<body >
<input type="text" ng-model="name" >
<h1>Hello {{name}} </h1>
</body>
</html>
Example :
<html>
<head ng-app >
<title>Exemple 1</title>
<SCRIPT TYPE="text/javascript" src="JS/angular.min.js">
</SCRIPT>
</head>
<body >
<input type="text" ng-model="name" >
<h1>Hello {{name}} </h1>
</body>
</html>
Example :
Modules ,
Controllers
and Scope.
Controllers
and Scope.
• Where we write pieces of our Angular application.
• Makes our code more maintainable, testable, and
readable.
• Where we define dependencies for our app.
Modules
• Makes our code more maintainable, testable, and
readable.
• Where we define dependencies for our app.
Modules
var app = angular.module('store', [ ] );
The Angular
Core Module
Our AppNameDependencies
Modules that our app
Depends on
<html ng-app=‘’store’’>
Our First Module
The Angular
Core Module
Our AppNameDependencies
Modules that our app
Depends on
<html ng-app=‘’store’’>
Our First Module
•Controllers are where we define our app’s
behavior by defining functions and values.
Controllers
behavior by defining functions and values.
Controllers
var app = angular.module('store', [ ]);
//Our First Controller
app.controller('StoreController', function
($scope){
});
<div ng-controller="StoreController">
<!-- HTML Tags Here -->
</div>
Our First Controller :
//Our First Controller
app.controller('StoreController', function
($scope){
});
<div ng-controller="StoreController">
<!-- HTML Tags Here -->
</div>
Our First Controller :
Dependecies
and Services.
and Services.
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 :
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 :
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 :
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 :
App.controller(‘MyContr’,function($scope,$http){
$http.get('/products.json')
.success(function(data){
//data contains the result
});
});
Example :
$http.get('/products.json')
.success(function(data){
//data contains the result
});
});
Example :
Var app=angular.module(‘ClientMod’,[]);
app.factory(‘GetClients’,function($http){
return
{
getClientById: function(id){
Return $http.get(‘getCl.php?id=’+id);
};
}
});
Var app=angular.module(‘Main’,[‘ClientMod’]);
app.Controller(‘Main’,
function($scope,GetClients){
GetClients.getClientById(5)
.success(function(data){
$scope.Clients=data;
});
});
Dependencies:
app.factory(‘GetClients’,function($http){
return
{
getClientById: function(id){
Return $http.get(‘getCl.php?id=’+id);
};
}
});
Var app=angular.module(‘Main’,[‘ClientMod’]);
app.Controller(‘Main’,
function($scope,GetClients){
GetClients.getClientById(5)
.success(function(data){
$scope.Clients=data;
});
});
Dependencies:
Routing
•The ngRoute module provides routing and
deeplinking services and directives for angular
apps.
NgRoute
deeplinking services and directives for angular
apps.
NgRoute
https://igctodoapi.herokuapp.com
Our API
Route HTTP Verb Detail
/GetTodos GET Get All Todos
/GetTodo/:id GET Get Todo By ID
/DeleteTodo/:id DELETE Delete Todo By ID
/AddTodo POST Add New Todo
Our API
Route HTTP Verb Detail
/GetTodos GET Get All Todos
/GetTodo/:id GET Get Todo By ID
/DeleteTodo/:id DELETE Delete Todo By ID
/AddTodo POST Add New Todo
CodeSchool : Shaping up with AngularJS
EggHead.Io : https://egghead.io
w3School : http://www.w3schools.
com/angular/
More
Tutorials
EggHead.Io : https://egghead.io
w3School : http://www.w3schools.
com/angular/
More
Tutorials
Tags
Categories
GeneralDownload
Download Slideshow Get the original presentation fileQuick Actions
Statistics
- Views 396
- Slides 34
- Age 3882 days
Related Slideshows
22
Pray For The Peace Of Jerusalem and You Will Prosper
RodolfoMoralesMarcuc
32 views
26
Don_t_Waste_Your_Life_God.....powerpoint
chalobrido8
33 views
31
VILLASUR_FACTORS_TO_CONSIDER_IN_PLATING_SALAD_10-13.pdf
JaiJai148317
31 views
14
Fertility awareness methods for women in the society
Isaiah47
30 views
35
Chapter 5 Arithmetic Functions Computer Organisation and Architecture
RitikSharma297999
28 views
5
syakira bhasa inggris (1) (1).pptx.......
ourcommunity56
30 views