Angular JS Introduction

Slides for AngularJS Introduction talk presented by me.

Transcript

1. Introduction to
2. About me Full-stack dev @dhyegofernando
5. The beginning
6. http://web.archive.org/web/20050428014715/http://www.youtube.com/ 2005
8. SPA Single Page Application
10. “AngularJS: a kind of HTML extension.”
11. D D D
12. Data-binding Dependency Injection Directives
13. Data-binding
14. $('#input-name').on('change', function() { $('#greeting-name').text(this.value); }); #input-name #greeting-name
17. model module bootstrap template expression <div ng-app> <div> <label>Name:</label> <input type="text" ng-model="yourName"> <hr> <h1>Hello {{yourName}}!</h1> </div> </div>
19. Dependency Injection
20. controller bootstrap <div ng-app="app" ng-controller="GreetingController"> <form ng-submit="greet()"> <input type="text" ng-model="name"> <button type="submit">Greet</button> </form> </div>
21. module application dependency injection ... service 3rd's module service angular.module('app', ['alerter']) .controller('GreetingController', function($scope, Alerter) { $scope.name = 'John Doe'; $scope.greet = function() { Alerter.show('Hello ' + $scope.name); }; }); angular.module('alerter', []) .factory('Alerter', function($window) { return { show: function(string) { $window.alert(string); } }; });
22. Directives
23. Tab Component
24. Non-semantic way bootstrap plugin element <div id="tab"> <ul class="tab-head"> <li><a href="#content-1">Title 1</a></li> <li><a href="#content-2">Title 2</a></li> <li><a href="#content-3">Title 3</a></li> </ul> <div id="content-1" class="tab-content"> <p>Content 1 goes here</p> </div> <div id="content-2" class="tab-content"> <p>Content 2 goes here</p> </div> <div id="content-3" class="tab-content"> <p>Content 3 goes here</p> </div> </div> $('#tab').tab();
26. Semantic way directives bootstrap ... tab components <tabset> <tab heading="Title 1"> <p>Content 1 goes here</p> </tab> <tab heading="Title 2"> <p>Content 2 goes here</p> </tab> <tab heading="Title 3"> <p>Content 3 goes here</p> </tab> </tabset> angular.module('tab') .directive('tabset', function() { // ... }) .directive('tab', function() { // ... });
28. Hello {{ world }}
29. load angular script bootstrap application set model template <!DOCTYPE html> <html lang="en" ng-app> <head> <meta charset="UTF-8"> <title>Hello World</title> </head> <body> <input type="text" ng-model="name"> <h1>Hello {{ name }}</h1> <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.15/ angular.min.js"></script> </body> </html>
30. Some golden tips
31. Don't reinvent the wheel
32. ...use 3rd's components ✓ nice documentation ✓ great tests suit ✓ maintained ✓ best practices
33. where to find components?
34. http://ngmodules.org/
35. http://bower.io/
36. how to use components?
37. install the component bower install --save angular-material load the component scripts <link rel="stylesheet" href="angular-material.min.css" rel="stylesheet"> <script src="angular-material.min.js"></script> load the component module angular.module('app', ['ngMaterial']);
38. follow the style guide
39. https://github.com/johnpapa/angular-styleguide
40. write tests
41. http://karma-runner.github.io/
42. http://angular.github.io/protractor/
43. use generators
44. http://yeoman.io/
45. https://github.com/yeoman/generator-angular
46. putting it all together
47. https://github.com/dhyegofernando/shopping-list-app Shopping list app
48. keep learning
49. https://docs.angularjs.org/api
50. with videos
51. https://www.youtube.com/user/angularjs/
52. https://egghead.io/
53. with blogs
54. http://www.johnpapa.net/
55. http://briantford.com/
56. http://toddmotto.com/
57. with books
58. AngularJS - Up & Running
59. https://www.ng-book.com/
60. with tools
61. http://ng-inspector.org/
62. https://github.com/angular/angularjs-batarang
63. and more...
64. Angular 2
65. https://angular.io/
66. https://angular.io/docs/js/latest/quickstart.html
67. Questions ?
68. Now it's up to you
69. Thank you @dhyegofernando