├── .gitignore
├── LICENSE
├── README.md
├── build
├── bundle.js
├── bundle.js.map
├── index.html
└── proj
│ ├── hello.css
│ └── hello.html
├── config.js
├── index.html
├── package.json
└── proj
├── app.js
├── hello.css
└── hello.html
/.gitignore:
--------------------------------------------------------------------------------
1 | jspm_packages
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | The MIT License (MIT)
2 |
3 | Copyright (c) 2015 htdt
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 |
23 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | ## Run Angular 2 app with jspm
2 | 0. `npm install -g jspm live-server`
3 | 1. `jspm init`
4 | 2. `jspm install npm:reflect-metadata npm:zone.js npm:angular2`
5 | 3. Add to `config.js`
6 | ```
7 | "traceurOptions": {
8 | "annotations": true,
9 | "memberVariables": true,
10 | "types": true
11 | }
12 | ```
13 | 4. Copy `index.html` and `proj` folder.
14 | 5. Run `live-server` and observe the results.
15 |
16 | *Or just clone this repo and `jspm install`.*
17 |
18 |
19 | ### Bundle project
20 | `jspm bundle-sfx --minify reflect-metadata + zone.js + proj/app build/bundle.js`
21 |
22 |
23 | ### Demo
24 | [http://htdt.github.io/ng2-jspm/build/](http://htdt.github.io/ng2-jspm/build/)
25 |
26 |
27 | ### Hack
28 | `fetch()` is not triggering view update after data load and change.
29 | `jspm_packages/es6-module-loader.js` replacement with [es6-module-loader-sans-promises.js](https://github.com/ModuleLoader/es6-module-loader/blob/v0.16.6/dist/es6-module-loader-sans-promises.js)
30 | solves this problem.
31 |
32 |
33 | ### Other examples
34 | - [ng2-play](https://github.com/pkozlowski-opensource/ng2-play)
35 | - [angular2-webpack-starter](https://github.com/angular-class/angular2-webpack-starter)
36 | - [ngconf2015demo](https://github.com/Microsoft/ngconf2015demo)
37 |
38 |
39 | MIT License
40 |
--------------------------------------------------------------------------------
/build/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | ng2 <3 jspm
6 |
7 |
8 |
9 |
10 |
11 |
12 |
--------------------------------------------------------------------------------
/build/proj/hello.css:
--------------------------------------------------------------------------------
1 | img{
2 | border: 5px solid #7B6091;
3 | }
--------------------------------------------------------------------------------
/build/proj/hello.html:
--------------------------------------------------------------------------------
1 |
2 |
3 | Hello, {{name}}!
4 | ![]()
--------------------------------------------------------------------------------
/config.js:
--------------------------------------------------------------------------------
1 | System.config({
2 | "baseURL": "/",
3 | "transpiler": "traceur",
4 | "traceurOptions": {
5 | "annotations": true,
6 | "memberVariables": true,
7 | "types": true
8 | },
9 | "paths": {
10 | "*": "*.js",
11 | "github:*": "jspm_packages/github/*.js",
12 | "npm:*": "jspm_packages/npm/*.js"
13 | }
14 | });
15 |
16 | System.config({
17 | "map": {
18 | "angular2": "npm:angular2@2.0.0-alpha.25",
19 | "reflect-metadata": "npm:reflect-metadata@0.1.0",
20 | "traceur": "github:jmcriffey/bower-traceur@0.0.88",
21 | "traceur-runtime": "github:jmcriffey/bower-traceur-runtime@0.0.88",
22 | "zone.js": "npm:zone.js@0.5.0",
23 | "github:jspm/nodelibs-assert@0.1.0": {
24 | "assert": "npm:assert@1.3.0"
25 | },
26 | "github:jspm/nodelibs-buffer@0.1.0": {
27 | "buffer": "npm:buffer@3.2.2"
28 | },
29 | "github:jspm/nodelibs-constants@0.1.0": {
30 | "constants-browserify": "npm:constants-browserify@0.0.1"
31 | },
32 | "github:jspm/nodelibs-crypto@0.1.0": {
33 | "crypto-browserify": "npm:crypto-browserify@3.9.14"
34 | },
35 | "github:jspm/nodelibs-events@0.1.0": {
36 | "events-browserify": "npm:events-browserify@0.0.1"
37 | },
38 | "github:jspm/nodelibs-http@1.7.1": {
39 | "Base64": "npm:Base64@0.2.1",
40 | "events": "github:jspm/nodelibs-events@0.1.0",
41 | "inherits": "npm:inherits@2.0.1",
42 | "stream": "github:jspm/nodelibs-stream@0.1.0",
43 | "url": "github:jspm/nodelibs-url@0.1.0",
44 | "util": "github:jspm/nodelibs-util@0.1.0"
45 | },
46 | "github:jspm/nodelibs-path@0.1.0": {
47 | "path-browserify": "npm:path-browserify@0.0.0"
48 | },
49 | "github:jspm/nodelibs-process@0.1.1": {
50 | "process": "npm:process@0.10.1"
51 | },
52 | "github:jspm/nodelibs-querystring@0.1.0": {
53 | "querystring": "npm:querystring@0.2.0"
54 | },
55 | "github:jspm/nodelibs-stream@0.1.0": {
56 | "stream-browserify": "npm:stream-browserify@1.0.0"
57 | },
58 | "github:jspm/nodelibs-url@0.1.0": {
59 | "url": "npm:url@0.10.3"
60 | },
61 | "github:jspm/nodelibs-util@0.1.0": {
62 | "util": "npm:util@0.10.3"
63 | },
64 | "github:jspm/nodelibs-vm@0.1.0": {
65 | "vm-browserify": "npm:vm-browserify@0.0.4"
66 | },
67 | "npm:amdefine@0.1.0": {
68 | "fs": "github:jspm/nodelibs-fs@0.1.2",
69 | "module": "github:jspm/nodelibs-module@0.1.0",
70 | "path": "github:jspm/nodelibs-path@0.1.0",
71 | "process": "github:jspm/nodelibs-process@0.1.1"
72 | },
73 | "npm:angular2@2.0.0-alpha.25": {
74 | "fs": "github:jspm/nodelibs-fs@0.1.2",
75 | "path": "github:jspm/nodelibs-path@0.1.0",
76 | "process": "github:jspm/nodelibs-process@0.1.1",
77 | "rtts_assert": "npm:rtts_assert@2.0.0-alpha.25",
78 | "rx": "npm:rx@2.5.1",
79 | "traceur": "npm:traceur@0.0.87",
80 | "url": "github:jspm/nodelibs-url@0.1.0",
81 | "zone.js": "npm:zone.js@0.5.0"
82 | },
83 | "npm:asn1.js@2.0.3": {
84 | "assert": "github:jspm/nodelibs-assert@0.1.0",
85 | "bn.js": "npm:bn.js@2.0.5",
86 | "buffer": "github:jspm/nodelibs-buffer@0.1.0",
87 | "inherits": "npm:inherits@2.0.1",
88 | "minimalistic-assert": "npm:minimalistic-assert@1.0.0",
89 | "vm": "github:jspm/nodelibs-vm@0.1.0"
90 | },
91 | "npm:assert@1.3.0": {
92 | "util": "npm:util@0.10.3"
93 | },
94 | "npm:brace-expansion@1.1.0": {
95 | "balanced-match": "npm:balanced-match@0.2.0",
96 | "concat-map": "npm:concat-map@0.0.1"
97 | },
98 | "npm:browserify-aes@1.0.1": {
99 | "buffer": "github:jspm/nodelibs-buffer@0.1.0",
100 | "create-hash": "npm:create-hash@1.1.1",
101 | "crypto": "github:jspm/nodelibs-crypto@0.1.0",
102 | "fs": "github:jspm/nodelibs-fs@0.1.2",
103 | "inherits": "npm:inherits@2.0.1",
104 | "stream": "github:jspm/nodelibs-stream@0.1.0",
105 | "systemjs-json": "github:systemjs/plugin-json@0.1.0"
106 | },
107 | "npm:browserify-rsa@2.0.1": {
108 | "bn.js": "npm:bn.js@2.0.5",
109 | "buffer": "github:jspm/nodelibs-buffer@0.1.0",
110 | "constants": "github:jspm/nodelibs-constants@0.1.0",
111 | "crypto": "github:jspm/nodelibs-crypto@0.1.0",
112 | "randombytes": "npm:randombytes@2.0.1"
113 | },
114 | "npm:browserify-sign@3.0.2": {
115 | "bn.js": "npm:bn.js@2.0.5",
116 | "browserify-rsa": "npm:browserify-rsa@2.0.1",
117 | "buffer": "github:jspm/nodelibs-buffer@0.1.0",
118 | "create-hash": "npm:create-hash@1.1.1",
119 | "create-hmac": "npm:create-hmac@1.1.3",
120 | "crypto": "github:jspm/nodelibs-crypto@0.1.0",
121 | "elliptic": "npm:elliptic@3.0.3",
122 | "inherits": "npm:inherits@2.0.1",
123 | "parse-asn1": "npm:parse-asn1@3.0.1",
124 | "stream": "github:jspm/nodelibs-stream@0.1.0",
125 | "systemjs-json": "github:systemjs/plugin-json@0.1.0"
126 | },
127 | "npm:buffer@3.2.2": {
128 | "base64-js": "npm:base64-js@0.0.8",
129 | "ieee754": "npm:ieee754@1.1.5",
130 | "is-array": "npm:is-array@1.0.1"
131 | },
132 | "npm:commander@2.6.0": {
133 | "child_process": "github:jspm/nodelibs-child_process@0.1.0",
134 | "events": "github:jspm/nodelibs-events@0.1.0",
135 | "path": "github:jspm/nodelibs-path@0.1.0",
136 | "process": "github:jspm/nodelibs-process@0.1.1"
137 | },
138 | "npm:constants-browserify@0.0.1": {
139 | "systemjs-json": "github:systemjs/plugin-json@0.1.0"
140 | },
141 | "npm:core-util-is@1.0.1": {
142 | "buffer": "github:jspm/nodelibs-buffer@0.1.0"
143 | },
144 | "npm:create-ecdh@2.0.1": {
145 | "bn.js": "npm:bn.js@2.0.5",
146 | "buffer": "github:jspm/nodelibs-buffer@0.1.0",
147 | "crypto": "github:jspm/nodelibs-crypto@0.1.0",
148 | "elliptic": "npm:elliptic@3.0.3"
149 | },
150 | "npm:create-hash@1.1.1": {
151 | "buffer": "github:jspm/nodelibs-buffer@0.1.0",
152 | "crypto": "github:jspm/nodelibs-crypto@0.1.0",
153 | "fs": "github:jspm/nodelibs-fs@0.1.2",
154 | "inherits": "npm:inherits@2.0.1",
155 | "ripemd160": "npm:ripemd160@1.0.1",
156 | "sha.js": "npm:sha.js@2.4.1",
157 | "stream": "github:jspm/nodelibs-stream@0.1.0"
158 | },
159 | "npm:create-hmac@1.1.3": {
160 | "buffer": "github:jspm/nodelibs-buffer@0.1.0",
161 | "create-hash": "npm:create-hash@1.1.1",
162 | "crypto": "github:jspm/nodelibs-crypto@0.1.0",
163 | "inherits": "npm:inherits@2.0.1",
164 | "stream": "github:jspm/nodelibs-stream@0.1.0"
165 | },
166 | "npm:crypto-browserify@3.9.14": {
167 | "browserify-aes": "npm:browserify-aes@1.0.1",
168 | "browserify-sign": "npm:browserify-sign@3.0.2",
169 | "create-ecdh": "npm:create-ecdh@2.0.1",
170 | "create-hash": "npm:create-hash@1.1.1",
171 | "create-hmac": "npm:create-hmac@1.1.3",
172 | "diffie-hellman": "npm:diffie-hellman@3.0.2",
173 | "inherits": "npm:inherits@2.0.1",
174 | "pbkdf2": "npm:pbkdf2@3.0.4",
175 | "public-encrypt": "npm:public-encrypt@2.0.1",
176 | "randombytes": "npm:randombytes@2.0.1"
177 | },
178 | "npm:diffie-hellman@3.0.2": {
179 | "bn.js": "npm:bn.js@2.0.5",
180 | "buffer": "github:jspm/nodelibs-buffer@0.1.0",
181 | "crypto": "github:jspm/nodelibs-crypto@0.1.0",
182 | "miller-rabin": "npm:miller-rabin@2.0.1",
183 | "randombytes": "npm:randombytes@2.0.1",
184 | "systemjs-json": "github:systemjs/plugin-json@0.1.0"
185 | },
186 | "npm:elliptic@3.0.3": {
187 | "bn.js": "npm:bn.js@2.0.5",
188 | "brorand": "npm:brorand@1.0.5",
189 | "hash.js": "npm:hash.js@1.0.3",
190 | "inherits": "npm:inherits@2.0.1",
191 | "systemjs-json": "github:systemjs/plugin-json@0.1.0"
192 | },
193 | "npm:events-browserify@0.0.1": {
194 | "process": "github:jspm/nodelibs-process@0.1.1"
195 | },
196 | "npm:glob@4.3.5": {
197 | "assert": "github:jspm/nodelibs-assert@0.1.0",
198 | "events": "github:jspm/nodelibs-events@0.1.0",
199 | "fs": "github:jspm/nodelibs-fs@0.1.2",
200 | "inflight": "npm:inflight@1.0.4",
201 | "inherits": "npm:inherits@2.0.1",
202 | "minimatch": "npm:minimatch@2.0.8",
203 | "once": "npm:once@1.3.2",
204 | "path": "github:jspm/nodelibs-path@0.1.0",
205 | "process": "github:jspm/nodelibs-process@0.1.1",
206 | "util": "github:jspm/nodelibs-util@0.1.0"
207 | },
208 | "npm:hash.js@1.0.3": {
209 | "inherits": "npm:inherits@2.0.1"
210 | },
211 | "npm:inflight@1.0.4": {
212 | "once": "npm:once@1.3.2",
213 | "process": "github:jspm/nodelibs-process@0.1.1",
214 | "wrappy": "npm:wrappy@1.0.1"
215 | },
216 | "npm:inherits@2.0.1": {
217 | "util": "github:jspm/nodelibs-util@0.1.0"
218 | },
219 | "npm:miller-rabin@2.0.1": {
220 | "bn.js": "npm:bn.js@2.0.5",
221 | "brorand": "npm:brorand@1.0.5"
222 | },
223 | "npm:minimatch@2.0.8": {
224 | "brace-expansion": "npm:brace-expansion@1.1.0",
225 | "path": "github:jspm/nodelibs-path@0.1.0"
226 | },
227 | "npm:once@1.3.2": {
228 | "wrappy": "npm:wrappy@1.0.1"
229 | },
230 | "npm:parse-asn1@3.0.1": {
231 | "asn1.js": "npm:asn1.js@2.0.3",
232 | "browserify-aes": "npm:browserify-aes@1.0.1",
233 | "buffer": "github:jspm/nodelibs-buffer@0.1.0",
234 | "create-hash": "npm:create-hash@1.1.1",
235 | "pbkdf2": "npm:pbkdf2@3.0.4",
236 | "systemjs-json": "github:systemjs/plugin-json@0.1.0"
237 | },
238 | "npm:path-browserify@0.0.0": {
239 | "process": "github:jspm/nodelibs-process@0.1.1"
240 | },
241 | "npm:pbkdf2@3.0.4": {
242 | "buffer": "github:jspm/nodelibs-buffer@0.1.0",
243 | "child_process": "github:jspm/nodelibs-child_process@0.1.0",
244 | "create-hmac": "npm:create-hmac@1.1.3",
245 | "crypto": "github:jspm/nodelibs-crypto@0.1.0",
246 | "path": "github:jspm/nodelibs-path@0.1.0",
247 | "process": "github:jspm/nodelibs-process@0.1.1",
248 | "systemjs-json": "github:systemjs/plugin-json@0.1.0"
249 | },
250 | "npm:public-encrypt@2.0.1": {
251 | "bn.js": "npm:bn.js@2.0.5",
252 | "browserify-rsa": "npm:browserify-rsa@2.0.1",
253 | "buffer": "github:jspm/nodelibs-buffer@0.1.0",
254 | "create-hash": "npm:create-hash@1.1.1",
255 | "crypto": "github:jspm/nodelibs-crypto@0.1.0",
256 | "parse-asn1": "npm:parse-asn1@3.0.1",
257 | "randombytes": "npm:randombytes@2.0.1"
258 | },
259 | "npm:punycode@1.3.2": {
260 | "process": "github:jspm/nodelibs-process@0.1.1"
261 | },
262 | "npm:randombytes@2.0.1": {
263 | "buffer": "github:jspm/nodelibs-buffer@0.1.0",
264 | "crypto": "github:jspm/nodelibs-crypto@0.1.0",
265 | "process": "github:jspm/nodelibs-process@0.1.1"
266 | },
267 | "npm:readable-stream@1.1.13": {
268 | "buffer": "github:jspm/nodelibs-buffer@0.1.0",
269 | "core-util-is": "npm:core-util-is@1.0.1",
270 | "events": "github:jspm/nodelibs-events@0.1.0",
271 | "inherits": "npm:inherits@2.0.1",
272 | "isarray": "npm:isarray@0.0.1",
273 | "process": "github:jspm/nodelibs-process@0.1.1",
274 | "stream": "github:jspm/nodelibs-stream@0.1.0",
275 | "stream-browserify": "npm:stream-browserify@1.0.0",
276 | "string_decoder": "npm:string_decoder@0.10.31",
277 | "util": "github:jspm/nodelibs-util@0.1.0"
278 | },
279 | "npm:reflect-metadata@0.1.0": {
280 | "assert": "github:jspm/nodelibs-assert@0.1.0",
281 | "crypto": "github:jspm/nodelibs-crypto@0.1.0"
282 | },
283 | "npm:ripemd160@1.0.1": {
284 | "buffer": "github:jspm/nodelibs-buffer@0.1.0",
285 | "process": "github:jspm/nodelibs-process@0.1.1"
286 | },
287 | "npm:rsvp@3.0.18": {
288 | "assert": "github:jspm/nodelibs-assert@0.1.0",
289 | "process": "github:jspm/nodelibs-process@0.1.1",
290 | "util": "github:jspm/nodelibs-util@0.1.0"
291 | },
292 | "npm:rtts_assert@2.0.0-alpha.25": {
293 | "fs": "github:jspm/nodelibs-fs@0.1.2",
294 | "path": "github:jspm/nodelibs-path@0.1.0"
295 | },
296 | "npm:rx@2.5.1": {
297 | "process": "github:jspm/nodelibs-process@0.1.1"
298 | },
299 | "npm:semver@2.3.2": {
300 | "process": "github:jspm/nodelibs-process@0.1.1"
301 | },
302 | "npm:sha.js@2.4.1": {
303 | "buffer": "github:jspm/nodelibs-buffer@0.1.0",
304 | "fs": "github:jspm/nodelibs-fs@0.1.2",
305 | "inherits": "npm:inherits@2.0.1",
306 | "process": "github:jspm/nodelibs-process@0.1.1"
307 | },
308 | "npm:source-map-support@0.2.10": {
309 | "assert": "github:jspm/nodelibs-assert@0.1.0",
310 | "buffer": "github:jspm/nodelibs-buffer@0.1.0",
311 | "child_process": "github:jspm/nodelibs-child_process@0.1.0",
312 | "fs": "github:jspm/nodelibs-fs@0.1.2",
313 | "http": "github:jspm/nodelibs-http@1.7.1",
314 | "path": "github:jspm/nodelibs-path@0.1.0",
315 | "process": "github:jspm/nodelibs-process@0.1.1",
316 | "querystring": "github:jspm/nodelibs-querystring@0.1.0",
317 | "source-map": "npm:source-map@0.1.32"
318 | },
319 | "npm:source-map@0.1.32": {
320 | "amdefine": "npm:amdefine@0.1.0",
321 | "fs": "github:jspm/nodelibs-fs@0.1.2",
322 | "path": "github:jspm/nodelibs-path@0.1.0",
323 | "process": "github:jspm/nodelibs-process@0.1.1"
324 | },
325 | "npm:stream-browserify@1.0.0": {
326 | "events": "github:jspm/nodelibs-events@0.1.0",
327 | "inherits": "npm:inherits@2.0.1",
328 | "readable-stream": "npm:readable-stream@1.1.13"
329 | },
330 | "npm:string_decoder@0.10.31": {
331 | "buffer": "github:jspm/nodelibs-buffer@0.1.0"
332 | },
333 | "npm:traceur@0.0.87": {
334 | "buffer": "github:jspm/nodelibs-buffer@0.1.0",
335 | "commander": "npm:commander@2.6.0",
336 | "fs": "github:jspm/nodelibs-fs@0.1.2",
337 | "glob": "npm:glob@4.3.5",
338 | "module": "github:jspm/nodelibs-module@0.1.0",
339 | "path": "github:jspm/nodelibs-path@0.1.0",
340 | "process": "github:jspm/nodelibs-process@0.1.1",
341 | "rsvp": "npm:rsvp@3.0.18",
342 | "semver": "npm:semver@2.3.2",
343 | "source-map-support": "npm:source-map-support@0.2.10",
344 | "systemjs-json": "github:systemjs/plugin-json@0.1.0",
345 | "util": "github:jspm/nodelibs-util@0.1.0"
346 | },
347 | "npm:url@0.10.3": {
348 | "assert": "github:jspm/nodelibs-assert@0.1.0",
349 | "punycode": "npm:punycode@1.3.2",
350 | "querystring": "npm:querystring@0.2.0",
351 | "util": "github:jspm/nodelibs-util@0.1.0"
352 | },
353 | "npm:util@0.10.3": {
354 | "inherits": "npm:inherits@2.0.1",
355 | "process": "github:jspm/nodelibs-process@0.1.1"
356 | },
357 | "npm:vm-browserify@0.0.4": {
358 | "indexof": "npm:indexof@0.0.1"
359 | },
360 | "npm:zone.js@0.5.0": {
361 | "process": "github:jspm/nodelibs-process@0.1.1"
362 | }
363 | }
364 | });
365 |
366 |
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | ng2 <3 jspm
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
18 |
19 |
20 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "jspm": {
3 | "directories": {},
4 | "dependencies": {
5 | "angular2": "npm:angular2@^2.0.0-alpha.25",
6 | "reflect-metadata": "npm:reflect-metadata@^0.1.0",
7 | "zone.js": "npm:zone.js@^0.5.0"
8 | },
9 | "devDependencies": {
10 | "traceur": "github:jmcriffey/bower-traceur@0.0.88",
11 | "traceur-runtime": "github:jmcriffey/bower-traceur-runtime@0.0.88"
12 | }
13 | }
14 | }
15 |
--------------------------------------------------------------------------------
/proj/app.js:
--------------------------------------------------------------------------------
1 | import {bootstrap, ComponentAnnotation as Component, ViewAnnotation as View, Injectable} from 'angular2/angular2';
2 | import {NgIf} from 'angular2/angular2';
3 |
4 |
5 | @Injectable()
6 | class ImagesFactory {
7 | getUrls(): Array {
8 | let url = 'http://www.reddit.com/r/perfectloops/top.json?sort=top&t=week'
9 | return fetch(url)
10 | .then(response => response.json())
11 | .then(json => json.data.children
12 | .map(a => a.data.url)
13 | .filter(a => /\.(gif|jpg|png)$/.exec(a)));
14 |
15 | }
16 | }
17 |
18 | @Component({
19 | selector: 'my-app',
20 | appInjector: [ImagesFactory]
21 | })
22 | @View({
23 | templateUrl: "proj/hello.html",
24 | directives: [NgIf]
25 | })
26 | class MyAppComponent {
27 | name: string;
28 | img: string;
29 |
30 | constructor(images: ImagesFactory) {
31 | this.name = "world";
32 | images.getUrls().then(ar => this.img = ar[0]);
33 | }
34 | }
35 |
36 | bootstrap(MyAppComponent);
37 |
--------------------------------------------------------------------------------
/proj/hello.css:
--------------------------------------------------------------------------------
1 | img{
2 | border: 5px solid #7B6091;
3 | }
--------------------------------------------------------------------------------
/proj/hello.html:
--------------------------------------------------------------------------------
1 |
2 |
3 | Hello, {{name}}!
4 | ![]()
--------------------------------------------------------------------------------