Introduction to angular js
Upcoming SlideShare
Loading in...5

Introduction to angular js






Total Views
Views on SlideShare
Embed Views



3 Embeds 16 11 3 2



Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
Post Comment
Edit your comment

Introduction to angular js Introduction to angular js Presentation Transcript

  • INTRODUCTION TOHTML enhanced for web apps!by /Marco Vito Moscaritolo @mavimo
  • <!-- DIRECTIVE: NG-MAVIMO -->{ { name } }-> Marco Vito Moscaritolo{ { role } }-> Developer{ { company | link } }->{ { twitter | link } }->Agavee@mavimo
  • HEADS UPStarting from template......adding controllers......and filters......using routing......manage resources......and fun :)
  • TEMPLATES (DIRECTIVES)Directives are a way to teach HTML new tricks. During DOMcompilation directives are matched against the HTML andexecuted. This allows directives to register behavior, ortransform the DOM.The directives can be placed in element names, attributes,class names, as well as comments.<span ng-repeat="exp"></span><span class="ng-repeat: exp;"></span><ng-repeat></ng-repeat><!-- directive: ng-repeat exp -->
  • <!doctype html><html ng-app><head><script src="</head><body><div><input type="text" ng-model="sample" placeholder="Enter text"><hr><h1>!</h1></div></body></html>
  • Write here...
  • <!doctype html><html ng-app><head><script src="js/angular.min.js" ></script><script src="js/demo.js" ></script></head><body><ul ng-controller="getGdgList"><li ng-repeat="gdg in gdgs"> have members</li></ul></body></html>
  • GDG Milan have 92 membersGDG Barcelona have 228 membersGDG Silicon Valley have 171 membersGDG Stockholm have 119 membersGDG Herzeliya have 140 membersGDG Ahmedabad have 78 membersGDG Lagos have 115 membersGDG Bangalore have 109 membersGDG Lima have 175 membersGDG L-Ab have 77 members
  • AND ALSOng-showng-switchng-class...
  • CONTROLLERS<!doctype html><html ng-app><head><script src="js/angular.min.js" ></script><script src="js/demo.js" ></script></head><body><ul ng-controller="getTweets"><li ng-repeat="tweet in tweets"></li></ul></body></html>
  • function getTweets($scope, $http) {var search = gdg;var url = + search;$http({ method: GET, url: url }).success(function(data, status, headers, config) {$scope.tweets = data.results;}).error(function(data, status, headers, config) {console.log(Error: fetch tweets);$scope.tweets = {};});return $scope;}
  • METHODS IN CONTROLLERfunction getTweets($scope, $http) {// ...$scope.getMore = function () {// ...}// ...return $scope;}]);<ul ng-controller="getTweets"><li ng-repeat="tweet in tweets"></li><li ng-click="getMore()">Get more</li></ul>
  • CONTROLLER IN MODULEvar gdgApp = angular.module(gdgApp, []);gdgApp.controller(getTweets, [$scope, $http, function($scope, $http) {var search = gdg;var url = + search;$http({ method: GET, url: url }).success(function(data, status, headers, config) {$scope.tweets = data.results;}).error(function(data, status, headers, config) {console.log(Error: fetch tweets);$scope.tweets = {};});return $scope;}]);
  • DEPENDENCY INJECTIONDependency Injection (DI) is a software design pattern thatdeals with how code gets hold of its dependencies.
  • SERVICESAngular services are singletons that carry out specific tasks.Eg. $http service that provides low level access to thebrowsers XMLHttpRequest object.
  • gdgApp.controller(getTweets, [$scope, $http, function($scope, $http) {// ...return $scope;}]);angular.module(gdgModuleAlarm, []).factory(alarm, function($window) {return {alarm: function(text) {$window.alert(text);}};});
  • INJECTORS// New injector created from the previus declared module.var injector = angular.injector([gdgModuleAlarm, ng]);// Request any dependency from the injectorvar a = injector.get(alarm);// We can also force injecting usingvar alarmFactory = function (my$window) {};alarmFactory.$inject = [$window];
  • FILTERSFilters perform data transformation.They follow the spirit of UNIX filters and use similar syntax |(pipe).
  • <!doctype html><html ng-app><head><script src="js/angular.min.js" ></script><script src="js/demo.js" ></script></head><body><a href="" ng-click="predicate = members; reverse=!reverse"<Sort</a><ul ng-controller="getGdgList"><li ng-repeat="gdg in gdgs | orderBy:predicate:reverse "> have members</ul></body></html>
  • GDG MILAN have 92 membersGDG BARCELONA have 228 membersGDG SILICON VALLEY have 171 membersGDG STOCKHOLM have 119 membersGDG HERZELIYA have 140 membersGDG AHMEDABAD have 78 membersGDG LAGOS have 115 membersGDG BANGALORE have 109 membersGDG LIMA have 175 membersGDG L-AB have 77 membersSort
  • CREATING CUSTOM FILTERSangular.module(agaveeApp, []).filter(orderByVersion, function() {return function(modules, version) {var parseVersionString = function (str) { /* .. */ };var vMinMet = function(vmin, vcurrent) { /* .. */ };var result = [];for (var i = 0; i < modules.length; i++) {if (vMinMet(modules[i].version_added, version)) {result[result.length] = modules[i];}}return result;};});
  • MODELThe model is the data which is mergedwith the template to produce the view.
  • <!doctype html><html ng-app><head><script src="</head><body><div><input type="text" ng-model="sample" placeholder="Enter text"><hr><h1>!</h1></div></body></html>
  • CONFIGURATIONangular.module(gdgApp, []).constant(gdg, {url : http://localhost:3000,token: e9adf82fd1cb716548ef1d4621a5935dcf869817})// Configure $http.config([$httpProvider, gdg,function ($httpProvider, gdg) {$httpProvider.defaults.headers.common[X-gdg-API-Key] = gdg.token;}]);
  • ROUTINGangular.module(gdgApp, [])// Configure services.config([$routeProvider, function ($routeProvider) {$routeProvider.when(/projects, {templateUrl: views/projects.html,controller: ProjectsCtrl});$routeProvider.when(/projects/:project, {templateUrl: views/project.html,controller: ProjectCtrl});$routeProvider.otherwise({redirectTo: /projects});}]);
  • RESOURCEangular.module(resources.project, [ngResource]).factory(Project, [$http, $resource, gdg, function ($http, gdg) {return $resource(gdg.url + /project/:projectId, {projectId:@id}, {query : { method : GET, isArray:true},create : { method : POST },save : { method : PUT },delete : { method : DELETE }});}]);// ...var p = new Project(); = GDG Milan;p.$save();
  • angular.module(resources.project, [ngResource]).factory(Project, [$http, gdg, function ($http, gdg) {var Project = function (data) {angular.extend(this, data);};// a static method to retrieve Project by IDProject.get = function (id) {return $http.get(gdg.url + /projects/ + id).then(function (response)return new Project(;});};// an instance method to create a new ProjectProject.prototype.create = function () {var project = this;return $ + /projects.json, project).then(function ( =;return project;});};// an instance method to pudate create a new ProjectProject.prototype.update = function () {var project = this;return $http.put(gdg.url + /projects/ + + .json, projectreturn project;});};
  • TESTINGKarma - a test runner that fits all our needs.Jasmine - Jasmine is a behavior-driven developmentframework for testing JavaScript code.
  • describe(Controller: getGdgList, function () {// load the controllers modulebeforeEach(module(gdgApp));var getGdgList, scope;// Initialize the controller and a mock scopebeforeEach(inject(function ($controller) {scope = {};getGdgList = $controller(getGdgList, {$scope: scope});}));it(GDG List must display defined number of items, function () {expect(scope.gdgs.length).toBe(10);});it(GDG item must have members up to 0, function () {angular.forEach(scope.gdgs,function (key, gdg) {expect(gdg.members).toBeGreaterThan(0);}});it(GDG item must have name and members, function () {angular.forEach(scope.gdgs,function (key, gdg) {expect(;expect(gdg.members).toBeDefined();
  • ?Questions time