1 / 17

Design Principles of

Design Principles of . Mi š ko Hevery Father of AngularJS. The Principles. Boilerplate. D.R.Y. Structure. Testability. 2009: GetAngular. <angular/>. Results. Project. 17,000 LOC. 1,500 LOC. Before. with Angular. <div>. <span>. <ul>. RAM. <li>. <li>. <li>. Database.

ratana
Download Presentation

Design Principles of

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Design Principles of Miško Hevery Father of AngularJS

  2. The Principles Boilerplate D.R.Y. Structure Testability

  3. 2009: GetAngular <angular/>

  4. Results Project 17,000 LOC 1,500 LOC Before with Angular

  5. <div> <span> <ul> RAM <li> <li> <li> Database

  6. Data Binding Eureka: DOM <html ng-app> <body> <input ng-model='user.name'> <p ng-show='user.name'>Hi {{user.name}}</p> <script src='angular.js'></script> </body> </html>

  7. {{ databinding }} <div> <span> <ul> RAM <li> <li> <li> Logic

  8. <htmlng-app> <body ng-controller='UserCtrl as uCtrl'> Hi<input ng-model='uCtrl.user.first'> <button ng-click='uCtrl.bye()'>bye</button> <script src='angular.js'></script> <script src='UserControllers.js'></script> </body> </html> MVC function UserCtrl() { this.user = { first:'Larry', last:'Page' }; this.bye = function() { alert('bye:' + this.user.first); }; } index.html UserController.js

  9. Structure Data / Model (JS Objects) UI / View (DOM) Observes <div> RAM <span> <ul> <li> Manages Notifies Logic / Controller (JS Classes)

  10. Dependency Injection Module: myApp functionUserController(voiceSynth) { this.user = { first:'Larry', last: 'Page' }; this.bye = function() { voiceSynth.say('bye') }; } functionVoiceSynth(webAudio) { this.say = function(text) {// do Web Audio stuff}; }; var myApp = angular.module('myApp', []); myApp.controller('UserController', UserController); myApp.service('voiceSynth', VoiceSynth); View (DOM) UserController VoiceSynth WebAudio

  11. Dependency Injection: Mocking Module: myMocks -> myApp functionVoiceSynthMock() { this.say = function(text) { this.said.push(text); }; this.said = []; }; var myMocks = angular.module('myMocks', ['myApp']); myApp.service('voiceSynth', VoiceSynthMock); View (DOM) UserController VoiceSynth VoiceSynthMock WebAudio

  12. Imperative Declarative {{ databinding }} ng-hide ng-controller ng-model Eureka!!! my-tab my-pane my-map

  13. <tabs> <tab title="Active tab">...</tab> <tab title="Inactive tab">...</tab> </tabs> <span tooltip="{{messages.tip1}}"> Directives as Components <rating max="5" model="stars.average"> </rating>

  14. Live Coding

  15. Community

  16. Ecosystem Tools UI Components Libraries Books Batarang AngularUI

  17. Code samples: http://goo.gl/N1sCd Thank You! angularjs.org +angularjs @angularjs @mhevery

More Related