Embed Size (px)
DESCRIPTION
Design Principles of . Mi š ko Hevery Father of AngularJS. The Principles. Boilerplate. D.R.Y. Structure. Testability. 2009: GetAngular. . Results. Project. 17,000 LOC. 1,500 LOC. Before. with Angular. . . . RAM. . . . Database. - PowerPoint PPT Presentation
Citation preview
Design Principles of
Miško HeveryFather of AngularJS
The Principles
Boilerplate
D.R.Y. Structure Testability
<angular/>
2009: GetAngular
with Angular
1,500 LOC
Before
17,000 LOC
Project Results
DatabaseRAM
<div>
<span> <ul>
<li><li><li>
Data Binding<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>
Eureka: DOM
RAM
{{ databinding }}
Logic<div>
<span> <ul>
<li><li><li>
function UserCtrl() {
this.user = {
first:'Larry',
last:'Page'
};
this.bye = function() {
alert('bye:' + this.user.first);
};
}
<html ng-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
index.html UserController.js
Structure
ManagesNotifies
Observes
Logic / Controller(JS Classes)
UI / View(DOM) RAM
Data / Model(JS Objects)
<div>
<span> <ul>
<li>
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: myApp
UserController
WebAudio
VoiceSynth
View (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);
UserController
VoiceSynthMock
WebAudio
VoiceSynth
View (DOM)
Eureka!!! my-tab
my-panemy-map
Imperative{{ databinding }}ng-hideng-controllerng-model
Declarative
Directives as Components
<rating max="5" model="stars.average">
</rating>
<tabs>
<tab title="Active tab">...</tab>
<tab title="Inactive tab">...</tab>
</tabs>
<span tooltip="{{messages.tip1}}">
Live Coding
Community
EcosystemTools UI Components Libraries Books
AngularUIBatarang
Thank You!angularjs.org
+angularjs@angularjs@mhevery
Code samples: http://goo.gl/N1sCd
