├── .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 | } --------------------------------------------------------------------------------