Date post: | 28-Dec-2015 |
Category: |
Documents |
Upload: | lynne-hodge |
View: | 220 times |
Download: | 2 times |
Design Principles of
Miško HeveryFather of AngularJS
The Principles
Boilerplate
D.R.Y. StructureTestabilit
y
<angular/>
2009: GetAngular
with Angular
1,500 LOC
Before
17,000 LOC
Project Results
Database
RAM
<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)
RAMData / 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
Ecosystem
Tools UI Components Libraries Books
AngularUIBatarang
Thank You!angularjs.org
+angularjs
@angularjs
@mheveryCode samples: http://goo.gl/N1sCd