angularjs - html enhanced for web-apps presentation
DESCRIPTION
Angular HTMLO Enhanced for Web-AppsTRANSCRIPT
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
-
-