Hey, I just met AngularJS, and this is crazy, so here’s my JavaScript, let’s use it maybe
7 likes2,779 views
The document discusses AngularJS, including its key features like two-way data binding, dependency injection, directives, and support. It notes AngularJS provides a solid foundation, works well with the JavaScript ecosystem, and enables modern API-oriented architectures. Potential downsides discussed include excessive watchers negatively impacting performance, and the learning curve being harder than expected. It emphasizes understanding how browsers implement AngularJS applications and using developer tools. It also covers AngularJS 2.0 changes and questions around whether AngularJS is the future or if other solutions may be preferable for larger projects.
![angular.module('sf-con', [])
.directive('menu', function(){
return {
restrict: 'AE',
scope: {},
template: ‘path/to/tpl.html’,
link: function (scope) {
scope.items = links;
}
}
});](https://image.slidesharecdn.com/symfonyconmadrid2014heyijustmetangularjs-141127091902-conversion-gate01/85/Hey-I-just-met-AngularJS-and-this-is-crazy-so-here-s-my-JavaScript-let-s-use-it-maybe-50-320.jpg)
![angular.module('sf-con', [])
.directive('menu', function(){
return {
restrict: 'AE',
scope: {},
template: ‘path/to/tpl.html’,
link: function (scope) {
scope.items = links;
}
}
});](https://image.slidesharecdn.com/symfonyconmadrid2014heyijustmetangularjs-141127091902-conversion-gate01/85/Hey-I-just-met-AngularJS-and-this-is-crazy-so-here-s-my-JavaScript-let-s-use-it-maybe-51-320.jpg)
![angular.module('sf-con', [])
.directive('menu', function(){
return {
restrict: 'AE',
scope: {},
template: ‘path/to/tpl.html’,
link: function (scope) {
scope.items = links;
}
}
});](https://image.slidesharecdn.com/symfonyconmadrid2014heyijustmetangularjs-141127091902-conversion-gate01/85/Hey-I-just-met-AngularJS-and-this-is-crazy-so-here-s-my-JavaScript-let-s-use-it-maybe-53-320.jpg)
![angular.module('sf-con', [])
.directive('menu', function(){
return {
restrict: 'AE',
scope: {},
template: ‘path/to/tpl.html’,
link: function (scope) {
scope.items = links;
}
}
});](https://image.slidesharecdn.com/symfonyconmadrid2014heyijustmetangularjs-141127091902-conversion-gate01/85/Hey-I-just-met-AngularJS-and-this-is-crazy-so-here-s-my-JavaScript-let-s-use-it-maybe-54-320.jpg)
![angular.module('sf-con', [])
.directive('menu', function(){
return {
restrict: 'AE',
scope: {},
template: ‘path/to/tpl.html’,
link: function (scope) {
scope.items = links;
}
}
});](https://image.slidesharecdn.com/symfonyconmadrid2014heyijustmetangularjs-141127091902-conversion-gate01/85/Hey-I-just-met-AngularJS-and-this-is-crazy-so-here-s-my-JavaScript-let-s-use-it-maybe-56-320.jpg)
![angular.module('sf-con', [])
.directive('menu', function(){
return {
restrict: 'AE',
scope: {},
template: ‘path/to/tpl.html’,
link: function (scope) {
scope.items = links;
}
}
});](https://image.slidesharecdn.com/symfonyconmadrid2014heyijustmetangularjs-141127091902-conversion-gate01/85/Hey-I-just-met-AngularJS-and-this-is-crazy-so-here-s-my-JavaScript-let-s-use-it-maybe-58-320.jpg)
![angular.module('sf-con', [])
.directive('menu', function(){
return {
restrict: 'AE',
scope: {},
template: ‘path/to/tpl.html’,
link: function (scope) {
scope.items = links;
}
}
});](https://image.slidesharecdn.com/symfonyconmadrid2014heyijustmetangularjs-141127091902-conversion-gate01/85/Hey-I-just-met-AngularJS-and-this-is-crazy-so-here-s-my-JavaScript-let-s-use-it-maybe-59-320.jpg)
![angular.module('confoo', [])
.directive('menu', function(){
return {
restrict: 'AE',
scope: {},
template: ‘path/to/tpl.html’,
link: function (scope) {
scope.items = links;
}
}
});](https://image.slidesharecdn.com/symfonyconmadrid2014heyijustmetangularjs-141127091902-conversion-gate01/85/Hey-I-just-met-AngularJS-and-this-is-crazy-so-here-s-my-JavaScript-let-s-use-it-maybe-62-320.jpg)
Hey, I just met AngularJS, and this is crazy, so here’s my JavaScript, let’s use it maybe
- 1. Hey, I just met AngularJS! Alessandro Nadalin, NAMSHI.com - Madrid, November 2014
- 3. mobile
- 6. Killer Features 2-way data binding
- 7. Model changes the View
- 8. View changes the Model
- 11. function Ctrl($scope) { $scope.title = 'Lorem Ipsum'; }
- 12. <div ng-app="myModule"> <div ng-controller="Ctrl"> Title: <input ng-model="title"> <hr> Title again: <input ng-model="title"> </div> </div>
- 13. <div ng-app="myModule"> <div ng-controller="Ctrl"> Title: <input ng-model="title"> <hr> Title again: <input ng-model="title"> </div> </div>
- 14. <div ng-app="myModule"> <div ng-controller="Ctrl"> Title: <input ng-model="title"> <hr> Title again: <input ng-model="title"> </div> </div>
- 15. function Ctrl($scope) { $scope.title = 'Lorem Ipsum'; }
- 16. <div ng-app="myModule"> <div ng-controller="Ctrl"> Title: <input ng-model="title"> <hr> Title again: <input ng-model="title"> </div> </div>
- 17. function Ctrl($scope) { $scope.title = 'Lorem Ipsum'; } Title: <input ng-model="title">
- 18. function Ctrl($scope) { $scope.title = 'Lorem Ipsum'; } Title: <input ng-model="title">
- 21. Killer Features Dependency Injection
- 22. function Ctrl($scope) { // WHAT THE HECK SHALL I DO HERE??? }
- 23. function Ctrl($scope, $location) { // WHAT THE HECK SHALL I DO HERE??? }
- 24. function Ctrl($scope, $location) { // WHAT THE HECK SHALL I DO HERE??? }
- 25. function Ctrl($scope, $location) { $scope.whereAmI = $location.host(); }
- 39. <div ng-app="sf-con"> <div ng-controller="Ctrl"> <menu /> </div> </div>
- 40. <div ng-app="sf-con"> <div ng-controller="Ctrl"> <menu /> </div> </div>
- 41. <div ng-app="sf-con"> <div ng-controller="Ctrl"> <div menu></div> </div> </div>
- 42. <div ng-app="sf-con"> <div ng-controller="Ctrl"> <div data-menu></div> </div> </div>
- 43. var links = { home: { link: 'http://example.com', title: 'Home' }, about: { link: 'http://example.com/about', title: 'About Us' } };
- 44. var links = { home: { link: 'http://example.com', title: 'Home' }, about: { link: 'http://example.com/about', title: 'About Us' } };
- 45. <ul> <li ng-repeat="item in items"> <a href="{{ item.link }}"> {{ item.title }} </a> </li> </ul>
- 46. <ul> <li ng-repeat="item in items"> <a href="{{ item.link }}"> {{ item.title }} </a> </li> </ul>
- 47. <ul> <li ng-repeat="item in items"> <a href="{{ item.link }}"> {{ item.title }} </a> </li> </ul>
- 48. <ul> <li ng-repeat="item in items"> <a href="{{ item.link }}"> {{ item.title }} </a> </li> </ul>
- 49. <ul> <li ng-repeat="item in items"> <a href="{{ item.link }}"> {{ item.title }} </a> </li> </ul>
- 50. angular.module('sf-con', []) .directive('menu', function(){ return { restrict: 'AE', scope: {}, template: ‘path/to/tpl.html’, link: function (scope) { scope.items = links; } } });
- 51. angular.module('sf-con', []) .directive('menu', function(){ return { restrict: 'AE', scope: {}, template: ‘path/to/tpl.html’, link: function (scope) { scope.items = links; } } });
- 52. <div ng-app="sf-con"> <div ng-controller="Ctrl"> <menu /> </div> </div>
- 53. angular.module('sf-con', []) .directive('menu', function(){ return { restrict: 'AE', scope: {}, template: ‘path/to/tpl.html’, link: function (scope) { scope.items = links; } } });
- 54. angular.module('sf-con', []) .directive('menu', function(){ return { restrict: 'AE', scope: {}, template: ‘path/to/tpl.html’, link: function (scope) { scope.items = links; } } });
- 55. <div ng-app="sf-con"> <div ng-controller="Ctrl"> <div data-menu /> </div> </div>
- 56. angular.module('sf-con', []) .directive('menu', function(){ return { restrict: 'AE', scope: {}, template: ‘path/to/tpl.html’, link: function (scope) { scope.items = links; } } });
- 57. <div ng-app="sf-con"> <div ng-controller="Ctrl"> <menu /> </div> </div>
- 58. angular.module('sf-con', []) .directive('menu', function(){ return { restrict: 'AE', scope: {}, template: ‘path/to/tpl.html’, link: function (scope) { scope.items = links; } } });
- 59. angular.module('sf-con', []) .directive('menu', function(){ return { restrict: 'AE', scope: {}, template: ‘path/to/tpl.html’, link: function (scope) { scope.items = links; } } });
- 60. <ul> <li ng-repeat="item in items"> <a href="{{ item.link }}"> {{ item.title }} </a> </li> </ul>
- 61. <ul> <li ng-repeat="item in items"> <a href="{{ item.link }}"> {{ item.title }} </a> </li> </ul>
- 62. angular.module('confoo', []) .directive('menu', function(){ return { restrict: 'AE', scope: {}, template: ‘path/to/tpl.html’, link: function (scope) { scope.items = links; } } });
- 63. <body ng-app="sf-con"> <sf-con-header> <div> <div ng-controller=”MainCtrl”> <sf-con-sidebar> </div> <sf-con-footer> </div>
- 64. <body ng-app="sf-con"> <sf-con-header> <div> <div ng-controller=”MainCtrl”> <sf-con-sidebar> </div> <sf-con-footer> </div>
- 65. <body ng-app="sf-con"> <sf-con-header> <div> <div ng-controller=”MainCtrl”> <sf-con-sidebar> </div> <sf-con-footer> </div>
- 66. <body ng-app="sf-con"> <sf-con-header> <div> <div sf-con-main-content> <sf-con-sidebar> </div> <sf-con-footer> </div>
- 68. “Controllers, Directives and Services” http://is.gd/QlGYID
- 69. and much much more :)
- 70. Why do we like AngularJS?
- 71. Solid and clear foundation
- 72. $routeProvider.when(‘/about’, { templateUrl: '/views/about.html', controller: 'AboutController', }); Solid and clear foundation
- 73. $http({ method: 'GET', url: '/milk.html }). success(function(...) { alert(‘YEAH!’); }). error(function(...) { alert(‘AWWW, SNAP!’); }); Solid and clear foundation
- 74. Works well with the JS ecosystem
- 75. Works well with the JS ecosystem
- 76. .container(data-bindonce) .row #my-whatever p {{ myModel.text }} Works well with the JS ecosystem
- 77. .container(data-bindonce) .row #my-whatever input(ng-model=”myModel”) Works well with the JS ecosystem
- 79. APIfy everything
- 80. Easier to scale
- 81. No sessions on the servers
- 82. maintain state on the client (LS)
- 84. What will you hate about AngularJS?
- 85. ehm...
- 87. Watchers
- 88. lotsa bindings, lotsa watchers
- 89. lotsa watchers, lotsa computation
- 90. <ul> <li ng-repeat="item in items"> <a href="{{ item.link }}"> {{ item.title }} </a> </li> </ul>
- 91. <ul> <li ng-repeat="item in items"> <a href="{{ item.link }}"> {{ item.title }} </a> </li> </ul> prepare for N...
- 92. <ul> <li ng-repeat="item in items"> <a href="{{ item.link }}"> {{ item.title }} </a> </li> </ul> N * 1
- 93. <ul> <li ng-repeat="item in items"> <a href="{{ item.link }}"> {{ item.title }} </a> </li> </ul> N * 2
- 95. <ul> <li ng-repeat="item in items"> <a href="{{ item.link }}"> {{ item.title }} <menu ng-if=”item.links” links=”item.links” /> </a> </li> </ul>
- 96. <ul> <li ng-repeat="item in items"> <a href="{{ item.link }}"> {{ item.title }} <menu ng-if=”item.links” links=”item.links” /> </a> </li> </ul>
- 97. use 1-way data binding if possible
- 99. try to stay under ~800 watchers
- 100. UI screws for real at ~2000 ;-)
- 101. Will probably be able to turn watchers off in Angular 2.0
- 102. ehm...
- 103. but also…
- 106. they don’t just render anymore
- 107. The browser is your platform
- 108. and the VM on which your application runs
- 109. is implemented in different ways, based on the browsers themselves
- 111. What will you need to know about AngularJS?
- 112. “Best way to serve AngularJS from a Symfony2 app?”
- 115. Angular 1.3
- 116. Terrific performance improvements (at a cost)
- 117. Homogeneous VS heterogeneous team
- 118. Learning curve might be harder than what you think
- 120. Get someone to dive into DevTools
- 121. Get someone to dive into DevTools https://www.igvita.com/slides/2012/devtools-tips-and-tricks/#1
- 122. Get someone to dive into DevTools https://www.igvita.com/slides/2012/devtools-tips-and-tricks/#1 http://devtoolsecrets.com/
- 123. Get someone to dive into DevTools https://www.igvita.com/slides/2012/devtools-tips-and-tricks/#1 http://devtoolsecrets.com/ http://devtoolstips.com/
- 124. Get someone to dive into DevTools https://www.igvita.com/slides/2012/devtools-tips-and-tricks/#1 http://devtoolsecrets.com/ http://devtoolstips.com/ http://addyosmani.com/blog/tag/devtools/
- 126. (almost) no question
- 127. Testing will always be hard
- 128. AngularJS 2.0
- 129. Controllers, Directive Definition, $scope, angular.module, jqLite
- 132. Angular design documents https://drive.google.com/drive/u/0/#folders/0BxgtL8yFJbacUnUxc3l5aTZrbVk
- 133. Shit’s gonna change
- 134. Is AngularJS the future?
- 135. Maybe.
- 136. Or, I mean...
- 137. We will still need backends
- 138. Or use WordPress a lot
- 139. but
- 140. Natural evolution, decoupled apps
- 141. Handy solution for some scenarios
- 142. It is a future
- 144. Isomorphic apps, “same” code on the client and the server
- 145. Feedback?
- 146. AngularJS has served as a great introduction to scaling on the client. A good team will find it easy after a couple weeks. On a larger scale you might want to look into something less full-stack.
- 147. AngularJS has served as a great introduction to scaling on the client. A good team will find it easy after a couple weeks. On a larger scale you might want to look into something less full-stack.
- 148. AngularJS has served as a great introduction to scaling on the client. A good team will find it easy after a couple weeks. On a larger scale you might want to look into something less full-stack.
- 149. Without paying too much attention, performances are very decent. Very easy for a backend / HMVC guy to understand how it works. Tooling is extremely powerful.
- 150. Without paying too much attention, performances are very decent. Very easy for a backend / HMVC guy to understand how it works. Tooling is extremely powerful.
- 151. Without paying too much attention, performances are very decent. Very easy for a backend / HMVC guy to understand how it works. Tooling is extremely powerful.
- 152. Write smaller apps without getting tangled in a single codebase, reuse modules. Decouple, decouple, decouple. Decouple again.
- 153. Write smaller apps without getting tangled in a single codebase, reuse modules. Decouple, decouple, decouple. Decouple again.
- 154. Write smaller apps without getting tangled in a single codebase, reuse modules. Decouple, decouple, decouple. Decouple again.
- 155. ...yawn...
- 156. Alessandro Nadalin
- 158. Alessandro Nadalin @_odino_ Namshi
- 159. Alessandro Nadalin @_odino_ Namshi VP Technology
- 160. Alessandro Nadalin @_odino_ Namshi VP Technology odino.org
- 161. Thanks! Alessandro Nadalin @_odino_ Namshi VP Technology odino.org
- 162. tech.namshi.com/join-us we are hiring! tech.namshi.com github.com/namshi twitter.com/TechNamshi