├── angular-2-starter ├── styles.css ├── app │ ├── main.ts │ └── app.component.ts ├── typings.json ├── tsconfig.json ├── package.json ├── index.html └── systemjs.config.js ├── .gitignore ├── portfolio-site ├── app │ ├── detail │ │ ├── detail.css │ │ ├── detail.html │ │ └── detail.component.ts │ ├── about │ │ ├── about.css │ │ ├── images │ │ │ └── us.jpg │ │ ├── about.component.ts │ │ └── about.html │ ├── error │ │ ├── error.css │ │ ├── error.component.ts │ │ └── error.html │ ├── shared │ │ ├── images │ │ │ ├── image1.jpg │ │ │ ├── image2.jpg │ │ │ ├── image3.jpg │ │ │ ├── image4.jpg │ │ │ └── image5.jpg │ │ ├── project-interface.ts │ │ ├── trunc.pipe.ts │ │ ├── project.service.ts │ │ └── projects.ts │ ├── home │ │ ├── images │ │ │ └── businessmen.jpg │ │ ├── home.css │ │ ├── home.html │ │ └── home.component.ts │ ├── projects │ │ ├── projects.css │ │ ├── projects.html │ │ └── projects.component.ts │ ├── main.ts │ └── root │ │ ├── root.component.ts │ │ ├── root.routes.ts │ │ └── root.html ├── typings.json ├── tsconfig.json ├── index.html ├── package.json ├── styles.css └── systemjs.config.js ├── LICENSE └── README.md /angular-2-starter/styles.css: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | typings 3 | */app/**/*.js 4 | */app/**/*.js.map 5 | -------------------------------------------------------------------------------- /portfolio-site/app/detail/detail.css: -------------------------------------------------------------------------------- 1 | img { 2 | height: 80%; 3 | width: 100%; 4 | } 5 | 6 | -------------------------------------------------------------------------------- /portfolio-site/app/about/about.css: -------------------------------------------------------------------------------- 1 | .about{ 2 | height: 50%; 3 | width: 100% 4 | } 5 | 6 | .about-row{ 7 | padding-top: 7%; 8 | } -------------------------------------------------------------------------------- /portfolio-site/app/about/images/us.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tutsplus/create-a-portfolio-site-with-angular-2/HEAD/portfolio-site/app/about/images/us.jpg -------------------------------------------------------------------------------- /portfolio-site/app/error/error.css: -------------------------------------------------------------------------------- 1 | .error-row{ 2 | margin-top: 7%; 3 | height: 100%; 4 | color: black; 5 | } 6 | 7 | .spacer { 8 | height: 40%; 9 | } -------------------------------------------------------------------------------- /portfolio-site/app/shared/images/image1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tutsplus/create-a-portfolio-site-with-angular-2/HEAD/portfolio-site/app/shared/images/image1.jpg -------------------------------------------------------------------------------- /portfolio-site/app/shared/images/image2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tutsplus/create-a-portfolio-site-with-angular-2/HEAD/portfolio-site/app/shared/images/image2.jpg -------------------------------------------------------------------------------- /portfolio-site/app/shared/images/image3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tutsplus/create-a-portfolio-site-with-angular-2/HEAD/portfolio-site/app/shared/images/image3.jpg -------------------------------------------------------------------------------- /portfolio-site/app/shared/images/image4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tutsplus/create-a-portfolio-site-with-angular-2/HEAD/portfolio-site/app/shared/images/image4.jpg -------------------------------------------------------------------------------- /portfolio-site/app/shared/images/image5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tutsplus/create-a-portfolio-site-with-angular-2/HEAD/portfolio-site/app/shared/images/image5.jpg -------------------------------------------------------------------------------- /portfolio-site/app/shared/project-interface.ts: -------------------------------------------------------------------------------- 1 | export interface Project { 2 | id: number; 3 | name: string; 4 | info: string; 5 | image: string; 6 | } -------------------------------------------------------------------------------- /portfolio-site/app/home/images/businessmen.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tutsplus/create-a-portfolio-site-with-angular-2/HEAD/portfolio-site/app/home/images/businessmen.jpg -------------------------------------------------------------------------------- /angular-2-starter/app/main.ts: -------------------------------------------------------------------------------- 1 | import { bootstrap } from '@angular/platform-browser-dynamic'; 2 | import { AppComponent } from './app.component'; 3 | 4 | bootstrap(AppComponent); 5 | -------------------------------------------------------------------------------- /angular-2-starter/app/app.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | @Component({ 3 | selector: 'my-app', 4 | template: '

My First Angular 2 App

' 5 | }) 6 | export class AppComponent { } 7 | -------------------------------------------------------------------------------- /portfolio-site/app/about/about.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | 3 | @Component({ 4 | templateUrl: 'app/about/about.html', 5 | styleUrls: ['app/about/about.css'], 6 | }) 7 | export class AboutComponent { } -------------------------------------------------------------------------------- /portfolio-site/app/error/error.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | 3 | @Component({ 4 | templateUrl: 'app/error/error.html', 5 | styleUrls: ['app/error/error.css'], 6 | }) 7 | export class ErrorComponent { } -------------------------------------------------------------------------------- /portfolio-site/app/projects/projects.css: -------------------------------------------------------------------------------- 1 | .spacer { 2 | padding-top: 10%; 3 | padding-bottom: 5%; 4 | } 5 | 6 | .btn-app{ 7 | border-top: 1px solid black; 8 | border-bottom: 1px solid black; 9 | color: black; 10 | } -------------------------------------------------------------------------------- /portfolio-site/typings.json: -------------------------------------------------------------------------------- 1 | { 2 | "globalDependencies": { 3 | "core-js": "registry:dt/core-js#0.0.0+20160602141332", 4 | "jasmine": "registry:dt/jasmine#2.2.0+20160621224255", 5 | "node": "registry:dt/node#6.0.0+20160621231320" 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /angular-2-starter/typings.json: -------------------------------------------------------------------------------- 1 | { 2 | "globalDependencies": { 3 | "core-js": "registry:dt/core-js#0.0.0+20160602141332", 4 | "jasmine": "registry:dt/jasmine#2.2.0+20160621224255", 5 | "node": "registry:dt/node#6.0.0+20160621231320" 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /portfolio-site/app/main.ts: -------------------------------------------------------------------------------- 1 | import { bootstrap } from '@angular/platform-browser-dynamic'; 2 | import { RootComponent } from './root/root.component'; 3 | import { myRouterProviders } from './root/root.routes'; 4 | 5 | bootstrap(RootComponent, [myRouterProviders]); 6 | 7 | -------------------------------------------------------------------------------- /portfolio-site/app/root/root.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | import { ROUTER_DIRECTIVES } from '@angular/router'; 3 | 4 | @Component({ 5 | selector: 'my-app', 6 | templateUrl: 'app/root/root.html', 7 | directives: [ROUTER_DIRECTIVES] 8 | }) 9 | export class RootComponent { } -------------------------------------------------------------------------------- /portfolio-site/app/error/error.html: -------------------------------------------------------------------------------- 1 |
2 | 3 |
4 | 5 |
6 |
7 | 8 |

ERROR - NO PAGE EXISTS WITH THIS NAME!

9 | 10 |
11 | 12 | 13 |
14 | 15 | -------------------------------------------------------------------------------- /portfolio-site/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "es5", 4 | "module": "commonjs", 5 | "moduleResolution": "node", 6 | "sourceMap": true, 7 | "emitDecoratorMetadata": true, 8 | "experimentalDecorators": true, 9 | "removeComments": false, 10 | "noImplicitAny": false 11 | } 12 | } 13 | -------------------------------------------------------------------------------- /angular-2-starter/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "es5", 4 | "module": "commonjs", 5 | "moduleResolution": "node", 6 | "sourceMap": true, 7 | "emitDecoratorMetadata": true, 8 | "experimentalDecorators": true, 9 | "removeComments": false, 10 | "noImplicitAny": false 11 | } 12 | } 13 | -------------------------------------------------------------------------------- /portfolio-site/app/shared/trunc.pipe.ts: -------------------------------------------------------------------------------- 1 | import { Pipe, PipeTransform } from '@angular/core'; 2 | 3 | @Pipe({name: 'truncate'}) 4 | export class TruncatePipe implements PipeTransform { 5 | transform(value: string, args: string[]): any { 6 | 7 | let text = value.substring(0, 180) + '...'; 8 | 9 | return text; 10 | 11 | } 12 | } -------------------------------------------------------------------------------- /portfolio-site/app/shared/project.service.ts: -------------------------------------------------------------------------------- 1 | import { Injectable } from '@angular/core'; 2 | import { ourProjects } from './projects'; 3 | 4 | @Injectable() 5 | export class ProjectService { 6 | projectPromise = Promise.resolve(ourProjects); 7 | 8 | getProjects(){ 9 | return this.projectPromise; 10 | } 11 | 12 | getOneProject(id: number | string){ 13 | return this.projectPromise 14 | .then(project => project.find(project => project.id === +id)); 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /portfolio-site/app/detail/detail.html: -------------------------------------------------------------------------------- 1 |
2 | 3 |
4 | Generic placeholder image 5 |
6 | 7 |
8 | 9 |
10 |

{{project.name}}

11 |
12 |
13 |

{{project.info}}

14 |
15 | 16 |
17 | 18 |
-------------------------------------------------------------------------------- /portfolio-site/app/home/home.css: -------------------------------------------------------------------------------- 1 | .jumbotron { 2 | margin-top: 2%; 3 | padding: 0; 4 | max-height: 40%; 5 | } 6 | 7 | .jumbo { 8 | width: 100%; 9 | height: 100%; 10 | } 11 | 12 | .projects { 13 | padding: 20; 14 | 15 | } 16 | 17 | .projects p { 18 | margin-right: 20px; 19 | margin-left: 20px; 20 | } 21 | 22 | .btn-app{ 23 | border-top: 1px solid black; 24 | border-bottom: 1px solid black; 25 | color: black; 26 | } 27 | 28 | .spacer { 29 | min-height: 3%; 30 | } 31 | -------------------------------------------------------------------------------- /portfolio-site/app/projects/projects.html: -------------------------------------------------------------------------------- 1 |
2 | 3 |
4 |

All of our projects

5 |
6 | 7 |
8 |
9 | Generic placeholder image 10 |

{{project.name}}

11 |

{{project.info | truncate}}

12 |

13 |
14 |
15 | 16 |
-------------------------------------------------------------------------------- /portfolio-site/app/detail/detail.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, OnInit } from '@angular/core'; 2 | import { Router, ActivatedRoute } from '@angular/router'; 3 | import { ProjectService } from '../shared/project.service'; 4 | import { Project } from '../shared/project-interface'; 5 | 6 | @Component({ 7 | templateUrl: 'app/detail/detail.html', 8 | styleUrls: ['app/detail/detail.css'] 9 | }) 10 | export class DetailComponent implements OnInit{ 11 | project: Project; 12 | 13 | constructor( private route: ActivatedRoute, private router: Router, private _projectService: ProjectService) {} 14 | 15 | ngOnInit() { 16 | let id = +this.route.snapshot.params['id']; 17 | this._projectService.getOneProject(id).then(project => this.project = project); 18 | } 19 | } -------------------------------------------------------------------------------- /portfolio-site/app/home/home.html: -------------------------------------------------------------------------------- 1 |
2 | 3 |
4 |
5 | 6 |
7 |
8 |

Some of the projects we built

9 |
10 |
11 | 12 |
13 |
14 | 15 |
16 |
17 | Generic placeholder image 18 |

{{project.name}}

19 |

{{project.info | truncate}}

20 |

21 |
22 |
23 | 24 |
25 | 26 | -------------------------------------------------------------------------------- /portfolio-site/app/projects/projects.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, OnInit } from '@angular/core'; 2 | import { ProjectService } from '../shared/project.service'; 3 | import { Project } from '../shared/project-interface'; 4 | import { Router } from '@angular/router'; 5 | import { TruncatePipe } from '../shared/trunc.pipe'; 6 | 7 | @Component({ 8 | templateUrl: 'app/projects/projects.html', 9 | styleUrls: ['app/projects/projects.css'], 10 | pipes: [TruncatePipe] 11 | }) 12 | 13 | export class ProjectsComponent implements OnInit { 14 | 15 | projects: Project[]; 16 | 17 | constructor ( public _projectService: ProjectService, public router: Router ) {} 18 | 19 | chooseProject(project){ 20 | this.router.navigate(['detail', project.id]); 21 | } 22 | 23 | ngOnInit() { 24 | this._projectService.getProjects().then(projects => this.projects = projects); 25 | } 26 | 27 | } -------------------------------------------------------------------------------- /portfolio-site/app/root/root.routes.ts: -------------------------------------------------------------------------------- 1 | import { provideRouter, RouterConfig } from '@angular/router'; 2 | import { HomeComponent } from '../home/home.component'; 3 | import { DetailComponent } from '../detail/detail.component'; 4 | import {ProjectsComponent } from '../projects/projects.component'; 5 | import {AboutComponent } from '../about/about.component'; 6 | import {ErrorComponent } from '../error/error.component'; 7 | import { ProjectService } from '../shared/project.service'; 8 | 9 | const routes: RouterConfig = [ 10 | { path: '', redirectTo: 'home', pathMatch: 'full' }, 11 | { path: 'home', component: HomeComponent }, 12 | { path: 'detail/:id', component: DetailComponent }, 13 | { path: 'projects', component: ProjectsComponent }, 14 | { path: 'about', component: AboutComponent }, 15 | { path: '**', component: ErrorComponent } 16 | ]; 17 | 18 | export const myRouterProviders = [ 19 | provideRouter(routes), 20 | ProjectService 21 | ]; -------------------------------------------------------------------------------- /portfolio-site/app/home/home.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, OnInit } from '@angular/core'; 2 | import { ROUTER_DIRECTIVES } from '@angular/router'; 3 | import { ProjectService } from '../shared/project.service'; 4 | import { Project } from '../shared/project-interface'; 5 | import { Router } from '@angular/router'; 6 | import { TruncatePipe } from '../shared/trunc.pipe'; 7 | 8 | @Component({ 9 | templateUrl: 'app/home/home.html', 10 | directives: [ROUTER_DIRECTIVES], 11 | styleUrls: ['app/home/home.css'], 12 | pipes: [TruncatePipe] 13 | }) 14 | 15 | export class HomeComponent implements OnInit { 16 | projects: Project[]; 17 | 18 | constructor ( public _projectService: ProjectService, public router: Router ) {} 19 | 20 | chooseProject(project){ 21 | this.router.navigate(['detail', project.id]); 22 | } 23 | 24 | ngOnInit() { 25 | this._projectService.getProjects() 26 | .then(projects => projects.slice(-3)) 27 | .then(projects => this.projects = projects); 28 | } 29 | 30 | } -------------------------------------------------------------------------------- /portfolio-site/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | The Developers 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 22 | 23 | 24 | 25 | Loading... 26 | 27 | 28 | -------------------------------------------------------------------------------- /portfolio-site/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "angular2-portfolio", 3 | "version": "1.0.0", 4 | "scripts": { 5 | "start": "tsc && concurrently \"npm run tsc:w\" \"npm run lite\" ", 6 | "lite": "lite-server", 7 | "postinstall": "typings install", 8 | "tsc": "tsc", 9 | "tsc:w": "tsc -w", 10 | "typings": "typings" 11 | }, 12 | "license": "ISC", 13 | "dependencies": { 14 | "@angular/common": "2.0.0-rc.4", 15 | "@angular/compiler": "2.0.0-rc.4", 16 | "@angular/core": "2.0.0-rc.4", 17 | "@angular/forms": "0.2.0", 18 | "@angular/http": "2.0.0-rc.4", 19 | "@angular/platform-browser": "2.0.0-rc.4", 20 | "@angular/platform-browser-dynamic": "2.0.0-rc.4", 21 | "@angular/router": "3.0.0-beta.2", 22 | "@angular/upgrade": "2.0.0-rc.4", 23 | "systemjs": "0.19.27", 24 | "core-js": "^2.4.0", 25 | "reflect-metadata": "^0.1.3", 26 | "rxjs": "5.0.0-beta.6", 27 | "zone.js": "^0.6.12", 28 | "bootstrap": "^3.3.7", 29 | "jquery": "^3.1.0" 30 | }, 31 | "devDependencies": { 32 | "concurrently": "^2.0.0", 33 | "lite-server": "^2.2.0", 34 | "typescript": "^1.8.10", 35 | "typings":"^1.0.4" 36 | } 37 | } 38 | -------------------------------------------------------------------------------- /angular-2-starter/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "angular2-quickstart", 3 | "version": "1.0.0", 4 | "scripts": { 5 | "start": "tsc && concurrently \"npm run tsc:w\" \"npm run lite\" ", 6 | "lite": "lite-server", 7 | "postinstall": "typings install", 8 | "tsc": "tsc", 9 | "tsc:w": "tsc -w", 10 | "typings": "typings" 11 | }, 12 | "license": "ISC", 13 | "dependencies": { 14 | "@angular/common": "2.0.0-rc.4", 15 | "@angular/compiler": "2.0.0-rc.4", 16 | "@angular/core": "2.0.0-rc.4", 17 | "@angular/forms": "0.2.0", 18 | "@angular/http": "2.0.0-rc.4", 19 | "@angular/platform-browser": "2.0.0-rc.4", 20 | "@angular/platform-browser-dynamic": "2.0.0-rc.4", 21 | "@angular/router": "3.0.0-beta.2", 22 | "@angular/upgrade": "2.0.0-rc.4", 23 | "systemjs": "0.19.27", 24 | "core-js": "^2.4.0", 25 | "reflect-metadata": "^0.1.3", 26 | "rxjs": "5.0.0-beta.6", 27 | "zone.js": "^0.6.12",\ 28 | "bootstrap": "^3.3.7", 29 | "jquery": "^3.1.0" 30 | 31 | }, 32 | "devDependencies": { 33 | "concurrently": "^2.0.0", 34 | "lite-server": "^2.2.0", 35 | "typescript": "^1.8.10", 36 | "typings":"^1.0.4" 37 | } 38 | } 39 | -------------------------------------------------------------------------------- /angular-2-starter/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | ***TITLE GOES HERE*** 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 23 | 24 | 25 | 26 | Loading... 27 | 28 | 29 | -------------------------------------------------------------------------------- /portfolio-site/styles.css: -------------------------------------------------------------------------------- 1 | body { 2 | background-color: white; 3 | color: black; 4 | } 5 | 6 | /* CUSTOMIZE THE NAVBAR 7 | -------------------------------------------------- */ 8 | /* Special class on .container surrounding .navbar, used for positioning it into place. */ 9 | .navbar-wrapper { 10 | position: absolute; 11 | top: 0; 12 | right: 0; 13 | left: 0; 14 | z-index: 20; 15 | } 16 | /* Flip around the padding for proper display in narrow viewports */ 17 | .navbar-wrapper > .container { 18 | padding-right: 0; 19 | padding-left: 0; 20 | } 21 | .navbar-wrapper .navbar { 22 | padding-right: 15px; 23 | padding-left: 15px; 24 | } 25 | .navbar-wrapper .navbar .container { 26 | width: auto; 27 | } 28 | 29 | /* RESPONSIVE CSS 30 | -------------------------------------------------- */ 31 | @media (min-width: 768px) { 32 | /* Navbar positioning foo */ 33 | .navbar-wrapper { 34 | margin-top: 20px; 35 | } 36 | .navbar-wrapper .container { 37 | padding-right: 15px; 38 | padding-left: 15px; 39 | } 40 | .navbar-wrapper .navbar { 41 | padding-right: 0; 42 | padding-left: 0; 43 | } 44 | /* The navbar becomes detached from the top, so we round the corners */ 45 | .navbar-wrapper .navbar { 46 | border-radius: 4px; 47 | } 48 | } 49 | -------------------------------------------------------------------------------- /portfolio-site/app/root/root.html: -------------------------------------------------------------------------------- 1 |
2 |
3 | 26 |
27 |
28 | 29 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | Copyright (c) 2015, Tuts+ 2 | All rights reserved. 3 | 4 | Redistribution and use in source and binary forms, with or without 5 | modification, are permitted provided that the following conditions are met: 6 | 7 | * Redistributions of source code must retain the above copyright notice, this 8 | list of conditions and the following disclaimer. 9 | 10 | * Redistributions in binary form must reproduce the above copyright notice, 11 | this list of conditions and the following disclaimer in the documentation 12 | and/or other materials provided with the distribution. 13 | 14 | THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" 15 | AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE 16 | IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE 17 | DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE 18 | FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL 19 | DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR 20 | SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER 21 | CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, 22 | OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE 23 | OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. 24 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # [Create a Portfolio Site With Angular 2][published url] 2 | ## Instructor: [Reginald Dawson][instructor url] 3 | 4 | 5 | 6 | Angular 2 is the latest version of the incredibly popular Angular framework, re-writen from the ground up to take advantage of all the latest technologies and ideas in front-end web development. Now that Angular 2 has made final release, a lot of us are looking to update our skills by diving into this new framework. And the best way to learn is by building! 7 | 8 | In this course, Envato Tuts+ instructor Reggie Dawson show you how to create a personal project portfolio with Angular 2. Follow along and you'll learn how to build a portfolio app in Angular 2 and TypeScript. You'll get a chance to use all the fundamentals of an Angular 2 app: routing, templates, components and custom services. You'll see how to set up and use a solid starter project with SystemJS and a solid Angular 2 starter project with SystemJS. 9 | 10 | ## Source Files Description 11 | 12 | 13 | This source repository contains the project that we built in the course. There is also an Angular 2 starter project that you can use to follow along with the course, or to begin your own Angular 2 projects. 14 | 15 | ------ 16 | 17 | These are source files for the Envato Tuts+ course: [Create a Portfolio Site With Angular 2][published url] 18 | 19 | Available on [Tuts+](https://tutsplus.com). Teaching skills to millions worldwide. 20 | 21 | [published url]: https://code.tutsplus.com/courses/create-a-portfolio-site-with-angular-2 22 | [instructor url]: https://tutsplus.com/authors/reginald-dawson 23 | -------------------------------------------------------------------------------- /portfolio-site/systemjs.config.js: -------------------------------------------------------------------------------- 1 | /** 2 | * System configuration for Angular 2 samples 3 | * Adjust as necessary for your application needs. 4 | */ 5 | (function(global) { 6 | // map tells the System loader where to look for things 7 | var map = { 8 | 'app': 'app', // 'dist', 9 | '@angular': 'node_modules/@angular', 10 | 'rxjs': 'node_modules/rxjs' 11 | }; 12 | // packages tells the System loader how to load when no filename and/or no extension 13 | var packages = { 14 | 'app': { main: 'main.js', defaultExtension: 'js' }, 15 | 'rxjs': { defaultExtension: 'js' }, 16 | }; 17 | var ngPackageNames = [ 18 | 'common', 19 | 'compiler', 20 | 'core', 21 | 'forms', 22 | 'http', 23 | 'platform-browser', 24 | 'platform-browser-dynamic', 25 | 'router', 26 | 'upgrade', 27 | ]; 28 | // Individual files (~300 requests): 29 | function packIndex(pkgName) { 30 | packages['@angular/'+pkgName] = { main: 'index.js', defaultExtension: 'js' }; 31 | } 32 | // Bundled (~40 requests): 33 | function packUmd(pkgName) { 34 | packages['@angular/'+pkgName] = { main: '/bundles/' + pkgName + '.umd.js', defaultExtension: 'js' }; 35 | } 36 | // Most environments should use UMD; some (Karma) need the individual index files 37 | var setPackageConfig = System.packageWithIndex ? packIndex : packUmd; 38 | // Add package entries for angular packages 39 | ngPackageNames.forEach(setPackageConfig); 40 | var config = { 41 | map: map, 42 | packages: packages 43 | }; 44 | System.config(config); 45 | })(this); 46 | -------------------------------------------------------------------------------- /angular-2-starter/systemjs.config.js: -------------------------------------------------------------------------------- 1 | /** 2 | * System configuration for Angular 2 samples 3 | * Adjust as necessary for your application needs. 4 | */ 5 | (function(global) { 6 | // map tells the System loader where to look for things 7 | var map = { 8 | 'app': 'app', // 'dist', 9 | '@angular': 'node_modules/@angular', 10 | 'rxjs': 'node_modules/rxjs' 11 | }; 12 | // packages tells the System loader how to load when no filename and/or no extension 13 | var packages = { 14 | 'app': { main: 'main.js', defaultExtension: 'js' }, 15 | 'rxjs': { defaultExtension: 'js' }, 16 | }; 17 | var ngPackageNames = [ 18 | 'common', 19 | 'compiler', 20 | 'core', 21 | 'forms', 22 | 'http', 23 | 'platform-browser', 24 | 'platform-browser-dynamic', 25 | 'router', 26 | 'upgrade', 27 | ]; 28 | // Individual files (~300 requests): 29 | function packIndex(pkgName) { 30 | packages['@angular/'+pkgName] = { main: 'index.js', defaultExtension: 'js' }; 31 | } 32 | // Bundled (~40 requests): 33 | function packUmd(pkgName) { 34 | packages['@angular/'+pkgName] = { main: '/bundles/' + pkgName + '.umd.js', defaultExtension: 'js' }; 35 | } 36 | // Most environments should use UMD; some (Karma) need the individual index files 37 | var setPackageConfig = System.packageWithIndex ? packIndex : packUmd; 38 | // Add package entries for angular packages 39 | ngPackageNames.forEach(setPackageConfig); 40 | var config = { 41 | map: map, 42 | packages: packages 43 | }; 44 | System.config(config); 45 | })(this); 46 | -------------------------------------------------------------------------------- /portfolio-site/app/about/about.html: -------------------------------------------------------------------------------- 1 |
2 | 3 |
4 | 5 |
6 | Generic placeholder image 7 |
8 | 9 |
10 |

