-
Notifications
You must be signed in to change notification settings - Fork 24.8k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
docs(aio): add back ngmodule faq example and ngmodules example
- Loading branch information
1 parent
f55005e
commit cec5d62
Showing
113 changed files
with
2,200 additions
and
1 deletion.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,25 @@ | ||
{ | ||
"description": "Contact NgModule v.1", | ||
"basePath": "src/", | ||
"files": [ | ||
"app/app.component.1b.ts", | ||
"app/app.module.1b.ts", | ||
"app/highlight.directive.ts", | ||
"app/title.component.html", | ||
"app/title.component.ts", | ||
"app/user.service.ts", | ||
|
||
"app/contact/awesome.pipe.ts", | ||
"app/contact/contact.component.css", | ||
"app/contact/contact.component.html", | ||
"app/contact/contact.component.3.ts", | ||
"app/contact/contact.service.ts", | ||
"app/contact/contact-highlight.directive.ts", | ||
|
||
"main.1b.ts", | ||
"styles.css", | ||
"index.1b.html" | ||
], | ||
"main": "index.1b.html", | ||
"tags": ["NgModule"] | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,27 @@ | ||
{ | ||
"description": "Contact NgModule v.2", | ||
"basePath": "src/", | ||
"files": [ | ||
"app/app.component.2.ts", | ||
"app/app.module.2.ts", | ||
"app/highlight.directive.ts", | ||
"app/title.component.html", | ||
"app/title.component.ts", | ||
"app/user.service.ts", | ||
|
||
"app/contact/contact.component.css", | ||
"app/contact/contact.component.html", | ||
"app/contact/contact.service.ts", | ||
|
||
"app/contact/awesome.pipe.ts", | ||
"app/contact/contact.component.3.ts", | ||
"app/contact/contact.module.2.ts", | ||
"app/contact/contact-highlight.directive.ts", | ||
|
||
"main.2.ts", | ||
"styles.css", | ||
"index.2.html" | ||
], | ||
"main": "index.2.html", | ||
"tags": ["NgModule"] | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,223 @@ | ||
'use strict'; // necessary for es6 output in node | ||
|
||
import { browser, element, by } from 'protractor'; | ||
|
||
describe('NgModule', function () { | ||
|
||
// helpers | ||
const gold = 'rgba(255, 215, 0, 1)'; | ||
const powderblue = 'rgba(176, 224, 230, 1)'; | ||
const lightgray = 'rgba(211, 211, 211, 1)'; | ||
const white = 'rgba(0, 0, 0, 0)'; | ||
|
||
function getCommonsSectionStruct() { | ||
const buttons = element.all(by.css('nav a')); | ||
|
||
return { | ||
title: element.all(by.tagName('h1')).get(0), | ||
welcome: element.all(by.css('app-title p i')).get(0), | ||
contactButton: buttons.get(0), | ||
crisisButton: buttons.get(1), | ||
heroesButton: buttons.get(2) | ||
}; | ||
} | ||
|
||
function getContactSectionStruct() { | ||
const buttons = element.all(by.css('app-contact form button')); | ||
|
||
return { | ||
header: element.all(by.css('app-contact h2')).get(0), | ||
popupMessage: element.all(by.css('app-contact div')).get(0), | ||
contactNameHeader: element.all(by.css('app-contact form h3')).get(0), | ||
input: element.all(by.css('app-contact form input')).get(0), | ||
validationError: element.all(by.css('app-contact form .alert')).get(0), | ||
saveButton: buttons.get(0), // can't be tested | ||
nextContactButton: buttons.get(1), | ||
newContactButton: buttons.get(2) | ||
}; | ||
} | ||
|
||
function getCrisisSectionStruct() { | ||
return { | ||
title: element.all(by.css('ng-component h3')).get(0), | ||
items: element.all(by.css('ng-component a')), | ||
itemId: element.all(by.css('ng-component div')).get(0), | ||
listLink: element.all(by.css('ng-component a')).get(0), | ||
}; | ||
} | ||
|
||
function getHeroesSectionStruct() { | ||
return { | ||
header: element.all(by.css('ng-component h2')).get(0), | ||
title: element.all(by.css('ng-component h3')).get(0), | ||
items: element.all(by.css('ng-component a')), | ||
itemId: element.all(by.css('ng-component ng-component div div')).get(0), | ||
itemInput: element.all(by.css('ng-component ng-component input')).get(0), | ||
listLink: element.all(by.css('ng-component ng-component a')).get(0), | ||
}; | ||
} | ||
|
||
// tests | ||
function appTitleTests(color: string, name?: string) { | ||
return function() { | ||
it('should have a gray header', function() { | ||
const commons = getCommonsSectionStruct(); | ||
expect(commons.title.getCssValue('backgroundColor')).toBe(color); | ||
}); | ||
|
||
it('should welcome us', function () { | ||
const commons = getCommonsSectionStruct(); | ||
expect(commons.welcome.getText()).toBe('Welcome, ' + (name || 'Sherlock Holmes')); | ||
}); | ||
}; | ||
} | ||
|
||
function contactTests(color: string, name?: string) { | ||
return function() { | ||
it('shows the contact\'s owner', function() { | ||
const contacts = getContactSectionStruct(); | ||
expect(contacts.header.getText()).toBe('Contact of ' + (name || 'Sherlock Holmes')); | ||
}); | ||
|
||
it('can cycle between contacts', function () { | ||
const contacts = getContactSectionStruct(); | ||
const nextButton = contacts.nextContactButton; | ||
expect(contacts.contactNameHeader.getText()).toBe('Awesome Sam Spade'); | ||
expect(contacts.contactNameHeader.getCssValue('backgroundColor')).toBe(color); | ||
nextButton.click().then(function () { | ||
expect(contacts.contactNameHeader.getText()).toBe('Awesome Nick Danger'); | ||
return nextButton.click(); | ||
}).then(function () { | ||
expect(contacts.contactNameHeader.getText()).toBe('Awesome Nancy Drew'); | ||
}); | ||
}); | ||
|
||
it('can change an existing contact', function () { | ||
const contacts = getContactSectionStruct(); | ||
contacts.input.sendKeys('a'); | ||
expect(contacts.input.getCssValue('backgroundColor')).toBe(color); | ||
expect(contacts.contactNameHeader.getText()).toBe('Awesome Sam Spadea'); | ||
}); | ||
|
||
it('can create a new contact', function () { | ||
const contacts = getContactSectionStruct(); | ||
const newContactButton = contacts.newContactButton; | ||
newContactButton.click().then(function () { | ||
expect(contacts.validationError.getText()).toBe('Name is required'); | ||
contacts.input.sendKeys('John Doe'); | ||
expect(contacts.contactNameHeader.getText()).toBe('Awesome John Doe'); | ||
expect(contacts.validationError.getText()).toBe(''); | ||
}); | ||
}); | ||
}; | ||
} | ||
|
||
describe('index.html', function () { | ||
beforeEach(function () { | ||
browser.get(''); | ||
}); | ||
|
||
describe('app-title', appTitleTests(white, 'Miss Marple')); | ||
|
||
describe('contact', contactTests(lightgray, 'Miss Marple')); | ||
|
||
describe('crisis center', function () { | ||
beforeEach(function () { | ||
getCommonsSectionStruct().crisisButton.click(); | ||
}); | ||
|
||
it('shows a list of crisis', function () { | ||
const crisis = getCrisisSectionStruct(); | ||
expect(crisis.title.getText()).toBe('Crisis List'); | ||
expect(crisis.items.count()).toBe(4); | ||
expect(crisis.items.get(0).getText()).toBe('1 - Dragon Burning Cities'); | ||
}); | ||
|
||
it('can navigate to one crisis details', function () { | ||
const crisis = getCrisisSectionStruct(); | ||
crisis.items.get(0).click().then(function() { | ||
expect(crisis.itemId.getText()).toBe('Crisis id: 1'); | ||
return crisis.listLink.click(); | ||
}).then(function () { | ||
// We are back to the list | ||
expect(crisis.items.count()).toBe(4); | ||
}); | ||
}); | ||
}); | ||
|
||
describe('heroes', function () { | ||
beforeEach(function () { | ||
getCommonsSectionStruct().heroesButton.click(); | ||
}); | ||
|
||
it('shows a list of heroes', function() { | ||
const heroes = getHeroesSectionStruct(); | ||
expect(heroes.header.getText()).toBe('Heroes of Miss Marple'); | ||
expect(heroes.title.getText()).toBe('Hero List'); | ||
expect(heroes.items.count()).toBe(6); | ||
expect(heroes.items.get(0).getText()).toBe('11 - Mr. Nice'); | ||
}); | ||
|
||
it('can navigate and edit one hero details', function () { | ||
const heroes = getHeroesSectionStruct(); | ||
heroes.items.get(0).click().then(function () { | ||
expect(heroes.itemId.getText()).toBe('Id: 11'); | ||
heroes.itemInput.sendKeys(' try'); | ||
return heroes.listLink.click(); | ||
}).then(function () { | ||
// We are back to the list | ||
expect(heroes.items.count()).toBe(6); | ||
expect(heroes.items.get(0).getText()).toBe('11 - Mr. Nice try'); | ||
}); | ||
}); | ||
}); | ||
}); | ||
|
||
// describe('index.0.html', function() { | ||
// beforeEach(function () { | ||
// browser.get('index.0.html'); | ||
// }); | ||
|
||
// it('has a title', function () { | ||
// const title = element.all(by.tagName('h1')).get(0); | ||
// expect(title.getText()).toBe('Minimal NgModule'); | ||
// }); | ||
// }); | ||
|
||
// describe('index.1.html', function () { | ||
// beforeEach(function () { | ||
// browser.get('index.1.html'); | ||
// }); | ||
|
||
// describe('app-title', appTitleTests(powderblue)); | ||
// }); | ||
|
||
// describe('index.1b.html', function () { | ||
// beforeEach(function () { | ||
// browser.get('index.1b.html'); | ||
// }); | ||
|
||
// describe('app-title', appTitleTests(powderblue)); | ||
|
||
// describe('contact', contactTests(powderblue)); | ||
// }); | ||
|
||
// describe('index.2.html', function () { | ||
// beforeEach(function () { | ||
// browser.get('index.2.html'); | ||
// }); | ||
|
||
// describe('app-title', appTitleTests(gold)); | ||
|
||
// describe('contact', contactTests(powderblue)); | ||
// }); | ||
|
||
// describe('index.3.html', function () { | ||
// beforeEach(function () { | ||
// browser.get('index.3.html'); | ||
// }); | ||
|
||
// describe('app-title', appTitleTests(gold)); | ||
// }); | ||
|
||
}); |
Empty file.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,13 @@ | ||
{ | ||
"description": "Minimal NgModule", | ||
"basePath": "src/", | ||
"files": [ | ||
"app/app.component.0.ts", | ||
"app/app.module.0.ts", | ||
"main.0.ts", | ||
"styles.css", | ||
"index.0.html" | ||
], | ||
"main": "index.0.html", | ||
"tags": ["NgModule"] | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,41 @@ | ||
{ | ||
"description": "NgModule Final", | ||
"basePath": "src/", | ||
"files": [ | ||
"app/app.component.ts", | ||
"app/app.module.ts", | ||
"app/app-routing.module.ts", | ||
|
||
"app/contact/contact.component.css", | ||
"app/contact/contact.component.html", | ||
"app/contact/contact.service.ts", | ||
|
||
"app/contact/contact.component.ts", | ||
"app/contact/contact.module.ts", | ||
"app/contact/contact-routing.module.ts", | ||
|
||
"app/crisis/*.ts", | ||
|
||
"app/hero/hero-detail.component.ts", | ||
"app/hero/hero-list.component.ts", | ||
"app/hero/hero.service.ts", | ||
|
||
"app/hero/hero.component.ts", | ||
"app/hero/hero.module.ts", | ||
"app/hero/hero-routing.module.ts", | ||
|
||
"app/core/*.css", | ||
"app/core/*.html", | ||
"app/core/*.ts", | ||
|
||
"app/shared/*.css", | ||
"app/shared/*.html", | ||
"app/shared/*.ts", | ||
|
||
"main.ts", | ||
"styles.css", | ||
"index.html" | ||
], | ||
"main": "index.html", | ||
"tags": ["NgModule"] | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,41 @@ | ||
{ | ||
"description": "NgModule v.3", | ||
"basePath": "src/", | ||
"files": [ | ||
"app/app.component.3.ts", | ||
"app/app.module.3.ts", | ||
"app/app-routing.module.3.ts", | ||
|
||
"app/highlight.directive.ts", | ||
"app/title.component.html", | ||
"app/title.component.ts", | ||
"app/user.service.ts", | ||
|
||
"app/contact/contact.component.css", | ||
"app/contact/contact.component.html", | ||
"app/contact/contact.service.ts", | ||
|
||
"app/contact/awesome.pipe.ts", | ||
"app/contact/contact.component.3.ts", | ||
"app/contact/contact.module.3.ts", | ||
"app/contact/contact-routing.module.3.ts", | ||
"app/contact/contact-highlight.directive.ts", | ||
|
||
"app/crisis/*.ts", | ||
|
||
"app/hero/hero-detail.component.ts", | ||
"app/hero/hero-list.component.ts", | ||
"app/hero/hero.service.ts", | ||
|
||
"app/hero/hero.component.3.ts", | ||
"app/hero/hero.module.3.ts", | ||
"app/hero/hero-routing.module.3.ts", | ||
"app/hero/highlight.directive.ts", | ||
|
||
"main.3.ts", | ||
"styles.css", | ||
"index.3.html" | ||
], | ||
"main": "index.3.html", | ||
"tags": ["NgModule"] | ||
} |
19 changes: 19 additions & 0 deletions
19
aio/content/examples/ngmodule-faq/src/app/app-routing.module.3.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,19 @@ | ||
import { NgModule } from '@angular/core'; | ||
import { Routes, RouterModule } from '@angular/router'; | ||
|
||
import { ContactModule } from './contact/contact.module.3'; | ||
|
||
const routes: Routes = [ | ||
{ path: '', redirectTo: 'contact', pathMatch: 'full'}, | ||
{ path: 'crisis', loadChildren: 'app/crisis/crisis.module#CrisisModule' }, | ||
{ path: 'heroes', loadChildren: 'app/hero/hero.module.3#HeroModule' } | ||
]; | ||
|
||
@NgModule({ | ||
imports: [ | ||
ContactModule, | ||
RouterModule.forRoot(routes) | ||
], | ||
exports: [RouterModule] | ||
}) | ||
export class AppRoutingModule {} |
Oops, something went wrong.