Ng-init

Ng-init
Software Engeneering @ ISSATSo
Member @ ISSATSo Google Club
JSA @ JCertif TN
@Hmidi Hamdi

Must Know
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

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.

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
Browser loads up
entire webpage.
Browser loads up
entire webpage.
Traditional Page-Refresh
:

WebServer
URL Request to server
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

• 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 ?

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 Dependencies
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

var app = angular.module('store', [ ]);
//Our First Controller
app.controller('StoreController', function
($scope){
});
<div ng-controller="StoreController">

</div>
Our First Controller :

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:

• 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

<Thank You!>
hmidihamdi7@gmail.com
/+ HamdiHmidiigcien
/hamdi.igc

Ng-init

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Viewers also liked

Viewers also liked (20)

Similar to Ng-init

Similar to Ng-init (20)

More from Hamdi Hmidi

More from Hamdi Hmidi (13)

Recently uploaded

Recently uploaded (20)

Ng-init