Post on 08-Aug-2015
Introduction to AngularJSPRESENTED BY
SUBBA TANNIRU
TECH LEAD, CONSUMER MARKETS
AgendaIntroduction
Basic Concepts
Features
Getting Started/Demo
Modules, Controllers, Directives, Filters/Demo
Templates, Custom Directives/Demo
Service Calls, $http, Custom Service /Demo
Useful Resources/Questions
Introduction – Modern WebFrom Web Pages to Web Applications
Traditional Applications to Single Page Application(SPA)
More and more logic is pushed to the client
Responsive Design
Mobile First Development
Introduction - ProblemAs we add more & more Javascript, our application is
getting:
Hard to Understand
Hard to Test
Hard to Maintain
Introduction- Birth of Angular
• Started as side project by Miško Hevery & Adam Abrons in 2009
• Google feedback project
GWT
17000 loc3 developers
6 months
Angular
1500 loc1 developer
3 weeks
Basic Concepts – What is Angular?HTML enhanced for Web Apps
Declarative Programming
MVC Framework
Brings Best Practices from server side to client side
Open Source (MIT License)
Works on all modern browsers(IE9 and above)
Full featured SPA framework
Can be combined with JQuery & other libraries
Features2 Way data binding
MVC Framework
Dependency Injection
Services
Templates
Routing
End to End Testing
Getting Started – Hello World !
Tools
• Web Server• Text Editor
Steps
• Load Angular• Declare ng-app
Getting Started – Hello World !
DEMOcontent.html<head>
<title>Welcome to Angular</title><script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
</head><body ng-app>
<h1>{{"Hello "+"World !"}}</h1></body>
Building Blocks
Module
Controller
Directive Filter Config
Route
Service
Factory
Provider
Value
Building Blocks – Module, Controller
app.jsvar app=angular.module('MyApp',[]);app.controller("MyCtrl",function($scope){
$scope.quantity=5;$scope.price=10;
}
content.html<body ng-app="MyApp">
<div ng-controller="MyCtrl"><input type="number" ng-model="quantity"><input type="number" ng-model="price"><span ng-bind="quantity*price|currency"></span>
</div></div>
Building Blocks – Built in Directives & Filters
DEMO
Bu
ilt
In
Dir
ect
ives• ng-app
• ng-model• ng-repeat• ng-switch• ng-show• ng-hide• ng-include• ng-click• ng-form• ng-submit
Bu
ilt
in F
ilte
rs
• filter• date• number• currency• lowercase• uppercase• limitTo• orderBy
Templates – ng-include
DEMOcontent.html<body ng-app="MyApp">
<div ng-controller="MyCtrl"><div ng-include="'header.html'"></div><div>This is Main Section</div><div>This is Footer</div>
</div></body>
header.html<div>
<strong>This is Header Template. Welcome {{user}}</strong></div>
Custom Directive
DEMO
app.jsvar app=angular.module('MyApp',[]);app.directive('footer',function(){
return{templateUrl:'footer.html'
}});
content.html<body ng-app="MyApp"><div ng-controller="MyCtrl" class="container">
<div ng-include="'header.html'"></div><div ng-include="mainsection"></div><footer></footer>
</div></body>
footer.html<div><strong>This is Footer Template.</strong></div>
Custom Serviceapp.jsvar app=angular.module('MyApp',[]);app.controller("MyCtrl",function($scope,customerServiceSimple){
$scope.user="Subba";$scope.mainsection='main.html';$scope.customers= customerServiceSimple.get();
}app.service('customerServiceSimple',function(){
this.get=function(){return [{firstName:"John",lastName:"Smith",
age:25},
{firstName:"Harry",lastName:"Potter", age:16},
{firstName:"James",lastName:"Bond", age:40},
{firstName:"Subba",lastName:"Tanniru", age:20}];}
})
Calling REST Service
DEMO
app.jsvar app=angular.module('MyApp',[]);app.controller("MyCtrl",function($scope,customerService){
$scope.user="Subba";$scope.mainsection='main.html';getCustomers();function getCustomers(){
customerService.get().success(function(data,status){
$scope.customers=data.customers;})
}});
app.service('customerService',function($http,$log){var getUrl="http://localhost/angularjs/customers.json";this.get=function(){
return $http.get(getUrl);}
}
Questions/Resourceshttps://docs.angularjs.org/tutorial
https://egghead.io/technologies/angularjs
http://youtube.com
https://www.safaribooksonline.com/
http://jsfiddle.net/
THANK YOU