View
264
Download
2
Category
Preview:
Citation preview
Topics• What to expect from the talk• Why JavaScript is relevant?• Before diving in to AngularJS• What is AngularJS• Core concepts of AngularJS• When to use AngularJS• What next• Demo
What to expect from this talk?
Why JS is relevant ? • JavaScript is around since 1995• Considered to be “second class” • Ajax• jQuery,underscore• Modern browsers • Better JS engines
Before diving in to AngularJS • JavaScript(of course !!!)• Model View Controller pattern• Why MVC ?• Server side MVC• Client side MVC
• SPA – Single Page Application• Framework vs Library
What is AngularJS• Client-side framework• Developed and maintained by Google.• Provides client side MVC capabilities.• Philosophy• Declarative code is better than imperative • Testing in equal importance to app writing• Decouple client side from server side
• Ideal for SPA
Modules• Divides web application into small,reusable components• Controllers,Filters,Directives etc can be declared inside a module• You can package code as reusable modules• Modules can be loaded in any order• Unit tests only have to load relevant modules
ModulesCREATING AN ANGULAR JS MODULE
<script type="text/javascript">angular.module('myApp',[]);angular.module('myApp',
['dependentModule1','dependentModule2']);</script>
USING ANGULAR JS MODULE<html ng-app="myApp">
<head>...</head><body>…</body>
</html
Data Binding
Data Binding in Classical Template Systems Data Binding in Angular Templates
Dependency Injection• Design pattern• DI is omnipresent in AngularJS
Dependency Injection
AngularJS Controllers
• Where your business logic lives• Layer between UI and data store• ng-controller• Decoupled from the view• Re-instantiated on every new call• Add behaviour to $scope
AngularJS Controllers
CODE SNIPPETvar myModule=angular.module(“exampleModule”,[])myModule.controller(“exampleController”,[“$scope”,function($scope){
$scope.message=“Angular is awesome”}]);
HTML<div ng-controller="DoubleController">Two times <input ng-model="num"> equals {{ double(num) }}</div>
Controller Fiddle
AngularJS $scope• Connects controller and view• $rootScope• Example Fiddle
AngularJS $scopeHTML
<div ng-controller="MyController"> Your name: <input type="text" ng-model="username"> <button ng-click='sayHello()'>greet</button> <hr> {{greeting}}</div>
SCRIPTangular.module('scopeExample', []) .controller('MyController', ['$scope', function($scope) { $scope.username = 'World';
$scope.sayHello = function() { $scope.greeting = 'Hello ' + $scope.username + '!'; }; }]);
AngularJS Service• Stateless objects that contains useful function • Can be called from controllers,filters,directives etc• Singleton• Injectable by DI• Reusable components
AngularJS Service• Lazy instantiated• Services provided by Angular
• $http - For ajax requests• $interval and $timeout - Repeats and delays• $rootScope - very top scope of application• $location - URL and its parts of current site• $window - Wrapper of global window. Useful for tests• Example
AngularJS Filters• A filter formats the value of an expression for display to the user
CODE SNIPPETmyApp.filter('capitalize', function () { return function (s) { if (!s || !angular.isString(s)) { return s; } return s.charAt(0).toUpperCase() + s.substring(1); };});
AngularJS Filters• Functions which modify expressions• But does not alter the original data• Angular JS provides few of its own filters
• currency,lowercase,date,number,filter,orderBy,uppercase etc
• Example
AngularJS Directives• Angular’s way to teach html new tricks• Lives in the view • Built in Directives ng-app, ng-controller, ng-repeat, ng-model etc • Directive names, ngModel or ng-model• Example
AngularJS DirectivesJAVASCRIPT
myApp.directive('boldClick', function() { return function(scope, element) { var bold = false; element.click(function() { if (bold) { element.css('font-weight', 'normal'); } else { element.css('font-weight', 'bold'); } bold = !bold; }); };});
HTML<div>
My pet is a <span bold-click>tortoise</span>.</div>
https://docs.angularjs.org/api/ng/directive
When to use AngularJS• CRUD Application• SPA• API First
When not to use AngularJS• Games• GUI Editors• Applications with intensive and tricky DOM manipulation• Non SPA applications
What next• Path from novice to ninja• Learn JavaScript http://eloquentjavascript.net/• Read https://docs.angularjs.org/guide• Do https://docs.angularjs.org/tutorial• Refer https://egghead.io/
What next• Angular2.0• Tools• http://yeoman.io/ - Scaffolding and build tool• batarang - Debug tool
Thank you !!!
Recommended