Grown-up javascript with AngularJS
Download as ZIP, PDF17 likes3,270 views
The document discusses building web applications using AngularJS, highlighting its benefits such as smooth user experience, simplified development, and server efficiency. It emphasizes key features like data binding, routing, and templating, and notes that AngularJS has been developed over 2.5 years with a strong community behind it. Additionally, examples are provided for implementing AngularJS in code and achieving desired user interaction.
![“Sentences”
GET me /people in format of application/json
200! Here is your application/json
[
{id: 1, name: “Mike”},
{id: 2, name: “Tom”}
]](https://image.slidesharecdn.com/jsangular-key-120629091856-phpapp02/85/Grown-up-javascript-with-AngularJS-34-320.jpg)
![<div id="base"></div>
<script type="text/javascript">
$(
$([['Ciao', '' ,'שלוםПривіт']]).each( function(k,v) {
$('#base').append($('<h1>Hello, ' + v + '</h1>'));
})
);
</script>](https://image.slidesharecdn.com/jsangular-key-120629091856-phpapp02/85/Grown-up-javascript-with-AngularJS-63-320.jpg)
![<h1 ng-repeat="n in ['Ciao', '' ,'שלוםПривіт']">
Hello, {{n}}
</h1>](https://image.slidesharecdn.com/jsangular-key-120629091856-phpapp02/85/Grown-up-javascript-with-AngularJS-64-320.jpg)
Grown-up javascript with AngularJS
- 1. Grown-up JavaScript. with AngularJS Mykhailo Kotsur @sotomajor_ua
- 2. We will talk about • Different ways to build a web-app • Why in Javascript? • AngularJS: things that make it rock • Samples • Code talks
- 6. ... Downloading page ... Rendering page
- 7. ... Downloading page ... Rendering page ... Loading external resources
- 8. ... Downloading page ... Rendering page ... Loading external resources ... Executing scripts
- 9. We want:
- 10. We want: Smooth user experience
- 11. We want: Smooth user experience Unload our servers
- 13. http://www.flickr.com/photos/60988113@N06/5996111491/sizes/z/in/photostream/ http://www.lurvely.com/photo/491666425/Thin_tree_at_Lagoinha_Beach/
- 14. Thick server
- 15. Thick server - Grab data - Talk to server - Business stuff - Prepare HTML - Prepare HTML
- 16. Thick server - Grab data - Talk to server - Business stuff - Prepare HTML - Prepare HTML
- 17. We want
- 19. We want Also for form Smooth experience! s!
- 20. We want Also for form Smooth experience! s! Unload servers!
- 21. We want Also for form Smooth experience! s! Unload servers! Simplify development!
- 22. We want Also for form Smooth experience! s! Unload servers! Simplify development! Make server reusable!
- 23. Many clients - one server
- 24. Thin server - Grab data - Talk to server - Business stuff - Prepare view
- 25. Thin server ? - Grab data - Talk to server - Business stuff - Prepare view
- 26. State Transfer REpresentational http://www.flickr.com/photos/film_images/5687432148/
- 28. Verbs POST CREATE GET READ PUT UPDATE DELETE DELETE
- 29. Nouns people
- 30. Nouns people Content types text/xml text/html application/json
- 31. Responses • 200 - OK • 201 - Created • 204 - No content • 404 - Not found • ... many more
- 32. “Sentences” GET me /people in format of application/json
- 33. “Sentences” GET me /people in format of application/json 200! Here is your application/json
- 34. “Sentences” GET me /people in format of application/json 200! Here is your application/json [ {id: 1, name: “Mike”}, {id: 2, name: “Tom”} ]
- 35. “Sentences” POST to /people in format of application/json {name: “Jason”}
- 36. “Sentences” POST to /people in format of application/json {name: “Jason”} 200! Here is your application/json {id: 3, name: “Jason”}
- 37. Our achievements: • Happy users • Less hardware • Fair responsibility separation • To be used by many clients
- 38. Our achievements: • Happy users • Less hardware • Fair responsibility separation • To be used by many clients
- 39. Any drawbacks?
- 45. What now? • Data binding • Routing • Template engine • Tests
- 48. 2.5 years in development
- 49. 2.5 years in development Version 1.0 few weeks ago
- 50. 2.5 years in development Version 1.0 few weeks ago Used in Google’s production projects
- 51. 2.5 years in development Version 1.0 few weeks ago Used in Google’s production projects 3 people of core team + hundreds of community
- 52. 2.5 years in development Version 1.0 few weeks ago Used in Google’s production projects 3 people of core team + hundreds of community Makes web development fun again!
- 55. Easy data binding Declarative approach
- 56. Easy data binding Declarative approach Routing and templating
- 57. Easy data binding Declarative approach Routing and templating DI and TDD as a design base (15000+ tests)
- 60. <h1>Hello, <span id="namePlaceholder"></span></h1> <input id="name" type="text"> <script type="text/javascript"> $( $('#name').keydown(function(e) { $('#namePlaceholder').html(e.target.value); }) ); </script>
- 61. <h1>Hello, {{name}}</h1> <input type="text" ng-model="name">
- 63. <div id="base"></div> <script type="text/javascript"> $( $([['Ciao', '' ,'שלוםПривіт']]).each( function(k,v) { $('#base').append($('<h1>Hello, ' + v + '</h1>')); }) ); </script>
- 64. <h1 ng-repeat="n in ['Ciao', '' ,'שלוםПривіт']"> Hello, {{n}} </h1>
- 65. Routing and templating http://example.com/#!/register
- 66. ???
- 69. ???
- 70. var SomeCtrl = function($scope, $element, $location) { ... }
- 71. it('should just work', inject(function($controller) { var location = {path: function() {return '/';}} $controller( TabsCtrl, {$scope: scope, $element: base, $location: location} ); expect(something).toBeTruthy(); }));
- 81. Hello world example If you read this presentation on your own, checkout the example from: http://github.com/mkotsur/flatometer and walk thru all steps with http://bit.ly/N2MyVU and read commit messages...
- 82. Questions? http://mkotsur.github.com/gitoscop/ http://angularjs.org http://github.com/mkotsur/flatometer
Editor's Notes
- #2: What do I mean &#x201C;Grown-up&#x201D; Javascript?\nLecture:\n- Different approaches of web app;\n- Key features of AngularJS;\n- An example of angular JS app;\n- Let&#x2019;s dive into the code and see what it takes to build an app from scratch.\n\nQuestions:\n- Who writes in JS at least once a week?\n- Who tried high-level JS frameworks. Something more fancy then Jquery?\n- Who is familiar with TDD?\n
- #3: \n
- #4: \n
- #5: \n
- #6: \n
- #7: \n
- #8: \n
- #9: \n
- #10: \n
- #11: \n
- #12: \n
- #13: \n
- #14: \n
- #15: \n
- #16: Forms submit breaks SPA.\nUnload servers - same problem, but on different scales.\nSmaller components - more complex development.\nThe last one is important!\n
- #17: Forms submit breaks SPA.\nUnload servers - same problem, but on different scales.\nSmaller components - more complex development.\nThe last one is important!\n
- #18: Forms submit breaks SPA.\nUnload servers - same problem, but on different scales.\nSmaller components - more complex development.\nThe last one is important!\n
- #19: Forms submit breaks SPA.\nUnload servers - same problem, but on different scales.\nSmaller components - more complex development.\nThe last one is important!\n
- #20: Forms submit breaks SPA.\nUnload servers - same problem, but on different scales.\nSmaller components - more complex development.\nThe last one is important!\n
- #21: \n
- #22: \n
- #23: What is REST? It&#x2019;s just a style of communication between services in the Internet which employs HTTP as a language.\n\nStateless\nCacheable\nClean\n
- #24: It has verbs\n
- #25: It has resources\n
- #26: \n
- #27: \n
- #28: \n
- #29: \n
- #30: \n
- #31: But let&#x2019;s focus on web usage only. Now we have our server fully prepared to send us loads of data which we need.\n
- #32: \n
- #33: Javascript duck typing.\n
- #34: \n
- #35: \n
- #36: \n
- #37: If you build a really nice app, it will be recognized by the name;\nThere is still a way to do few almost static pages served by some backend, or CMS. But it will be separate app.\n
- #38: \n
- #39: \n
- #40: \n
- #41: \n
- #42: \n
- #43: \n
- #44: \n
- #45: \n
- #46: \n
- #47: \n
- #48: \n
- #49: \n
- #50: \n
- #51: \n
- #52: \n
- #53: \n
- #54: Declarative: what the program should accomplish, rather than describing how to go about accomplishing it.\nAnd what is important, you don&#x2019;t need to torture your brain each time you are going to write something like this. It comes very natural.\n
- #55: \n
- #56: \n
- #57: Declatative: what the program should accomplish, rather than describing how to go about accomplishing it.\nAnd what is important, you don&#x2019;t need to torture your brain each time you are going to write something like this. It comes very natural.\n
- #58: \n
- #59: \n
- #60: Declatative: what the program should accomplish, rather than describing how to go about accomplishing it.\nAnd what is important, you don&#x2019;t need to torture your brain each time you are going to write something like this. It comes very natural.\n
- #61: Declatative: what the program should accomplish, rather than describing how to go about accomplishing it.\nAnd what is important, you don&#x2019;t need to torture your brain each time you are going to write something like this. It comes very natural.\n
- #62: Those of you who were into automated testing, know very well about this problem.\n
- #63: \n
- #64: \n
- #65: \n
- #66: \n
- #67: \n
- #68: \n
- #69: \n
- #70: \n