Skip to content

Commit 178f9da

Browse files
bennadelbennadel
committed
Add object-notation demo for TypeScript.
1 parent 8dace2e commit 178f9da

6,832 files changed

Lines changed: 1007922 additions & 0 deletions

File tree

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎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+
* [Object Access: Bracket-Notation vs. Dot-Notation With TypeScript In Angular 2 RC 4](http://bennadel.github.io/JavaScript-Demos/demos/object-notation-typescript-angular2/)
1314
* [Using An Item Template With An HTML Dropdown Menu Component In Angular 2 RC 3](http://bennadel.github.io/JavaScript-Demos/demos/html-dropdown-template-angular2/)
1415
* [Change Detection Strategy Appears To Override The ChangeDetectorRef In Angular 2 RC 3](http://bennadel.github.io/JavaScript-Demos/demos/change-detector-strategy-angular2/)
1516
* [Emitting Cancelable / Preventable Output Events In Angular 2 RC 3](http://bennadel.github.io/JavaScript-Demos/demos/cancel-event-emitter-event-angular2/)

‎demos/object-notation-typescript-angular2/app/app.component.ts‎

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
2+
// Import the core angular services.
3+
import { Component } from "@angular/core";
4+
5+
// Here, we're defining an object interface to contain a collection of values. This
6+
// is nothing out of the ordinary and is, in fact, how we think about objects. According
7+
// to the interface, however, the keys have to be strings.
8+
// --
9+
// NOTE: In TypeScript, object interfaces must be defined as having "string" or
10+
// "number" keys.
11+
interface IData {
12+
[ key: string ]: any;
13+
}
14+
15+
@Component({
16+
selector: "my-app",
17+
template:
18+
`
19+
<p>
20+
<em>Check the console-logging</em>!
21+
</p>
22+
`
23+
})
24+
export class AppComponent {
25+
26+
private data: IData;
27+
28+
// I initialize the component.
29+
constructor() {
30+
31+
// Populate our arbitrary collection of data.
32+
this.data = {
33+
foo: "bar",
34+
hello: "world"
35+
};
36+
37+
// Now, let's try to access the data that we just populated. In the first
38+
// approach, we going to use bracket-notation (which clearly uses a string-key).
39+
console.log( "[FOO]:", this.data[ "foo" ] );
40+
41+
// Next, let's try to access the data using dot-notation. This approach should
42+
// be "functionally equivalent" as the previous approach.
43+
// --
44+
// CAUTION: While this is perfectly valid "JavaScript", TypeScript doesn't
45+
// realize that "hello" is a "string" and raises a validation error.
46+
console.log( "[HELLO]:", this.data.hello );
47+
48+
}
49+
50+
}

‎demos/object-notation-typescript-angular2/app/main.ts‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
2+
// Import the core angular services.
3+
import { bootstrap } from "@angular/platform-browser-dynamic";
4+
5+
// Import the application components and services.
6+
import { AppComponent } from "./app.component";
7+
8+
bootstrap( AppComponent );

‎demos/object-notation-typescript-angular2/demo.css‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
2+
my-app {
3+
display: block ;
4+
}
5+
6+
a {
7+
color: red ;
8+
cursor: pointer ;
9+
text-decoration: underline ;
10+
user-select: none ;
11+
-moz-user-select: none ;
12+
-webkit-user-select: none ;
13+
}

‎demos/object-notation-typescript-angular2/index.htm‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
<!doctype html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8" />
5+
6+
<title>
7+
Object Access: Bracket-Notation vs. Dot-Notation With TypeScript In Angular 2 RC 4
8+
</title>
9+
10+
<link rel="stylesheet" type="text/css" href="./demo.css"></link>
11+
12+
<!-- Load libraries (including polyfill(s) for older browsers). -->
13+
<script type="text/javascript" src="../../vendor/angularjs-2-beta/rc4/node_modules/core-js/client/shim.min.js"></script>
14+
<script type="text/javascript" src="../../vendor/angularjs-2-beta/rc4/node_modules/zone.js/dist/zone.js"></script>
15+
<script type="text/javascript" src="../../vendor/angularjs-2-beta/rc4/node_modules/reflect-metadata/Reflect.js"></script>
16+
<script type="text/javascript" src="../../vendor/angularjs-2-beta/rc4/node_modules/systemjs/dist/system.src.js"></script>
17+
18+
<!-- Configure SystemJS loader. -->
19+
<script type="text/javascript" src="./system.config.js"></script>
20+
</head>
21+
<body>
22+
23+
<h1>
24+
Object Access: Bracket-Notation vs. Dot-Notation With TypeScript In Angular 2 RC 4
25+
</h1>
26+
27+
<my-app>
28+
Loading...
29+
</my-app>
30+
31+
</body>
32+
</html>

‎demos/object-notation-typescript-angular2/system.config.js‎

Lines changed: 112 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,112 @@
1+
(function( global ) {
2+
3+
// Alias the path to the common rc4 vendor scripts.
4+
var paths = {
5+
"rc4/*": "../../vendor/angularjs-2-beta/rc4/*"
6+
};
7+
8+
// Tell Angular how normalize path and package aliases.
9+
var map = {
10+
"@angular": "rc4/node_modules/@angular",
11+
"plugin-typescript": "rc4/node_modules/plugin-typescript/lib/plugin.js",
12+
"rxjs": "rc4/node_modules/rxjs",
13+
"tsconfig.json": "rc4/tsconfig.json",
14+
"typescript": "rc4/node_modules/typescript"
15+
};
16+
17+
// Setup meta data for individual areas of the application.
18+
var packages = {
19+
"app": {
20+
main: "main.ts",
21+
defaultExtension: "ts",
22+
meta: {
23+
"*.ts": {
24+
loader: "plugin-typescript"
25+
}
26+
}
27+
},
28+
"rc4/node_modules": {
29+
defaultExtension: "js"
30+
},
31+
"rxjs": {
32+
meta: {
33+
"*.js": {
34+
typings: true
35+
}
36+
}
37+
},
38+
"typescript": {
39+
main: "lib/typescript.js",
40+
meta: {
41+
"lib/typescript.js": {
42+
exports: "ts"
43+
}
44+
}
45+
}
46+
};
47+
48+
var ngPackageNames = [
49+
"common",
50+
"compiler",
51+
"core",
52+
"http",
53+
"platform-browser",
54+
"platform-browser-dynamic",
55+
"router",
56+
"router-deprecated",
57+
"upgrade",
58+
];
59+
60+
ngPackageNames.forEach(
61+
function iterator( packageName ) {
62+
63+
var filename = ( "bundles/" + packageName + ".umd.js" );
64+
65+
var ngPackage = packages[ "@angular/" + packageName ] = {
66+
main: filename,
67+
meta: {}
68+
};
69+
70+
ngPackage.meta[ filename ] = {
71+
typings: ( packageName + "/index.d.ts" )
72+
};
73+
74+
}
75+
);
76+
77+
System.config({
78+
paths: paths,
79+
map: map,
80+
packages: packages,
81+
transpiler: "plugin-typescript",
82+
typescriptOptions: {
83+
tsconfig: true
84+
},
85+
meta: {
86+
typescript: {
87+
exports: "ts"
88+
}
89+
}
90+
});
91+
92+
// Load "./app/main.ts" (gets full path from package configuration above).
93+
global.bootstrapping = System
94+
.import( "app" )
95+
.then(
96+
function handleResolve() {
97+
98+
console.info( "System.js successfully bootstrapped app." );
99+
100+
},
101+
function handleReject( error ) {
102+
103+
console.warn( "System.js could not bootstrap the app." );
104+
console.error( error );
105+
106+
return( Promise.reject( error ) );
107+
108+
}
109+
)
110+
;
111+
112+
})( window );

‎vendor/angularjs-2-beta/rc4/node_modules/.bin/loose-envify‎

Lines changed: 1 addition & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎vendor/angularjs-2-beta/rc4/node_modules/.bin/mkdirp‎

Lines changed: 1 addition & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎vendor/angularjs-2-beta/rc4/node_modules/.bin/nopt‎

Lines changed: 1 addition & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎vendor/angularjs-2-beta/rc4/node_modules/.bin/rc‎

Lines changed: 1 addition & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)