# Created by .ignore support plugin (hsz.mobi)
### JetBrains template
# Covers JetBrains IDEs: IntelliJ, RubyMine, PhpStorm, AppCode, PyCharm, CLion, Android Studio and Webstorm
# Reference: https://intellij-support.jetbrains.com/hc/en-us/articles/206544839
# User-specific stuff:
.idea/
## File-based project format:
*.iws
## Plugin-specific files:
# IntelliJ
/out/
### Node template
# Logs
logs
*.log
npm-debug.log*
# Runtime data
pids
*.pid
*.seed
# Directory for instrumented libs generated by jscoverage/JSCover
lib-cov
# Coverage directory used by tools like istanbul
coverage
# nyc test coverage
.nyc_output
# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
.grunt
# node-waf configuration
.lock-wscript
# Compiled binary addons (http://nodejs.org/api/addons.html)
build/Release
# Dependency directories
node_modules
jspm_packages
# Optional npm cache directory
.npm
# Optional REPL history
.node_repl_history
import {Component} from "@angular/core";
@Component({
selector:'app',
styles:[`
a{
text-decoration: none;
}
a.active{
font-weight: bold;
}
`],
template: `
<nav>
<a *ngFor="let nav of navs"
[routerLink]="nav.url"
routerLinkActive="active"
[routerLinkActiveOptions]="{exact:true}"
>
{{nav.content}}
</a>
</nav>
<router-outlet></router-outlet>
`
})
export class AppComponent{
navs = [
{url: "", content: "Home"},
{url: "contacts", content: "Contacts"},
{url: "contacts/1", content: "One"},
];
}
import {BrowserModule} from "@angular/platform-browser";
import {AppComponent} from "./app.component";
import {NgModule} from "@angular/core";
import appRoutes from "./app.routes";
import {APP_BASE_HREF} from "@angular/common";
@NgModule({
imports:[BrowserModule, appRoutes],
declarations:[AppComponent],
bootstrap:[AppComponent]
})
export class AppModule{}
import {RouterModule} from "@angular/router";
const routes = [
{path: '', loadChildren: 'app/home/home.module'},
{path: 'contacts', loadChildren: 'app/contacts/contacts.module'}
];
export default RouterModule.forRoot(routes);
import {Component} from "@angular/core";
import {ActivatedRoute} from "@angular/router";
import "rxjs/add/operator/map";
@Component({
template:`
contact {{id | async}}
`
})
export class ContactComponent{
id;
constructor(private route:ActivatedRoute){
this.id = route.params.map((p:any) => p.id);
}
}
import {Component} from "@angular/core";
@Component({
template:`
This is a contacts component
`
})
export class ContactsComponent{}
import {NgModule} from "@angular/core";
import {CommonModule} from "@angular/common";
import {ContactsComponent} from "./contacts.component";
import contactsRoutes from "./contacts.routes";
import {ContactComponent} from "./contact.component";
@NgModule({
imports:[CommonModule, contactsRoutes],
declarations: [ContactsComponent, ContactComponent]
})
export default class ContactsModule{}
import {ContactsComponent} from "./contacts.component";
import {RouterModule} from "@angular/router";
import {ContactComponent} from "./contact.component";
const routes = [
{path: '', component: ContactsComponent},
{path: ':id', component: ContactComponent}
];
export default RouterModule.forChild(routes);
import {Component} from "@angular/core";
@Component({
template: `
I'm a home component
`
})
export class HomeComponent{}
import {NgModule} from "@angular/core";
import {CommonModule} from "@angular/common";
import {HomeComponent} from "./home.component";
import homeRoutes from "./home.routes";
@NgModule({
imports:[CommonModule, homeRoutes],
declarations: [HomeComponent]
})
export default class HomeModule{}
import {RouterModule} from "@angular/router";
import {HomeComponent} from "./home.component";
const routes = [
{path: '', component: HomeComponent}
];
export default RouterModule.forChild(routes);
import {platformBrowserDynamic} from "@angular/platform-browser-dynamic";
import {AppModule} from "./app.module";
platformBrowserDynamic().bootstrapModule(AppModule);
<!DOCTYPE html>
<html>
<head>
<title>Angular 2 Lessons</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script>
var path = document.location.href.includes('plnkr')
? './'
: '/';
document.write('<base href="' + path + '"/>');
</script>
<link rel="stylesheet" href="styles.css">
<script src="https://unpkg.com/core-js/client/shim.min.js"></script>
<script src="https://unpkg.com/zone.js@0.6.23?main=browser"></script>
<script src="https://unpkg.com/reflect-metadata@0.1.3"></script>
<script src="https://unpkg.com/systemjs@0.19.27/dist/system.src.js"></script>
<script src="systemjs.config.js"></script>
<script>
System.import('app').catch(function(err){ console.error(err); });
</script>
</head>
<body>
<app>Loading...</app>
</body>
</html>
{
"name": "angular2-lessons",
"version": "1.0.1",
"description": "Angular 2 Lessons",
"scripts": {
"start": "echo 'These node packages are only for tooling/IDE. This repo is meant for online demos'",
"live-server": "live-server --entry-file=index.html"
},
"contributors": [
"John Lindquist"
],
"license": "MIT",
"dependencies": {
"@angular/common": "4.1.3",
"@angular/compiler": "4.1.3",
"@angular/core": "4.1.3",
"@angular/forms": "4.1.3",
"@angular/http": "4.1.3",
"@angular/platform-browser": "4.1.3",
"@angular/platform-browser-dynamic": "4.1.3",
"@angular/router": "4.1.3",
"@angular/upgrade": "4.1.3",
"systemjs": "0.20.12",
"core-js": "^2.4.1",
"reflect-metadata": "^0.1.3",
"rxjs": "5.4.0",
"zone.js": "^0.8.11",
"angular2-in-memory-web-api": "0.0.21",
"bootstrap": "^3.3.6"
},
"devDependencies": {
"typescript": "^2.3.3",
"typings": "^2.1.1"
},
"repository": {
"type": "git",
"url": "git+https://github.com/johnlindquist/angular2-lessons.git"
},
"bugs": {
"url": "https://github.com/johnlindquist/angular2-lessons/issues"
},
"homepage": "https://github.com/johnlindquist/angular2-lessons#readme"
}
:root{
font-family: Arial;
}
/**
* PLUNKER VERSION
* (based on systemjs.config.js in angular.io)
* System configuration for Angular 2 samples
* Adjust as necessary for your application needs.
*/
(function (global) {
System.config({
// DEMO ONLY! REAL CODE SHOULD NOT TRANSPILE IN THE BROWSER
transpiler: 'ts',
typescriptOptions: {
tsconfig: true
},
meta: {
'typescript': {
"exports": "ts"
}
},
paths: {
// paths serve as alias
'npm:': 'https://unpkg.com/'
},
// map tells the System loader where to look for things
map: {
// our app is within the app folder
app: 'app',
// angular bundles
'@angular/core': 'npm:@angular/core/bundles/core.umd.js',
'@angular/common': 'npm:@angular/common/bundles/common.umd.js',
'@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
'@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
'@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
'@angular/http': 'npm:@angular/http/bundles/http.umd.js',
'@angular/router': 'npm:@angular/router/bundles/router.umd.js',
'@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',
// angular testing umd bundles
'@angular/core/testing': 'npm:@angular/core/bundles/core-testing.umd.js',
'@angular/common/testing': 'npm:@angular/common/bundles/common-testing.umd.js',
'@angular/compiler/testing': 'npm:@angular/compiler/bundles/compiler-testing.umd.js',
'@angular/platform-browser/testing': 'npm:@angular/platform-browser/bundles/platform-browser-testing.umd.js',
'@angular/platform-browser-dynamic/testing': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic-testing.umd.js',
'@angular/http/testing': 'npm:@angular/http/bundles/http-testing.umd.js',
'@angular/router/testing': 'npm:@angular/router/bundles/router-testing.umd.js',
'@angular/forms/testing': 'npm:@angular/forms/bundles/forms-testing.umd.js',
// other libraries
'rxjs': 'npm:rxjs',
'angular2-in-memory-web-api': 'npm:angular2-in-memory-web-api',
'ts': 'npm:plugin-typescript@4.0.10/lib/plugin.js',
'typescript': 'npm:typescript@1.9.0-dev.20160409/lib/typescript.js',
},
// packages tells the System loader how to load when no filename and/or no extension
packages: {
app: {
main: './main.ts',
defaultExtension: 'ts'
},
rxjs: {
defaultExtension: 'js'
},
'angular2-in-memory-web-api': {
main: './index.js',
defaultExtension: 'js'
}
}
});
})(this);
/*
Copyright 2016 Google Inc. All Rights Reserved.
Use of this source code is governed by an MIT-style license that
can be found in the LICENSE file at http://angular.io/license
*/
{
"compilerOptions": {
"target": "es5",
"module": "commonjs",
"moduleResolution": "node",
"sourceMap": true,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"removeComments": false,
"noImplicitAny": true,
"suppressImplicitAnyIndexErrors": true
}
}