30 |
33 |
34 |
35 | `
36 | })
37 | export class Angular2RedditAppComponent {
38 | articles: Article[];
39 |
40 | constructor() {
41 | this.articles = [
42 | new Article('Angular 2', 'http://angular.io', 3),
43 | new Article('Fullstack', 'http://fullstack.io', 2),
44 | new Article('Angular Homepage', 'http://angular.io', 1),
45 | ];
46 | }
47 |
48 | addArticle(title: HTMLInputElement, link: HTMLInputElement): void {
49 | console.log(`Adding article title: ${title.value} and link: ${link.value}`);
50 | this.articles.push(new Article(title.value, link.value, 0));
51 | title.value = '';
52 | link.value = '';
53 | }
54 |
55 | sortedArticles(): Article[] {
56 | return this.articles.sort((a: Article, b: Article) => b.votes - a.votes);
57 | }
58 | }
59 |
--------------------------------------------------------------------------------
/src/system-config.ts:
--------------------------------------------------------------------------------
1 | /***********************************************************************************************
2 | * User Configuration.
3 | **********************************************************************************************/
4 | /** Map relative paths to URLs. */
5 | const map: any = {
6 | };
7 |
8 | /** User packages configuration. */
9 | const packages: any = {
10 | };
11 |
12 | ////////////////////////////////////////////////////////////////////////////////////////////////
13 | /***********************************************************************************************
14 | * Everything underneath this line is managed by the CLI.
15 | **********************************************************************************************/
16 | const barrels: string[] = [
17 | // Angular specific barrels.
18 | '@angular/core',
19 | '@angular/common',
20 | '@angular/compiler',
21 | '@angular/http',
22 | '@angular/router',
23 | '@angular/platform-browser',
24 | '@angular/platform-browser-dynamic',
25 |
26 | // Thirdparty barrels.
27 | 'rxjs',
28 |
29 | // App specific barrels.
30 | 'app',
31 | 'app/article',
32 | 'app/shared',
33 | 'app/reddit-article',
34 | 'app/reddit',
35 | /** @cli-barrel */
36 | ];
37 |
38 | const cliSystemConfigPackages: any = {};
39 | barrels.forEach((barrelName: string) => {
40 | cliSystemConfigPackages[barrelName] = { main: 'index' };
41 | });
42 |
43 | /** Type declaration for ambient System. */
44 | declare var System: any;
45 |
46 | // Apply the CLI SystemJS configuration.
47 | System.config({
48 | map: {
49 | '@angular': 'vendor/@angular',
50 | 'rxjs': 'vendor/rxjs',
51 | 'main': 'main.js'
52 | },
53 | packages: cliSystemConfigPackages
54 | });
55 |
56 | // Apply the user's configuration.
57 | System.config({ map, packages });
58 |
--------------------------------------------------------------------------------
/src/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
27 |
39 |
40 |
28 |
29 | 
30 | ng-book 2
31 |
32 |
38 |
30 | ng-book 2
31 |
32 |
33 |
37 | 34 | Angular 2 Simple Reddit 35 |
36 |
41 | Loading...
42 |
43 |
44 |
45 |
46 |
47 |
48 |
49 |
54 |
55 |
56 |
--------------------------------------------------------------------------------
/tslint.json:
--------------------------------------------------------------------------------
1 | {
2 | "rulesDirectory": ["node_modules/codelyzer"],
3 | "rules": {
4 | "max-line-length": [true, 100],
5 | "no-inferrable-types": true,
6 | "class-name": true,
7 | "comment-format": [
8 | true,
9 | "check-space"
10 | ],
11 | "indent": [
12 | true,
13 | "spaces"
14 | ],
15 | "eofline": true,
16 | "no-duplicate-variable": true,
17 | "no-eval": true,
18 | "no-arg": true,
19 | "no-internal-module": true,
20 | "no-trailing-whitespace": true,
21 | "no-bitwise": true,
22 | "no-shadowed-variable": true,
23 | "no-unused-expression": true,
24 | "no-unused-variable": true,
25 | "one-line": [
26 | true,
27 | "check-catch",
28 | "check-else",
29 | "check-open-brace",
30 | "check-whitespace"
31 | ],
32 | "quotemark": [
33 | true,
34 | "single",
35 | "avoid-escape"
36 | ],
37 | "semicolon": [true, "always"],
38 | "typedef-whitespace": [
39 | true,
40 | {
41 | "call-signature": "nospace",
42 | "index-signature": "nospace",
43 | "parameter": "nospace",
44 | "property-declaration": "nospace",
45 | "variable-declaration": "nospace"
46 | }
47 | ],
48 | "curly": true,
49 | "variable-name": [
50 | true,
51 | "ban-keywords",
52 | "check-format",
53 | "allow-trailing-underscore"
54 | ],
55 | "whitespace": [
56 | true,
57 | "check-branch",
58 | "check-decl",
59 | "check-operator",
60 | "check-separator",
61 | "check-type"
62 | ],
63 | "component-selector-name": [true, "kebab-case"],
64 | "component-selector-type": [true, "element"],
65 | "host-parameter-decorator": true,
66 | "input-parameter-decorator": true,
67 | "output-parameter-decorator": true,
68 | "attribute-parameter-decorator": true,
69 | "input-property-directive": true,
70 | "output-property-directive": true
71 | }
72 | }
73 |
--------------------------------------------------------------------------------