Design Principles of

Design Principles of Miko HeveryFather of AngularJS\ The PrinciplesBoilerplateD.R.Y.StructureTestability

2009: GetAngular with Angular1,500 LOCBefore17,000 LOCProjectResults

DatabaseRAM

Data Binding

Hi {{user.name}}

Eureka: DOM RAM{{ databinding }}Logic

• function UserCtrl() { this.user = { first:'Larry', last:'Page' }; this.bye = function() { alert('bye:' + this.user.first); };}

  Hi bye

  MVCindex.htmlUserController.js StructureManagesNotifiesObservesLogic / Controller(JS Classes)UI / View(DOM)RAMData / Model(JS Objects)

  • Look at the arrowsLogic can be instantiated without viewView is declarative

    Dependency Injectionfunction UserController(voiceSynth) { this.user = { first:'Larry', last: 'Page' }; this.bye = function() { voiceSynth.say('bye') };}

    function VoiceSynth(webAudio) { this.say = function(text) {// do Web Audio stuff};};

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

    var myMocks = angular.module('myMocks', ['myApp']);myApp.service('voiceSynth', VoiceSynthMock);

    UserControllerVoiceSynthMockWebAudioVoiceSynthView (DOM)Eureka!!!my-tabmy-panemy-map Imperative{{ databinding }}ng-hideng-controllerng-modelDeclarativeImperative for logicDeclarative for templates and configuration Directives as Components

    ... ...

    Live Coding Community EcosystemToolsUI ComponentsLibrariesBooksAngularUIBatarangThank You!angularjs.org

    +angularjs@angularjs@mheveryCode samples: http://goo.gl/N1sCdhttps://github.com/mhevery/ng-google-io/commits/master