Skip to content

Commit 777cd17

Browse files
bennadelbennadel
committed
Add fundamental misunderstanding of change detecition. Hashtag lame.
1 parent f2e31b6 commit 777cd17

25 files changed

+201048
-0
lines changed

‎README.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ with.
1010

1111
## My JavaScript Demos - I Love JavaScript!
1212

13+
* [I Have A Fundamental Misunderstanding Of Change Detection In Angular 2 Beta 8](http://bennadel.github.io/JavaScript-Demos/demos/fundamental-misunderstanding-change-detection-angular2/)
1314
* [Logging Error Streams To The Server In Angular 2 Beta 6](http://bennadel.github.io/JavaScript-Demos/demos/error-stream-logging-angular2/)
1415
* [EventEmitter Is An RxJS Observable Stream In Angular 2 Beta 6](http://bennadel.github.io/JavaScript-Demos/demos/event-emitter-stream-angular2/)
1516
* [Unhandled Errors In RxJS Observable Streams Will Throw Errors In Angular 2 Beta 6](http://bennadel.github.io/JavaScript-Demos/demos/uncaught-errors-rxjs-angular2/)

‎demos/fundamental-misunderstanding-change-detection-angular2/demo.css‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
2+
item {
3+
border: 1px solid #CCCCCC ;
4+
border-radius: 3px 3px 3px 3px ;
5+
display: table ;
6+
margin: 16px 0px 16px 0px ;
7+
padding: 8px 15px 8px 15px ;
8+
}

‎demos/fundamental-misunderstanding-change-detection-angular2/index.htm‎

Lines changed: 136 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,136 @@
1+
<!doctype html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8" />
5+
6+
<title>
7+
I Have A Fundamental Misunderstanding Of Change Detection In Angular 2 Beta 8
8+
</title>
9+
10+
<link rel="stylesheet" type="text/css" href="./demo.css"></link>
11+
</head>
12+
<body>
13+
14+
<h1>
15+
I Have A Fundamental Misunderstanding Of Change Detection In Angular 2 Beta 8
16+
</h1>
17+
18+
<my-app>
19+
Loading...
20+
</my-app>
21+
22+
<!-- Load demo scripts. -->
23+
<script type="text/javascript" src="../../vendor/angularjs-2-beta/8/es6-shim.min.js"></script>
24+
<script type="text/javascript" src="../../vendor/angularjs-2-beta/8/Rx.umd.min.js"></script>
25+
<script type="text/javascript" src="../../vendor/angularjs-2-beta/8/angular2-polyfills.min.js"></script>
26+
<script type="text/javascript" src="../../vendor/angularjs-2-beta/8/angular2-all.umd.js"></script>
27+
<!-- AlmondJS - minimal implementation of RequireJS. -->
28+
<script type="text/javascript" src="../../vendor/angularjs-2-beta/8/almond.js"></script>
29+
<script type="text/javascript">
30+
31+
// Defer bootstrapping until all of the components have been declared.
32+
// --
33+
// NOTE: Not all components have to be required here since they will be
34+
// implicitly required by other components.
35+
requirejs(
36+
[ /* Using require() for better readability. */ ],
37+
function run() {
38+
39+
var App = require( "App" );
40+
41+
ng.platform.browser.bootstrap( App );
42+
43+
}
44+
);
45+
46+
47+
// --------------------------------------------------------------------------- //
48+
// --------------------------------------------------------------------------- //
49+
50+
51+
// I provide the root App component.
52+
define(
53+
"App",
54+
function registerApp() {
55+
56+
var Item = require( "Item" );
57+
58+
// Configure the App component definition.
59+
ng.core
60+
.Component({
61+
selector: "my-app",
62+
directives: [ Item ],
63+
64+
// Here, we are asking Angular to inject a QueryList for the
65+
// collection of Item directives rendered within our component
66+
// view. This will inject `itemList` as a public property on
67+
// the App component instance.
68+
// --
69+
// CAUTION: View queries are set before the ngAfterViewInit()
70+
// life-cycle method is called, but after the ngOnInit() life-
71+
// cycle method is called. As such, the `itemList` property will
72+
// not exist until the View is initialized.
73+
queries: {
74+
itemList: new ng.core.ViewChildren( Item )
75+
},
76+
77+
// Notice that our view has 2 Item instances. And, that we are
78+
// using the injected `itemList` property to display the count
79+
// of items currently rendered in the view.
80+
template:
81+
`
82+
<h2>
83+
Item Count: {{ itemList?.length }}
84+
</h2>
85+
86+
<item></item>
87+
<item></item>
88+
`
89+
})
90+
.Class({
91+
constructor: AppController
92+
})
93+
;
94+
95+
return( AppController );
96+
97+
98+
// I control the App component.
99+
function AppController() {
100+
101+
// ... nothing to do here.
102+
103+
}
104+
105+
}
106+
);
107+
108+
109+
// --------------------------------------------------------------------------- //
110+
// --------------------------------------------------------------------------- //
111+
112+
113+
// I provide a super simple Component for no other purpose than to have a
114+
// directive that can be rendered in the App component.
115+
define(
116+
"Item",
117+
function registerItem() {
118+
119+
// Configure the Item component definition.
120+
return ng.core
121+
.Component({
122+
selector: "item",
123+
template: "This is an Item!"
124+
})
125+
.Class({
126+
constructor: function ItemController() { /* Nothing to do. */ }
127+
})
128+
;
129+
130+
}
131+
);
132+
133+
</script>
134+
135+
</body>
136+
</html>

0 commit comments

Comments
 (0)