Taking the leap of faith into AngularJS

Talk about AngularJS, 101, introduction and best practices prepared for GDG Dev Fest Barcelona, 2013.

Transcript

1. Friday 11 October 13
2. Taking the leap of faith into AngularJS Patrick Heneise Friday 11 October 13
3. Who am I and why am I standing here? Friday 11 October 13
4. Patrick Heneise ‣ BSc Computer Science in Media ‣ MSc Media Technology ‣ Information Architect, Consultant ‣ JavaScript Enthusiast Friday 11 October 13
5. A short introduction Friday 11 October 13
6. ‣ Data Binding ‣ View-Controller Architecture ‣ Deep Linking ‣ Form Validation ‣ Directives ‣ Localization ‣ Injections ‣ Tests ‣ Validations AngularJS Features Friday 11 October 13
7. ∑(lots of cool stuff) Friday 11 October 13
8. Plain JavaScript Friday 11 October 13
9. Friday 11 October 13
10. docs.angularjs.org/ tutorial Friday 11 October 13
11. ‣ Templates ‣ Filters ‣ Data Binding ‣ Links & Images ‣ Routing ‣ Views ‣ Event Handlers ‣ Services ‣ Animations Friday 11 October 13
12. Friday 11 October 13
13. Congratulations! Friday 11 October 13
14. Friday 11 October 13
15. Friday 11 October 13
16. Friday 11 October 13
17. Setup Your App Friday 11 October 13
18. npm install -g generator-angular yo angular [app-name] Friday 11 October 13
19. Friday 11 October 13
20. . ├── Gruntfile.js ├── app │ ├── 404.html │ ├── favicon.ico │ ├── images │ │ ├── glyphicons-halflings-white.png │ │ └── glyphicons-halflings.png │ ├── index.html │ ├── robots.txt │ ├── scripts │ │ ├── app.js │ │ └── controllers │ │ └── main.js │ ├── styles │ │ └── main.scss │ └── views │ └── main.html ├── bower.json ├── karma-e2e.conf.js ├── karma.conf.js ├── package.json └── test ├── runner.html └── spec └── controllers └── main.js Friday 11 October 13
21. What now? Friday 11 October 13
22. Friday 11 October 13
23. Friday 11 October 13
24. Demo Project: The Cat API Friday 11 October 13
25. Friday 11 October 13
26. Friday 11 October 13
27. Introducing: The Junk API Friday 11 October 13
28. The Purpose Friday 11 October 13
29. Build a front-end for “The Junk API” Friday 11 October 13
30. Friday 11 October 13
31. Friday 11 October 13
32. Junkagular Friday 11 October 13
33. First Steps to a ‘real’ App ‣ Install: ‣ Angular-UI ‣ Angular-UI-Router ‣ Angular-UI-Bootstrap ‣ SASS Bootstrap 3 Friday 11 October 13
34. ‣ # bower install sass-bootstrap angular-ui-bootstrap3 angular-ui-router angular-ui --save Thanks, Bower Friday 11 October 13
35. Adjust the Routing Friday 11 October 13
36. .config(function($stateProvider, $urlRouterProvider) { $urlRouterProvider.otherwise('/junks'); $stateProvider .state('junks', { url: '/junks', templateUrl: 'views/junk/index.html', controller: 'JunkIndexCtrl' }) }) .run(['$state', function ($state) { $state.transitionTo('junks'); }]); Friday 11 October 13
37. ‣ A state corresponds to a "place" in the application ‣ A state describes what the UI looks like and does at that place. ‣ States often have things in common Friday 11 October 13
38. Friday 11 October 13
39. Services, Factories, Providers ... Friday 11 October 13
40. 1.Service 2.Factory 3.Provider Level of Abstraction Friday 11 October 13
41. myApp.service('helloWorldFromService', function() { this.sayHello = function() { return "Hello, World!" }; }); Service Friday 11 October 13
42. Factory myApp.factory('helloWorldFromFactory', function() { return { sayHello: function() { return "Hello, World!" } }; }); http://jsfiddle.net/pkozlowski_opensource/PxdSP/14/ Friday 11 October 13
43. Friday 11 October 13
44. So, what do we need it for? Friday 11 October 13
45. api.js angular.module('Junkagular', []) & .factory('$api', function ($http) { & & var apiRoot = 'http://127.0.0.1/api/', & & & apiTimeout = 30000, & & & api = { & & & & config: { & & & & & apiRoot: apiRoot & & & & }, & & & & junk: {} & & & }; Friday 11 October 13
46. api.junk.index = function (callback) { $http.defaults.headers.common.apikey = '123'; $http.get(apiRoot + 'junks', { headers: {'Content-Type': 'application/json'} }).then(function (response) { callback(null, response.data); }); }; Friday 11 October 13
47. Reusability $api.junk.index(function (error, data) { $scope.junks = data; }); Friday 11 October 13
48. Angular Magic Friday 11 October 13
49. Friday 11 October 13
50. <div ng-repeat="junk in junks"> <img class="col-4 col-sm-4 col-lg-2" src="{{junk.url}}" alt="{{junk.text}}" /> </div> Friday 11 October 13
51. <div ng-repeat="junk in junks"> <img class="col-4 col-sm-4 col-lg-2" src="{{junk.url}}" alt="{{junk.text}}" /> </div> Friday 11 October 13
52. Friday 11 October 13
53. <div ng-repeat="junk in junks | filter:q"> Friday 11 October 13
54. ng-repeat="item in data | startFrom:currentPage*pageSize | limitTo:pageSize" Pagination Friday 11 October 13
55. Friday 11 October 13
56. Friday 11 October 13
57. Let’s create some Junk Friday 11 October 13
58. ‣ Create View ‣ Create Controller ‣ Adjust Routes Friday 11 October 13
59. .controller('JunkNewFormCtrl', function ($scope, $location, $api) { $scope.submit = function () { $api.junk.create($scope.junk, function (error, data) { $scope.junk = data; $location.path('/'); }); }; }) Controller Friday 11 October 13
60. Route .state('new', { url: '/junk/new', templateUrl: 'views/junk/new.html' }) Friday 11 October 13
61. View <form class="form-horizontal" role="form" ng-controller="JunkNewFormCtrl"> <div class="form-group"> <label for="text" class="col-lg-2 control-label">Text</label> <div class="col-lg-10"> <input type="text" class="form-control" id="text" name="text" ng-model="junk.text" placeholder="Text" required> </div> </div> <div class="form-group"> <label for="url" class="col-lg-2 control-label">Url</label> <div class="col-lg-10"> <input type="text" class="form-control" id="url" placeholder="Url" name="url" ng-model="junk.url" required> </div> </div> <div class="form-group"> <div class="col-lg-offset-2 col-lg-10"> <button type="submit" class="btn btn-default" ng-click="submit()">Create Junk</button> </div> </div> </form> Friday 11 October 13
62. <form class="form-horizontal" role="form" ng-controller="JunkNewFormCtrl"> <div class="form-group"> <label for="text" class="col-lg-2 control-label">Text</label> <div class="col-lg-10"> <input type="text" class="form-control" id="text" name="text" ng-model="junk.text" placeholder="Text" required> </div> </div> <div class="form-group"> <label for="url" class="col-lg-2 control-label">Url</label> <div class="col-lg-10"> <input type="text" class="form-control" id="url" placeholder="Url" name="url" ng-model="junk.url" required> </div> </div> <div class="form-group"> <div class="col-lg-offset-2 col-lg-10"> <button type="submit" class="btn btn-default" ng-click="submit()">Create Junk</button> </div> </div> </form> Friday 11 October 13
63. Filters & Directives Friday 11 October 13
64. The good(?) old ways Friday 11 October 13
65. <script type="text/javascript"> $(function() { var textToHide = $('p').text().substring(100); var visibleText = $('p').text().substring(1, 100); $('p') .html(visibleText + ('<span>' + textToHide + '</span>')) .append('<a id="read-more" title="Read More" style="display: block; cursor: pointer;">Read More&hellip;</a>') .click(function() { $(this).find('span').toggle(); $(this).find('a:last').hide(); }); $('p span').hide(); }); </script> jQuery function to create an excerpt Friday 11 October 13
66. Angular Filter to create an excerpt .filter('excerpt', function () { return function (input) { return input.substr(0, input.lastIndexOf(' ', 200)) + '...'; }; }) View: {{description | excerpt}} Friday 11 October 13
67. Directives .directive('whenScrolled', function () { return function(scope, element, attr) { var raw = element[0]; element.bind('scroll', function() { if (raw.scrollTop + raw.offsetHeight >= raw.scrollHeight) { scope.$apply(attr.whenScrolled); } }); }; }); <div id="items" when-scrolled="loadMore()"> Friday 11 October 13
68. Friday 11 October 13
69. Recap Friday 11 October 13
70. ‣ What is AngularJS? ‣ What are the strengths of AngularJS? ‣ How to setup a project with Grunt/ Yeoman/Bower? ‣ How to create routes, controllers and views? ‣ What are directives and filters? Friday 11 October 13
71. Friday 11 October 13
72. Testing Friday 11 October 13
73. With great power comes great responsibility Stan Lee, quoted in the Angular Docs. Friday 11 October 13
74. Unit vs. E2E Tests ‣ Test small isolated units ‣ Can be tested from every angle ‣ Testing full areas of the application ‣ Entire Stack ‣ ‘Robot using your App’ Friday 11 October 13
75. describe('Controller: JunkIndex', function () { beforeEach(function() { browser().navigateTo('/junks'); pause(); }); it('should attach a list of junk to the scope', function () { expect(repeater('a.junk').count()).toBe(4); }); }); Friday 11 October 13
76. Friday 11 October 13
77. More cool stuff... Friday 11 October 13
78. ‣ HTTP Interceptors ‣ ng-resource ‣ Phonegap modules through Angular providers ‣ hammer.js Friday 11 October 13
79. Pack it. Ship it! Friday 11 October 13
80. grunt build Friday 11 October 13
81. The (slightly) dark side of AngularJS Friday 11 October 13
82. Friday 11 October 13
83. Friday 11 October 13
84. https://github.com/angular/angular.js/tree/v1.2.0-rc.2/docs Friday 11 October 13
85. Resources Friday 11 October 13
86. ‣ What is the difference between module.factory and module.service and how might both be applied? - https://groups.google.com/forum/#!msg/angular/56sdORWEoqg/HuZsOsMvKv4J ‣ Service, Factory and Provider in Code - http://jsfiddle.net/pkozlowski_opensource/PxdSP/14/ ‣ Understanding Angular Services - http://docs.angularjs.org/guide/ dev_guide.services.understanding_services ‣ Advanced Testing and Debugging in AngularJS - http://www.yearofmoo.com/2013/09/ advanced-testing-and-debugging-in-angularjs.html ‣ Full-Spectrum Testing with AngularJS and Karma - http://www.yearofmoo.com/2013/01/full- spectrum-testing-with-angularjs-and-karma.html ‣ Angular Directives - http://docs.angularjs.org/guide/directive ‣ The basics of using ui-router with AngularJS - http://joelhooks.com/blog/2013/07/22/the-basics- of-using-ui-router-with-angularjs/ Friday 11 October 13
87. BarcelonaJS.org Nov 12, 2013 Friday 11 October 13
88. https://github.com/PatrickHeneise/Junkagular https://speakerdeck.com/patrickheneise Friday 11 October 13
89. Thank you. Patrick Heneise @PatrickHeneise http://patrickheneise.com Friday 11 October 13