ng-init
TRANSCRIPT
Ng-init
Software Engeneering @ ISSATSoMember @ ISSATSo Google ClubJSA @ JCertif TN
@Hmidi Hamdi
Must Know
HTML & CSSJavaScript Basics JSON NotationJS Functions REST API
Downloading the Libraries
Download AngularJS http://angularjs.org/We’ll need angular.min.jsDownload 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.
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 ?
WebServer Web Browser
URL Request to server
Response with webPages & Assets
User Clicks on link, new Request
Response with webPages & Assets
Browser loads upentire webpage.
Browser loads upentire 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 upentire webpage.
Data is loaded intoexisting 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 ?
<!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 ?
2 way DataBinding
Directives, Filters and DataBinding
A Directive is a way to teach HTML new Tricks.
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 :
Modules , 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
var app = angular.module('store', [ ] );
The Angular Core Module
Our AppName DependenciesModules that our appDepends on
<html ng-app=‘’store’’>
Our First Module
• Controllers are where we define our app’s behavior by defining functions and values.
Controllers
var app = angular.module('store', [ ]);//Our First Controllerapp.controller('StoreController', function($scope){
});
<div ng-controller="StoreController"><!-- HTML Tags Here --></div>
Our First Controller :
Dependecies 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 :
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 :
App.controller(‘MyContr’,function($scope,$http){$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:
Routing
• The ngRoute module provides routing and 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
CodeSchool : Shaping up with AngularJS
EggHead.Io : https://egghead.io
w3School : http://www.w3schools.com/angular/
More Tutorials
