![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>](https://image.slidesharecdn.com/introductiontoangularjs-150517192425-lva1-app6891/85/Introduction-to-AngularJS-11-320.jpg)
![Custom Directive
DEMO
app.js
var 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>](https://image.slidesharecdn.com/introductiontoangularjs-150517192425-lva1-app6891/85/Introduction-to-AngularJS-14-320.jpg)
![Custom Service
app.js
var 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}];
}
})](https://image.slidesharecdn.com/introductiontoangularjs-150517192425-lva1-app6891/85/Introduction-to-AngularJS-15-320.jpg)
![Calling REST Service
DEMO
app.js
var 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);
}
}](https://image.slidesharecdn.com/introductiontoangularjs-150517192425-lva1-app6891/85/Introduction-to-AngularJS-16-320.jpg)
Introduction to AngularJS
- 1. Introduction to AngularJS PRESENTED BY SUBBA TANNIRU TECH LEAD, CONSUMER MARKETS
- 2. 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
- 3. 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
- 4. Introduction - Problem As we add more & more Javascript, our application is getting: Hard to Understand Hard to Test Hard to Maintain
- 5. 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
- 6. 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
- 7. Features 2 Way data binding MVC Framework Dependency Injection Services Templates Routing End to End Testing
- 8. Getting Started – Hello World ! Tools • Web Server • Text Editor Steps • Load Angular • Declare ng-app
- 9. 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>
- 10. Building Blocks Module Controller Directive Filter Config Route Service Factory Provider Value
- 11. 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>
- 12. 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
- 13. Templates – ng-include DEMO content.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>
- 14. Custom Directive DEMO app.js var 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>
- 15. Custom Service app.js var 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}]; } })
- 16. Calling REST Service DEMO app.js var 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); } }