About Us

11 |

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and I will give you a complete account of the system, and expound the actual teachings of the great explorer of the truth, the master-builder of human happiness. No one rejects, dislikes, or avoids pleasure itself, because it is pleasure, but because those who do not know how to pursue pleasure rationally encounter consequences that are extremely painful. Nor again is there anyone who loves or pursues or desires to obtain pain of itself, because it is pain, but because occasionally circumstances occur in which toil and pain can procure him some great pleasure. To take a trivial example, which of us ever undertakes laborious physical exercise, except to obtain some advantage from it? But who has any right to find fault with a man who chooses to enjoy a pleasure that has no annoying consequences, or one who avoids a pain that produces no resultant pleasure? But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and I will give you a complete account of the system, and expound the actual teachings of the great explorer of the truth, the master-builder of human happiness. No one rejects, dislikes, or avoids pleasure itself, because it is pleasure, but because those who do not know how to pursue pleasure rationally encounter consequences that are extremely painful. Nor again is there anyone who loves or pursues or desires to obtain pain of itself, because it is pain, but because occasionally circumstances occur in which toil and pain can procure him some great pleasure. To take a trivial example, which of us ever undertakes laborious physical exercise, except to obtain some advantage from it? But who has any right to find fault with a man who chooses to enjoy a pleasure that has no annoying consequences, or one who avoids a pain that produces no resultant pleasure? But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and I will give you a complete account of the system, and expound the actual teachings of the great explorer of the truth, the master-builder of human happiness. No one rejects, dislikes, or avoids pleasure itself, because it is pleasure, but because those who do not know how to pursue pleasure rationally encounter consequences that are extremely painful. Nor again is there anyone who loves or pursues or desires to obtain pain of itself, because it is 12 | 13 |

