├── .gitignore
├── LICENSE.md
├── README.md
├── app
├── app.component.js
└── boot.js
├── assets
└── scss
│ └── app.scss
├── dev
├── app.component.ts
└── boot.ts
├── gulpfile.js
├── index.html
├── package.json
├── src
└── css
│ └── app.css
└── tsconfig.json
/.gitignore:
--------------------------------------------------------------------------------
1 | /node_modules
2 | # Created by .ignore support plugin (hsz.mobi)
3 |
--------------------------------------------------------------------------------
/LICENSE.md:
--------------------------------------------------------------------------------
1 | The MIT License (MIT)
2 |
3 | Copyright (c) 2016 Maximilian Schwarzmüller
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.
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # Angular 2 Introduction
2 | # Description
3 | This repository contains all the source code of my YouTube Angular 2 Course: https://www.youtube.com/playlist?list=PL55RiY5tL51olfU2IEqr455EYLkrhmh3n
4 |
5 | Currently only the most recent version of the code is available on GitHub. I'll try to add subfolders for individual lectures in the future.
6 |
7 | ## Get started
8 | To get started, be sure to download my Angular 2 boilerplate: https://github.com/mschwarzmueller/angular-2-beta-boilerplate
9 |
--------------------------------------------------------------------------------
/app/app.component.js:
--------------------------------------------------------------------------------
1 | System.register(['angular2/core', "./new-component.component"], function(exports_1) {
2 | var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
3 | var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
4 | if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
5 | else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
6 | return c > 3 && r && Object.defineProperty(target, key, r), r;
7 | };
8 | var __metadata = (this && this.__metadata) || function (k, v) {
9 | if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
10 | };
11 | var core_1, new_component_component_1;
12 | var AppComponent;
13 | return {
14 | setters:[
15 | function (core_1_1) {
16 | core_1 = core_1_1;
17 | },
18 | function (new_component_component_1_1) {
19 | new_component_component_1 = new_component_component_1_1;
20 | }],
21 | execute: function() {
22 | AppComponent = (function () {
23 | function AppComponent() {
24 | }
25 | AppComponent = __decorate([
26 | core_1.Component({
27 | selector: 'my-app',
28 | template: "\n \n ",
29 | directives: [new_component_component_1.NewComponentComponent]
30 | }),
31 | __metadata('design:paramtypes', [])
32 | ], AppComponent);
33 | return AppComponent;
34 | })();
35 | exports_1("AppComponent", AppComponent);
36 | }
37 | }
38 | });
39 |
40 | //# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImFwcC5jb21wb25lbnQudHMiXSwibmFtZXMiOlsiQXBwQ29tcG9uZW50IiwiQXBwQ29tcG9uZW50LmNvbnN0cnVjdG9yIl0sIm1hcHBpbmdzIjoiOzs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7WUFHQTtnQkFBQUE7Z0JBU0FDLENBQUNBO2dCQVRERDtvQkFBQ0EsZ0JBQVNBLENBQUNBO3dCQUNQQSxRQUFRQSxFQUFFQSxRQUFRQTt3QkFDbEJBLFFBQVFBLEVBQUVBLGlEQUVUQTt3QkFDREEsVUFBVUEsRUFBRUEsQ0FBQ0EsK0NBQXFCQSxDQUFDQTtxQkFDdENBLENBQUNBOztpQ0FHREE7Z0JBQURBLG1CQUFDQTtZQUFEQSxDQVRBLEFBU0NBLElBQUE7WUFURCx1Q0FTQyxDQUFBIiwiZmlsZSI6ImFwcC5jb21wb25lbnQuanMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQge0NvbXBvbmVudH0gZnJvbSAnYW5ndWxhcjIvY29yZSc7XG5pbXBvcnQge05ld0NvbXBvbmVudENvbXBvbmVudH0gZnJvbSBcIi4vbmV3LWNvbXBvbmVudC5jb21wb25lbnRcIjtcblxuQENvbXBvbmVudCh7XG4gICAgc2VsZWN0b3I6ICdteS1hcHAnLFxuICAgIHRlbXBsYXRlOiBgXG4gICAgICAgIDxuZXctY29tcG9uZW50PjwvbmV3LWNvbXBvbmVudD5cbiAgICBgLFxuICAgIGRpcmVjdGl2ZXM6IFtOZXdDb21wb25lbnRDb21wb25lbnRdXG59KVxuZXhwb3J0IGNsYXNzIEFwcENvbXBvbmVudCB7XG5cbn1cbiJdLCJzb3VyY2VSb290IjoiL3NvdXJjZS8ifQ==
41 |
--------------------------------------------------------------------------------
/app/boot.js:
--------------------------------------------------------------------------------
1 | System.register(['angular2/platform/browser', "./app.component", "angular2/router", "angular2/http"], function(exports_1) {
2 | var browser_1, app_component_1, router_1, http_1;
3 | return {
4 | setters:[
5 | function (browser_1_1) {
6 | browser_1 = browser_1_1;
7 | },
8 | function (app_component_1_1) {
9 | app_component_1 = app_component_1_1;
10 | },
11 | function (router_1_1) {
12 | router_1 = router_1_1;
13 | },
14 | function (http_1_1) {
15 | http_1 = http_1_1;
16 | }],
17 | execute: function() {
18 | //noinspection TypeScriptValidateTypes
19 | browser_1.bootstrap(app_component_1.AppComponent, [router_1.ROUTER_PROVIDERS, http_1.HTTP_PROVIDERS]);
20 | }
21 | }
22 | });
23 |
24 | //# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImJvb3QudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6Ijs7Ozs7Ozs7Ozs7Ozs7Ozs7WUFLQSxzQ0FBc0M7WUFDdEMsbUJBQVMsQ0FBQyw0QkFBWSxFQUFFLENBQUMseUJBQWdCLEVBQUUscUJBQWMsQ0FBQyxDQUFDLENBQUMiLCJmaWxlIjoiYm9vdC5qcyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7Ym9vdHN0cmFwfSBmcm9tICdhbmd1bGFyMi9wbGF0Zm9ybS9icm93c2VyJztcbmltcG9ydCB7QXBwQ29tcG9uZW50fSBmcm9tIFwiLi9hcHAuY29tcG9uZW50XCI7XG5pbXBvcnQge1JPVVRFUl9QUk9WSURFUlN9IGZyb20gXCJhbmd1bGFyMi9yb3V0ZXJcIjtcbmltcG9ydCB7SFRUUF9QUk9WSURFUlN9IGZyb20gXCJhbmd1bGFyMi9odHRwXCI7XG5cbi8vbm9pbnNwZWN0aW9uIFR5cGVTY3JpcHRWYWxpZGF0ZVR5cGVzXG5ib290c3RyYXAoQXBwQ29tcG9uZW50LCBbUk9VVEVSX1BST1ZJREVSUywgSFRUUF9QUk9WSURFUlNdKTsiXSwic291cmNlUm9vdCI6Ii9zb3VyY2UvIn0=
25 |
--------------------------------------------------------------------------------
/assets/scss/app.scss:
--------------------------------------------------------------------------------
1 | body {
2 | padding: 32px;
3 | margin: 32px;
4 | font-family: "Roboto", Arial, sans-serif;
5 | font-size: 16px;
6 | }
7 |
--------------------------------------------------------------------------------
/dev/app.component.ts:
--------------------------------------------------------------------------------
1 | import {Component} from 'angular2/core';
2 |
3 | @Component({
4 | selector: 'my-app',
5 | template: `
6 | Hello World
7 | `,
8 | })
9 | export class AppComponent {
10 |
11 | }
12 |
--------------------------------------------------------------------------------
/dev/boot.ts:
--------------------------------------------------------------------------------
1 | import {bootstrap} from 'angular2/platform/browser';
2 | import {AppComponent} from "./app.component";
3 | import {ROUTER_PROVIDERS} from "angular2/router";
4 | import {HTTP_PROVIDERS} from "angular2/http";
5 |
6 | //noinspection TypeScriptValidateTypes
7 | bootstrap(AppComponent, [ROUTER_PROVIDERS, HTTP_PROVIDERS]);
--------------------------------------------------------------------------------
/gulpfile.js:
--------------------------------------------------------------------------------
1 | var gulp = require('gulp');
2 |
3 | var assetsDev = 'assets/';
4 | var assetsProd = 'src/';
5 |
6 | var appDev = 'dev/';
7 | var appProd = 'app/';
8 |
9 | /* Mixed */
10 | var ext_replace = require('gulp-ext-replace');
11 |
12 | /* CSS */
13 | var postcss = require('gulp-postcss');
14 | var sourcemaps = require('gulp-sourcemaps');
15 | var autoprefixer = require('autoprefixer');
16 | var precss = require('precss');
17 | var cssnano = require('cssnano');
18 |
19 | /* JS & TS */
20 | var jsuglify = require('gulp-uglify');
21 | var typescript = require('gulp-typescript');
22 |
23 | /* Images */
24 | var imagemin = require('gulp-imagemin');
25 |
26 | var tsProject = typescript.createProject('tsconfig.json');
27 |
28 | gulp.task('build-css', function () {
29 | return gulp.src(assetsDev + 'scss/*.scss')
30 | .pipe(sourcemaps.init())
31 | .pipe(postcss([precss, autoprefixer, cssnano]))
32 | .pipe(sourcemaps.write())
33 | .pipe(ext_replace('.css'))
34 | .pipe(gulp.dest(assetsProd + 'css/'));
35 | });
36 |
37 | gulp.task('build-ts', function () {
38 | return gulp.src(appDev + '**/*.ts')
39 | .pipe(sourcemaps.init())
40 | .pipe(typescript(tsProject))
41 | .pipe(sourcemaps.write())
42 | //.pipe(jsuglify())
43 | .pipe(gulp.dest(appProd));
44 | });
45 |
46 | gulp.task('build-img', function () {
47 | return gulp.src(assetsDev + 'img/**/*')
48 | .pipe(imagemin({
49 | progressive: true
50 | }))
51 | .pipe(gulp.dest(assetsProd + 'img/'));
52 | });
53 |
54 | gulp.task('build-html', function () {
55 | return gulp.src(appDev + '**/*.html')
56 | .pipe(gulp.dest(appProd));
57 | });
58 |
59 | gulp.task('watch', function () {
60 | gulp.watch(appDev + '**/*.ts', ['build-ts']);
61 | gulp.watch(assetsDev + 'scss/**/*.scss', ['build-css']);
62 | gulp.watch(assetsDev + 'img/*', ['build-img']);
63 | });
64 |
65 | gulp.task('default', ['watch']);
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 | Angular 2 QuickStart
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
28 |
29 |
30 |
31 |
32 |
33 | Loading...
34 |
35 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "angular2-boilerplate",
3 | "version": "1.0.0",
4 | "scripts": {
5 | "lite": "lite-server",
6 | "start": "concurrent \"npm run lite\" "
7 | },
8 | "license": "ISC",
9 | "dependencies": {
10 | "angular2": "2.0.0-beta.3",
11 | "systemjs": "0.19.6",
12 | "es6-promise": "^3.0.2",
13 | "es6-shim": "^0.33.3",
14 | "reflect-metadata": "0.1.2",
15 | "rxjs": "5.0.0-beta.0",
16 | "zone.js": "0.5.11"
17 | },
18 | "devDependencies": {
19 | "autoprefixer": "^6.2.1",
20 | "concurrently": "^1.0.0",
21 | "cssnano": "^3.4.0",
22 | "gulp": "^3.9.0",
23 | "gulp-ext-replace": "^0.2.0",
24 | "gulp-imagemin": "^2.4.0",
25 | "gulp-postcss": "^6.0.1",
26 | "gulp-sourcemaps": "^1.6.0",
27 | "gulp-typescript": "^2.10.0",
28 | "gulp-uglify": "^1.5.1",
29 | "lite-server": "^2.0.1",
30 | "postcss": "^5.0.13",
31 | "postcss-scss": "^0.1.3",
32 | "precss": "^1.3.0",
33 | "tsd": "^0.6.5-beta"
34 | }
35 | }
36 |
--------------------------------------------------------------------------------
/src/css/app.css:
--------------------------------------------------------------------------------
1 | body{padding:32px;margin:32px;font-family:Roboto,Arial,sans-serif;font-size:16px}
--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "target": "ES5",
4 | "module": "system",
5 | "moduleResolution": "node",
6 | "sourceMap": true,
7 | "emitDecoratorMetadata": true,
8 | "experimentalDecorators": true,
9 | "removeComments": false,
10 | "noImplicitAny": false
11 | },
12 | "exclude": [
13 | "node_modules"
14 | ]
15 | }
--------------------------------------------------------------------------------