Privalomųjų miško priežiūros, atkūrimo ir apsaugos darbų apimčių tikslinimas
Design Principles of Miško Hevery Father of AngularJS.
-
Upload
lynne-hodge -
Category
Documents
-
view
226 -
download
2
Transcript of Design Principles of Miško Hevery Father of AngularJS.
![Page 1: Design Principles of Miško Hevery Father of AngularJS.](https://reader035.fdocuments.net/reader035/viewer/2022062407/56649e4f5503460f94b45bbc/html5/thumbnails/1.jpg)
Design Principles of
Miško HeveryFather of AngularJS
![Page 2: Design Principles of Miško Hevery Father of AngularJS.](https://reader035.fdocuments.net/reader035/viewer/2022062407/56649e4f5503460f94b45bbc/html5/thumbnails/2.jpg)
The Principles
Boilerplate
D.R.Y. StructureTestabilit
y
![Page 3: Design Principles of Miško Hevery Father of AngularJS.](https://reader035.fdocuments.net/reader035/viewer/2022062407/56649e4f5503460f94b45bbc/html5/thumbnails/3.jpg)
<angular/>
2009: GetAngular
![Page 4: Design Principles of Miško Hevery Father of AngularJS.](https://reader035.fdocuments.net/reader035/viewer/2022062407/56649e4f5503460f94b45bbc/html5/thumbnails/4.jpg)
with Angular
1,500 LOC
Before
17,000 LOC
Project Results
![Page 5: Design Principles of Miško Hevery Father of AngularJS.](https://reader035.fdocuments.net/reader035/viewer/2022062407/56649e4f5503460f94b45bbc/html5/thumbnails/5.jpg)
Database
RAM
<div>
<span> <ul>
<li><li><li>
![Page 6: Design Principles of Miško Hevery Father of AngularJS.](https://reader035.fdocuments.net/reader035/viewer/2022062407/56649e4f5503460f94b45bbc/html5/thumbnails/6.jpg)
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
![Page 7: Design Principles of Miško Hevery Father of AngularJS.](https://reader035.fdocuments.net/reader035/viewer/2022062407/56649e4f5503460f94b45bbc/html5/thumbnails/7.jpg)
RAM
{{ databinding }}
Logic
<div>
<span> <ul>
<li><li><li>
![Page 8: Design Principles of Miško Hevery Father of AngularJS.](https://reader035.fdocuments.net/reader035/viewer/2022062407/56649e4f5503460f94b45bbc/html5/thumbnails/8.jpg)
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
![Page 9: Design Principles of Miško Hevery Father of AngularJS.](https://reader035.fdocuments.net/reader035/viewer/2022062407/56649e4f5503460f94b45bbc/html5/thumbnails/9.jpg)
Structure
ManagesNotifies
Observes
Logic / Controller(JS Classes)
UI / View(DOM)
RAMData / Model(JS Objects)
<div>
<span> <ul>
<li>
![Page 10: Design Principles of Miško Hevery Father of AngularJS.](https://reader035.fdocuments.net/reader035/viewer/2022062407/56649e4f5503460f94b45bbc/html5/thumbnails/10.jpg)
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)
![Page 11: Design Principles of Miško Hevery Father of AngularJS.](https://reader035.fdocuments.net/reader035/viewer/2022062407/56649e4f5503460f94b45bbc/html5/thumbnails/11.jpg)
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)
![Page 12: Design Principles of Miško Hevery Father of AngularJS.](https://reader035.fdocuments.net/reader035/viewer/2022062407/56649e4f5503460f94b45bbc/html5/thumbnails/12.jpg)
Eureka!!! my-tab
my-panemy-map
Imperative{{ databinding }}ng-hideng-controllerng-model
Declarative
![Page 13: Design Principles of Miško Hevery Father of AngularJS.](https://reader035.fdocuments.net/reader035/viewer/2022062407/56649e4f5503460f94b45bbc/html5/thumbnails/13.jpg)
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}}">
![Page 14: Design Principles of Miško Hevery Father of AngularJS.](https://reader035.fdocuments.net/reader035/viewer/2022062407/56649e4f5503460f94b45bbc/html5/thumbnails/14.jpg)
Live Coding
![Page 15: Design Principles of Miško Hevery Father of AngularJS.](https://reader035.fdocuments.net/reader035/viewer/2022062407/56649e4f5503460f94b45bbc/html5/thumbnails/15.jpg)
Community
![Page 16: Design Principles of Miško Hevery Father of AngularJS.](https://reader035.fdocuments.net/reader035/viewer/2022062407/56649e4f5503460f94b45bbc/html5/thumbnails/16.jpg)
Ecosystem
Tools UI Components Libraries Books
AngularUIBatarang
![Page 17: Design Principles of Miško Hevery Father of AngularJS.](https://reader035.fdocuments.net/reader035/viewer/2022062407/56649e4f5503460f94b45bbc/html5/thumbnails/17.jpg)
Thank You!angularjs.org
+angularjs
@angularjs
@mheveryCode samples: http://goo.gl/N1sCd