14 |
15 | 16 |
17 | 18 | 19 | 20 |
-------------------------------------------------------------------------------- /portfolio-site/app/shared/projects.ts: -------------------------------------------------------------------------------- 1 | import { Project } from './project-interface'; 2 | 3 | export const ourProjects: Project[] = [ 4 | { 5 | id:101, 6 | name:'NodeJS App', 7 | info:'NodeJS app built as a chat app. This app was so cool that it did everything we needed it to do. Great app!Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.NodeJS app built as a chat app. This app was so cool that it did everything we needed it to do. Great app!Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. NodeJS app built as a chat app. This app was so cool that it did everything we needed it to do. Great app!Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.NodeJS app built as a chat app.', 8 | image:'app/shared/images/image1.jpg' 9 | }, 10 | { 11 | id:102, 12 | name:'Angular App', 13 | info:'Angular app built as a small social media app. Uses Angular to handle major parts of app. Great app! Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Angular app built as a small social media app. Uses Angular to handle major parts of app. Great app! Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. NodeJS app built as a chat app. This app was so cool that it did everything we needed it to do. Great app!Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.NodeJS app built as a chat app.', 14 | image:'app/shared/images/image2.jpg' 15 | }, 16 | { 17 | id:103, 18 | name:'WebRTC', 19 | info:'WebRTC app built as a chat app. This app was so cool that it did everything we needed it to do. Great app! Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Angular app built as a small social media app. Uses Angular to handle major parts of app. Great app! Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. NodeJS app built as a chat app. This app was so cool that it did everything we needed it to do. Great app!Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.NodeJS app built as a chat app.', 20 | image:'app/shared/images/image3.jpg' 21 | }, 22 | { 23 | id:104, 24 | name:'Firebase', 25 | info:'Firebase app built as a chat app. This app was so cool that it did everything we needed it to do. Great app! Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Angular app built as a small social media app. Uses Angular to handle major parts of app. Great app! Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. NodeJS app built as a chat app. This app was so cool that it did everything we needed it to do. Great app!Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.NodeJS app built as a chat app.', 26 | image:'app/shared/images/image4.jpg' 27 | }, 28 | { 29 | id:105, 30 | name:'Angular 2', 31 | info:'Angular 2 app built as a chat app. This app was so cool that it did everything we needed it to do. Great app! Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. NodeJS app built as a chat app. This app was so cool that it did everything we needed it to do. Great app!Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. NodeJS app built as a chat app. This app was so cool that it did everything we needed it to do. Great app!Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.NodeJS app built as a chat app.', 32 | image:'app/shared/images/image5.jpg' 33 | } 34 | ]; --------------------------------------------------------------------------------