Introduction to AngularJS

Introduction to
AngularJS
PRESENTED BY
SUBBA TANNIRU
TECH LEAD, CONSUMER MARKETS

Agenda
Introduction
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 Web
From 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 - Problem
As 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 loc
3 developers
6 months
Angular
1500 loc
1 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

Features
2 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 !
DEMO
content.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.js
var 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
BuiltInDirectives
• ng-app
• ng-model
• ng-repeat
• ng-switch
• ng-show
• ng-hide
• ng-include
• ng-click
• ng-form
• ng-submit
BuiltinFilters
• filter
• date
• number
• currency
• lowercase
• uppercase
• limitTo
• orderBy

Templates – ng-include
DEMO
content.html
<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.js
app.directive('footer',function(){
return{
templateUrl:'footer.html'
}
});
content.html
<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 Service
app.js
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.js
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/Resources
https://docs.angularjs.org/tutorial
https://egghead.io/technologies/angularjs
http://youtube.com
https://www.safaribooksonline.com/
http://jsfiddle.net/

Introduction to AngularJS

Recommended

Recommended

More Related Content

What's hot

What's hot (19)

Viewers also liked

Viewers also liked (20)

Similar to Introduction to AngularJS

Similar to Introduction to AngularJS (20)

Recently uploaded

Recently uploaded (20)

Introduction to AngularJS