+ ![]()
+ ![]()
`
})
@@ -28,4 +28,4 @@ export class HomeComponent {
constructor (private title: Title) {
this.title.setTitle('Home');
}
-}
\ No newline at end of file
+}
diff --git a/templates/app/src/examples/links.component.ts b/templates/app/src/example/component/links.component.ts
similarity index 79%
rename from templates/app/src/examples/links.component.ts
rename to templates/app/src/example/component/links.component.ts
index 5dc4a1e..87bb532 100644
--- a/templates/app/src/examples/links.component.ts
+++ b/templates/app/src/example/component/links.component.ts
@@ -1,13 +1,13 @@
import { Component, OnInit } from '@angular/core';
import { Title } from '@angular/platform-browser';
-import { Link, LinkService } from '../shared/service/example.service';
+import { Link, LinkService } from '../service/link.service';
@Component({
providers: [ LinkService ],
styles: [`
- .links { list-style-type: none; }
- .links .link {
+ ul { list-style-type: none; }
+ a {
align-items: center;
background: grey;
color: white;
@@ -19,9 +19,9 @@ import { Link, LinkService } from '../shared/service/example.service';
}
`],
template: `
- -
+
-
-
+
{{link.name}}
{{link.description}}
diff --git a/templates/app/src/example/component/nav.component.ts b/templates/app/src/example/component/nav.component.ts new file mode 100644 index 0000000..342eac2 --- /dev/null +++ b/templates/app/src/example/component/nav.component.ts @@ -0,0 +1,45 @@ +import { Component } from '@angular/core'; + +@Component({ + selector: 'nav-component', + styles: [` + header { + align-items: center; + background: grey; + color: white; + display: flex; + justify-content: space-between; + padding: 0.8rem 1.2rem; + } + h1 { + flex: auto; + font-size: 1.6rem; + } + nav { + margin-left: auto; + } + a { + color: inherit; + font-size: 1.4rem; + text-decoration: none; + } + a.router-link-active { color: #E1BEE7; } + a:hover { color: #BA68C8; } + a:not(:first-of-type):before { + color: white; + content: " · "; + } + `], + template: ` ++ + ` +}) +export class NavComponent { + appTitle: string = '<%= project %>'; +} diff --git a/templates/app/src/shared/directive/example.directive.ts b/templates/app/src/example/directive/shadow.directive.ts similarity index 59% rename from templates/app/src/shared/directive/example.directive.ts rename to templates/app/src/example/directive/shadow.directive.ts index 3ec102a..1a4a39b 100644 --- a/templates/app/src/shared/directive/example.directive.ts +++ b/templates/app/src/example/directive/shadow.directive.ts @@ -1,10 +1,10 @@ import { Directive, HostBinding, HostListener } from '@angular/core'; -@Directive({ selector: '[bs-directive]' }) -export class BoxShadowDirective { - private biggie: string = '0 4px 8px 2px #707070'; - private smalls: string = '0 2px 4px 1px #808080'; - private tranny: string = 'box-shadow 200ms ease-in-out'; +@Directive({ selector: '[shadowDirective]' }) +export class ShadowDirective { + biggie: string = '0 4px 8px 2px #707070'; + smalls: string = '0 2px 4px 1px #808080'; + tranny: string = 'box-shadow 200ms ease-in-out'; @HostBinding('style.transition') transition = this.tranny; @HostBinding('style.boxShadow') boxShadow = this.smalls; @HostListener('mouseover') onMouseOver () { @@ -13,4 +13,4 @@ export class BoxShadowDirective { @HostListener('mouseout') onMouseOut () { this.boxShadow = this.smalls; } -} \ No newline at end of file +} diff --git a/templates/app/src/example/example.module.ts b/templates/app/src/example/example.module.ts new file mode 100644 index 0000000..4121fa6 --- /dev/null +++ b/templates/app/src/example/example.module.ts @@ -0,0 +1,22 @@ +import { NgModule } from '@angular/core'; +import { CommonModule } from '@angular/common'; +import { HttpModule } from '@angular/http'; +import { RouterModule } from '@angular/router'; +import { Title } from '@angular/platform-browser'; + +import { ExampleRouting } from './example.routing'; +import { HomeComponent } from './component/home.component'; +import { LinksComponent } from './component/links.component'; +import { NavComponent } from './component/nav.component'; + +import { CapitalizePipe } from './pipe/capitalize.pipe'; +import { LinkService } from './service/link.service'; +import { ShadowDirective } from './directive/shadow.directive'; + +@NgModule({ + declarations: [ HomeComponent, LinksComponent, NavComponent, CapitalizePipe, ShadowDirective ], + exports: [ HomeComponent, LinksComponent, NavComponent, HttpModule, RouterModule ], + imports: [ CommonModule, ExampleRouting, HttpModule, RouterModule ], + providers: [ LinkService, Title ] +}) +export class ExampleModule { } diff --git a/templates/app/src/example/example.routing.ts b/templates/app/src/example/example.routing.ts new file mode 100644 index 0000000..2ebb416 --- /dev/null +++ b/templates/app/src/example/example.routing.ts @@ -0,0 +1,18 @@ +import { NgModule } from '@angular/core'; +import { RouterModule, Routes } from '@angular/router'; + +import { HomeComponent } from './component/home.component'; +import { LinksComponent } from './component/links.component'; + +export const ModuleRoutes: Routes = [ + { path: '', component: HomeComponent }, + { path: 'links', component: LinksComponent } +]; + +@NgModule({ + exports: [ RouterModule ], + imports: [ + RouterModule.forChild(ModuleRoutes) + ] +}) +export class ExampleRouting { } diff --git a/templates/app/src/shared/pipe/example.pipe.ts b/templates/app/src/example/pipe/capitalize.pipe.ts similarity index 99% rename from templates/app/src/shared/pipe/example.pipe.ts rename to templates/app/src/example/pipe/capitalize.pipe.ts index f2f8888..0fe15ca 100644 --- a/templates/app/src/shared/pipe/example.pipe.ts +++ b/templates/app/src/example/pipe/capitalize.pipe.ts @@ -7,4 +7,4 @@ export class CapitalizePipe implements PipeTransform { transform (value: string): any { return value.toLowerCase().replace(/\b\w/g, match => match.toUpperCase()); } -} \ No newline at end of file +} diff --git a/templates/app/src/shared/service/example.service.ts b/templates/app/src/example/service/link.service.ts similarity index 56% rename from templates/app/src/shared/service/example.service.ts rename to templates/app/src/example/service/link.service.ts index 245728e..93699d4 100644 --- a/templates/app/src/shared/service/example.service.ts +++ b/templates/app/src/example/service/link.service.ts @@ -4,12 +4,16 @@ import { Observable } from 'rxjs/Observable'; import 'rxjs/add/operator/map'; export class Link { - name: string; description: string; url: string; + name: string; + description: string; + url: string; } + @Injectable() export class LinkService { - constructor (private http: Http) {} + private linksUrl = 'res/links.json'; + constructor (private http: Http) { } getLinks (): Observable{{appTitle | capitalize}}
+ +