ANGULAR JS SOFTWARE ENGINEERING FOR WEB SERVICES HASAN FAIZAL K APRIL,2014

Size: px

Start display at page:

Download "ANGULAR JS SOFTWARE ENGINEERING FOR WEB SERVICES HASAN FAIZAL K APRIL,2014"

Basil Peters
8 years ago
Views:

1 ANGULAR JS SOFTWARE ENGINEERING FOR WEB SERVICES HASAN FAIZAL K APRIL,2014

2 What is Angular Js? Open Source JavaScript framework for dynamic web apps. Developed in 2009 by Miško Hevery and Adam Abrons. Maintained by Google. AcDvely developed and supported

3 Why Use It? Problem: HTML works well with the StaDc Pages but it has no tool for web applicadons. SoluDon: To extend and use HTML vocabulary with some addidonal declaradons that can be used for developing web applicadons. Also AngularJS implements the Model View Controller (MVC). Single Page ApplicaDon (SPA)

4 Model View Controller (MVC) It is a SoPware PaQern for User Interface. Model is just the data behind the applicadon. View is the graphical representadon of the Model presented to the User. User is who interacts with the things on the screen and this interacdon in turn change the model through the controller. Controller reacts to the User interacdon with the set of logics present in it and send commands to the Model and View to update its state based on the interacdon.

5 MVC in Angular Model data in MVC represents the objects created in the JS. View is the Document Object Model Itself or the Objects that HTML creates in your browser. Controller is simply the classes of Java Script.

6 Two Way Data Binding View is updated automadcally when there is a change in Model. Similarly, Model is also updated when there is a change in View. No DOM manipuladon boilerplate is needed.

7 Illustration of Two Way Data Binding

8 AngularJS - Core Features DirecDves, Filters and Data Binding. View, Controllers and Scope Modules, Routes and Factories.

9 Directives, Filters and Data Binding

10 What are Directives? They teach HTML new tricks!

11 Using Directives and Data Binding Syntax: <!DOCTYPE html> <html ng- app> <head> <Dtle>AngularJs Tutorial</Dtle> </head> <body> Direc&ve </br> Direc&ve Data Binding Expression Name:<input type="text" ng- model="name"/> {{name}} <script src= "hqps://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.min.js"> </script>

12 Iterating with the ng-repeat Directive <!DOCTYPE html> <html ng- app> <head> <Dtle>AngularJs Tutorial</Dtle> </head> <body data- ng- init="names=['jhon','hasan','prashanth']"> Name: <br/> <input type="text" ng- model="name"/> {{name}} <br/> <ul> </ul> <li data- ng- repeat="personname in names">{{personname}}</li>

13 Using Filters <!DOCTYPE html> <html ng- app> <head> <&tle>angularjs Tutorial</&tle> </head> <body data- ng- init="customers=[{name:'jhon Smith',city:'Bielefeld'}, {name:'jhon Paul',city:'Detmold'}, {name:'daniel',city:'hamburg'}']"> Name: <br/> <input type="text" ng- model="name"/> <ul> <li data- ng- repeat="cust in customers filter:name">{{cust.name}} - {{cust.city}}</li> </ul> <script src="hvps://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.min.js"> </script> </body> <html>

14 View, Controller and Scope VIEW $SCOPE CONTROLLER Scope (View Model) is the binding between a Controller and a View

15 Creating View and Controller <!DOCTYPE html> <html ng- app> <head> </head> <br/> <ul> ul> </script> <&tle>angularjs Tutorial</&tle> <body > <div data- ng- controller="simple Controller"> Name: <input type="text" ng- model="name"/> <li data- ng- repeat="cust in customers filter:name">{{cust.name}} - {{cust.city}}</li></ <script src="hvps://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.min.js">

16 Creating View and Controller <script> func&on SimpleController($scope){ $scope.customers = [{name: 'Jhon Smith', city: 'Bielefeld'}, {name:'jhon Paul', city:'detmold'}, {name:'daniel',city:'hamburg'} ]; } <html> </body>

17 Modules, Routes and Factories

18 Modules are Containers <html ng- app= modulename > Module Config Routes Filters and Factory Service Provider Value Controller

19 Crea2ng Modules with Controllers Var demoapp = angular.module( demoapp,[ ]) Define a Controller Dependency Injector demoapp.controller( simplecontroller,funcdon( $scope){ $scope.customers=[ ]; });

20 Using Factories and Services Var demoapp = angular.module( demoapp,[ ]).factory( simplefactory, funcdon(){ var factory ={}: var customers = [ ]; factory.getcustomers = funcdon(){ return customers; }; return factory; });

21 Using Factories and Services.controller( SimpleController, funcdon ($scope, simplefactory) { }); $scope.customers = simplefactory.getcustomers(); Factory Injected into Controller at run&me

22 Summary AngularJS provides a robust SPA framework for building robust client- centric applicadon.

23 References: hqps://angularjs.org hqps://docs.angularjs.org hqp://en.wikipedia.org/wiki/angularjs Thank You!!!

Online Multimedia Winter semester 2015/16

Multimedia im Netz Online Multimedia Winter semester 2015/16 Tutorial 12 Major Subject Ludwig-Maximilians-Universität München Online Multimedia WS 2015/16 - Tutorial 12-1 Today s Agenda Imperative vs.