AngularJS - HTML as it should be

Lightning talk about AngularJS given at @PottJS using @SlideCaptain

Transcript

1. AngularJS - HTML as it should be @gjungb - #PottJS Bochum 25.4.2013
2. Agenda press Esc
3. What is AngularJS? AngularJS is a JavaScript framework for building web applications with HTML, JavaScript and CSS. It offers powerful data-binding, dependency injection, guidelines for structuring your app and other useful goodies to make your webapp testable and maintainable. AngularJS - Google+ AngularJS is a client-side JavaScript framework that lets you extend HTML vocabulary for your application. The resulting environment is extraordinarily expressive, readable, and quick to develop. AngularJS - YouTube
4. Who makes it and where do I find it? Recommended for the beginning: "Video Tutorial: AngularJS Fundamentals in 60-ish Minutes" by Dan Whalin • Development is lead by Google • It's under the MIT license • Website: http://angularjs.org/ • Code: https://github.com/angular • Docs: http://docs.angularjs.org • Google+: https://plus.google.com/+AngularJS/ • Google Groups: https://groups.google.com/forum/#!forum/angular • YouTube: http://www.youtube.com/user/angularjs • Built with AngularJS: http://builtwith.angularjs.org/
5. Why should I use it? • Achieve more with less code • Modularity • Extensibility • Testability • Popularity
6. The main building blocks • Modules • Expressions • Directives • Model / View / ViewModel • Services • Filters
7. Modules Why? Bootstrap an application with a main module. Bundle directives, controllers, services and filters together into reusable modules. var app = angular.module('myApp', ['ui']); /** * Configuration */ app.config(); /** * Values */ app.value(); /** * Constants */ app.constant(); /** * Initialization */
8. Expressions Why? Evaluate and display JavaScript-like code snippets <!-- Display numbers --> {{6 * 7}} <!-- Display a user name (user is defined in the current $scope) --> {{user.name}} <!-- Display a number with two decimals (using a filter) --> {{6 * 9.80665 | number:2}}
9. Directives Why? Teach HTML new tricks <!-- Display a list of pages --> <ul> <li ng-repeat="page in pages" ng-click="selectPage(page)"> {{page.headline}} - {{page.paragraphs.length}} </li> </ul> <!-- Display a custom panel --> <div sc-panel data-name="p1" data-headline="My Panel"> <!-- custom content --> </div> <!-- Bind a model to a form field --> <form> <input type="text" ng-model="user.name.first" required /> Hello {{user.name.first}} </form>
10. Writing your own directive How? Create a "Directive Definition Object" angular.module('myApp').directive('scPanel', ['PanelService', function(PanelService) { return { templateUrl : '/partials/panel.html', restrict : 'A', replace : true, transclude : true, scope : { name : '@', headline : '@' }, controller : function($scope, $element, $attrs) { /** * Closes the panel */ function closePanel() { $scope.panel.hidePanel(); } /** * Expose */
11. Model / View / ViewModel Why? Separate applications into distinct presentation, data, and logic components • Model objects are plain JavaScript objects • View templates are plain HTML with directives and expressions • Model and View are bound together via a $scope • Changes is the model are automatically applied to the view • The controller changes the model, but never, ever does DOM manipulation
12. Services Why? Reusable singletons that carry out specific tasks • Dependency injection makes services available to components requiring them • Examples for built in services: • $http - interaction with backend servers • $resource - REST simplified • $route - deep-linking URLs to controllers and views • Examples for custom services • external APIs • local storage • WebSockets
13. Writing your own service How? Use the factory() method of your module /** * Service to interact with the user related REST API */ angular.module('myApp').factory('UserService', ['$http', 'UserFactory', function($http, UserFactory) { // Service logic /** * Reads the currently logged in user * @param {Object} options - additional options * @param {Function} callback - the callback to be invoked */ function readUser(options, callback) { var url; url = '/session/user?rnd=' + Math.random() * 1e12; // perform GET
14. // perform GET $http.get(url, { cache : false }).success(function(data, status, headers, config) { callback(null, UserFactory.createUser(data)); }).error(function(data, status, headers, config) { callback(status); }); } /** * Updates the currently logged in user * @param {User} user - the user to be updated * @param {Object} options - additional options * @param {Function} callback - the callback to be invoked */ function updateUser(user, options, callback) { var url, data; url = '/session/user?rnd=' + Math.random() * 1e12; data = { name : user.name, email : user.email }; // perform POST $http.post(url, data).success(function(data, status, headers, config) { callback(null, UserFactory.createUser(data)); }).error(function(data, status, headers, config) { callback(status); }); } // Public API here return { readUser : readUser, Filters Why? Formatting data displayed to the user <!-- Display the users birthday --> <p> Hello {{user.name.first}}, you were born {{user.dob | date:'short'}} </p> <!-- Display a sorted list of pages --> <ul> <li ng-repeat="page in pages | orderBy:'createdDate'"> {{page.headline}} </li> </ul> <!-- Display a subset of users --> <ul> <li ng-repeat="user in users | limitTo:5"> {{user.name.first}} </li> </ul>
15. Tools of the trade • check out AngularJS • check out Yeoman • check out Bower • check out Grunt • check out AngularUI • check out Batarang
16. Ask questions, please! ???
17. Thank you! Dr. Gerd Jungbluth, Engawa, Wuppertal @gjungb This presentation was built with SlideCaptain.