Download pdf - Ng init | EPI Sousse

Transcript
Page 1: Ng init | EPI Sousse
Page 2: Ng init | EPI Sousse

Must Know

Page 3: Ng init | EPI Sousse

Downloading the Libraries

Page 4: Ng init | EPI Sousse

Agenda

Page 5: Ng init | EPI Sousse

Why Angular JS ?

Page 6: Ng init | EPI Sousse

Page 7: Ng init | EPI Sousse
Page 8: Ng init | EPI Sousse
Page 9: Ng init | EPI Sousse

What is AngularJS ?

Page 10: Ng init | EPI Sousse

••••

Page 11: Ng init | EPI Sousse

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

Page 12: Ng init | EPI Sousse
Page 13: Ng init | EPI Sousse

Directives, Filters and DataBinding

Page 14: Ng init | EPI Sousse
Page 15: Ng init | EPI Sousse

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

Page 16: Ng init | EPI Sousse
Page 17: Ng init | EPI Sousse

Modules , Controllers and Scope.

Page 18: Ng init | EPI Sousse
Page 19: Ng init | EPI Sousse
Page 20: Ng init | EPI Sousse

Page 21: Ng init | EPI Sousse
Page 22: Ng init | EPI Sousse
Page 23: Ng init | EPI Sousse
Page 24: Ng init | EPI Sousse
Page 25: Ng init | EPI Sousse

Dependecies and Services.

Page 26: Ng init | EPI Sousse
Page 27: Ng init | EPI Sousse
Page 28: Ng init | EPI Sousse

var mainApp = angular.module("mainApp", []);mainApp.factory('MathService', function() { var factory = {}; factory.multiply = function(a, b) { return a * b } return factory;});

Page 29: Ng init | EPI Sousse

mainApp.service('CalcService', function(MathService){ this.square = function(a) { return MathService.multiply(a,a); }});

Page 30: Ng init | EPI Sousse

app.provider("message", [function () {

var text = null;

this.setText = function (textString) {

text = textString;

};

this.$get = function(){

return new Message();

}

}]);

angular.module("root", ["services"])

.config(["messageProvider", function (messageProvider) {

messageProvider.setText("Hello world!");

}]);

Page 31: Ng init | EPI Sousse
Page 32: Ng init | EPI Sousse
Page 33: Ng init | EPI Sousse
Page 34: Ng init | EPI Sousse
Page 35: Ng init | EPI Sousse

Routing

Page 36: Ng init | EPI Sousse

Page 37: Ng init | EPI Sousse

REST API : https://epitodoexample.herokuapp.com/

Page 39: Ng init | EPI Sousse

<Thank You!>[email protected]

/+ HamdiHmidiigcien

/hamdi.igc


Recommended