Introduction to AngularJS
Upcoming SlideShare
Loading in...5
×
 

Introduction to AngularJS

on

  • 817 views

 

Statistics

Views

Total Views
817
Views on SlideShare
817
Embed Views
0

Actions

Likes
1
Downloads
17
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

CC Attribution-NonCommercial-ShareAlike LicenseCC Attribution-NonCommercial-ShareAlike LicenseCC Attribution-NonCommercial-ShareAlike License

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

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

Introduction to AngularJS Introduction to AngularJS Presentation Transcript

  • Introduction to HTML enhanced for web apps! by Marco Vito Moscaritolo / @mavimo
  • <!-­-­ directive: ng-­mavimo -­-­> { { me.name } } -> Marco Vito Moscaritolo { { me.role } } -> Developer { { me.company.name | link } } -> Agavee { { me.twitter | link } } -> @mavimo
  • What's AngularJS AngularJS is a toolset for building the framework most suited to your application development.
  • Heads Up Starting from directives... ...adding controllers... ...and filters... ...using routing... ...manage resources... ...and fun :)
  • Directives Directives are a way to teach HTML new tricks. During DOM compilation directives are matched against the HTML and executed. This allows directives to register behavior, or transform the DOM. <span ng-repeat="exp"></span> <span class="ng-repeat: exp;"></span> <ng-repeat></ng-repeat> <!-- directive: ng-repeat exp --> The directives can be placed in element names, attributes, class names, as well as comments.
  • <!doctype html> <html ng-app> <head> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.6/angular.min.js" </head> <body> <div> <input type="text" ng-model="sample" placeholder="Enter text"> <hr> <h1>{ { sample } }!</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">{ {gdg.name} } have { {gdg.members} } members </ul> </body> </html>
  • GDG Milan have 92 members GDG Barcelona have 228 members GDG Silicon Valley have 171 members GDG Stockholm have 119 members GDG Herzeliya have 140 members GDG Ahmedabad have 78 members GDG Lagos have 115 members GDG Bangalore have 109 members GDG Lima have 175 members GDG L-Ab have 77 members
  • and also ng-show ng-switch ng-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 = 'http://search.twitter.com/search.json?q=' + 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 controller function 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 module var gdgApp = angular.module('gdgApp', []); gdgApp.controller('getTweets', ['$scope', '$http', function($scope, $http) { var search = 'gdg'; var url = 'http://search.twitter.com/search.json?q=' + 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 Injection (also know as Inversion of Control) Dependency Injection (DI) is a software design pattern that deals with how code gets hold of its dependencies.
  • Services Angular services are singletons that carry out specific tasks. Eg. $http service that provides low level access to the browser's 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 injector var a = injector.get('alarm'); // We can also force injecting using var alarmFactory = function (my$window) {}; alarmFactory.$inject = ['$window'];
  • Filters Filters 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>
  • Sort GDG MILAN have 92 members GDG BARCELONA have 228 members GDG SILICON VALLEY have 171 members GDG STOCKHOLM have 119 members GDG HERZELIYA have 140 members GDG AHMEDABAD have 78 members GDG LAGOS have 115 members GDG BANGALORE have 109 members GDG LIMA have 175 members GDG L-AB have 77 members
  • Creating custom filters angular.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; }; });
  • Model The model is the data which is merged with the template to produce the view.
  • <!doctype html> <html ng-app> <head> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.6/angular.min.js" </head> <body> <div> <input type="text" ng-model="sample" placeholder="Enter text"> <hr> <h1>!</h1> </div> </body> </html>
  • Configuration angular.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; } ]);
  • Routing angular.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'}); }]);
  • Resource angular.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(); p.name = '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 ID Project.get = function (id) { return $http.get(gdg.url + '/projects/' + id).then(function (response) { return new Project(response.data); }); }; // an instance method to create a new Project Project.prototype.create = function () { var project = this; return $http.post(gdg.url + '/projects.json', project).then(function (response) project.id = response.data.id;
  • Testing Karma - a test runner that fits all our needs. Jasmine - Jasmine is a behavior-driven development framework for testing JavaScript code.
  • describe('Controller: getGdgList', function () { // load the controller's module beforeEach(module('gdgApp')); var getGdgList, scope; // Initialize the controller and a mock scope beforeEach(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); });
  • Angular 1.2 ...is coming! More modular Introduce ng-animate (and related) Support to mobile (÷/-)
  • Demo
  • ? Questions time
  • THE END Marco Vito Moscaritolo / @mavimo