Angular JS Introduction
•
0 gefällt mir•337 views
Slides for AngularJS Introduction talk presented by me.
Empfohlen
Weitere ähnliche Inhalte
Was ist angesagt?
Was ist angesagt? (20)
Ähnlich wie Angular JS Introduction
Ähnlich wie Angular JS Introduction (20)
Kürzlich hochgeladen
Kürzlich hochgeladen (20)
Angular JS Introduction
- 10. “AngularJS: a kind of HTML extension.”
- 11. D D D
- 13. Data-binding
- 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>
- 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
- 35. http://bower.io/
- 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
- 40. write tests
- 43. use generators
- 46. putting it all together
- 48. keep learning
- 50. with videos
- 53. with blogs
- 57. with books
- 58. AngularJS - Up & Running
- 60. with tools
- 63. and more...
- 64. Angular 2
- 67. Questions?
- 68. Now it's up to you