Download to read offline
![Youdon’tknowangular@joshj
Flow.
stra.
teg.
ies.
export class Logger {
log(msg: any) { console.log(msg); }
error(msg: any) { console.error(msg); }
warn(msg: any) { console.warn(msg); }
}Service
Consumer
export class HeroService {
private heroes: Hero[] = [];
constructor(
private backend: BackendService,
private logger: Logger
) { }
getHeroes() {
this.backend.getAll(Hero).then( (heroes: Hero[]) => {
this.logger.log(`Fetched ${heroes.length} heroes.`);
this.heroes.push(...heroes); // fill cache
});
return this.heroes;
}
}](https://image.slidesharecdn.com/conntect-170921175355/75/ConnectTech2017-You-don-t-know-Angular-23-2048.jpg)
![Youdon’tknowangular@joshj
Flow.
stra.
teg.
ies.
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
@NgModule({
imports: [ BrowserModule ],
providers: [ Logger ],
declarations: [ AppComponent ],
exports: [ AppComponent ],
bootstrap: [ AppComponent ]
})
export class AppModule { }
Service](https://image.slidesharecdn.com/conntect-170921175355/75/ConnectTech2017-You-don-t-know-Angular-27-2048.jpg)
![Youdon’tknowangular@joshj
@Injectable()
export class NavigationService {
public navigate() {
// Do something
}
}
export class MyPageComponent {
constructor (
private navigationService: NavigationService
) {}
}
<nav-button [navigationService]="navigationService">
Service
Consumer](https://image.slidesharecdn.com/conntect-170921175355/75/ConnectTech2017-You-don-t-know-Angular-39-2048.jpg)
![Youdon’tknowangular@joshj
@Injectable()
export class NavigationService {
public navigate() {
// Do something
}
}
export class MyPageComponent {
constructor (
private navigationService: NavigationService
) {}
}
export class NavButtonComponent {
@Input() navigationService: NavigationService;
onButtonClick() {
this.navigationService.navigate();
}
}
<nav-button [navigationService]="navigationService">
Service
Consumer
Consumer Child](https://image.slidesharecdn.com/conntect-170921175355/75/ConnectTech2017-You-don-t-know-Angular-40-2048.jpg)
![Youdon’tknowangular@joshj
Flow.
stra.
teg.
ies.
NgAppModule
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { AppComponent } from './app.component';
import { HelloComponent } from './hello.component';
import { NavButtonComponent } from './nav-
button.component';
@NgModule({
imports: [ BrowserModule, FormsModule ],
declarations: [ AppComponent, HelloComponent,
NavButtonComponent],
bootstrap: [ AppComponent ]
})
export class AppModule { }](https://image.slidesharecdn.com/conntect-170921175355/75/ConnectTech2017-You-don-t-know-Angular-53-2048.jpg)
![Youdon’tknowangular@joshj
Flow.
stra.
teg.
ies.
Imports
@NgModule({
imports: [ BrowserModule, FormsModule ],
declarations: [ AppComponent, HelloComponent,
NavButtonComponent],
bootstrap: [ AppComponent ]
})
export class AppModule { }](https://image.slidesharecdn.com/conntect-170921175355/75/ConnectTech2017-You-don-t-know-Angular-55-2048.jpg)
![Youdon’tknowangular@joshj
Flow.
stra.
teg.
ies.
Imports
import { ArticleModule } from './article/article.module';
@NgModule({
declarations: [],
imports: [
ArticleModule,
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }](https://image.slidesharecdn.com/conntect-170921175355/75/ConnectTech2017-You-don-t-know-Angular-56-2048.jpg)
![Youdon’tknowangular@joshj
Flow.
stra.
teg.
ies.
const articleRouting: ModuleWithProviders =
RouterModule.forChild([
{
path: 'article/:slug',
component: ArticleComponent,
resolve: {
article: ArticleResolver
}
}
]);
article.module.ts](https://image.slidesharecdn.com/conntect-170921175355/75/ConnectTech2017-You-don-t-know-Angular-58-2048.jpg)
![Youdon’tknowangular@joshj
Flow.
stra.
teg.
ies.
@NgModule({
imports: [
articleRouting,
SharedModule
],
declarations: [
ArticleComponent,
ArticleCommentComponent,
MarkdownPipe
],
providers: [
ArticleResolver
]
})
export class ArticleModule {}
article.module.ts](https://image.slidesharecdn.com/conntect-170921175355/75/ConnectTech2017-You-don-t-know-Angular-59-2048.jpg)
![Youdon’tknowangular@joshj
@NgModule({
declarations: [
],
imports: [
],
providers: [
{
provide: ApiService,
useFactory: (http: Http, jwtService: JwtService) => {
if (environment.production) {
return new ApiService(http, jwtService);
} else {
return new MockApiService(http, jwtService);
}
},
deps: [Http, JwtService]
}
],
bootstrap: [AppComponent]
});
I/O.
stra.
teg.
ies.](https://image.slidesharecdn.com/conntect-170921175355/75/ConnectTech2017-You-don-t-know-Angular-70-2048.jpg)
![Youdon’tknowangular@joshj
export class AnalyticsService {
private strategies: Array<any>
constructor(
private crashlyticsAnalytics: CrashlyticsAnalyticsService,
private firebaseAnalyticsService: FirebaseAnalyticsService,
private googleAnalyticsService: GoogleAnalyticsService
) {
this.strategies = [
crashlyticsAnalytics,
firebaseAnalyticsService,
googleAnalyticsService
]
};
public event() {
for (let strategy of this.strategies) {
strategy.event();
}
};
}](https://image.slidesharecdn.com/conntect-170921175355/75/ConnectTech2017-You-don-t-know-Angular-76-2048.jpg)
ConnectTech2017 - You don't know Angular
- 1.
- 2. Youdon’tknowangular@joshj #01 Mobile Architect // Transamerica MobileArchitect, Entrepreneur, FPV Pilot & Whiskey Fan. INTR. ODU. CTI. ON.
- 3.
- 4.
- 5. Youdon’tknowangular@joshj Money comes raining downand life is as it should be…
- 6.
- 7.
- 8. Youdon’tknowangular@joshj Architecture. “…in the end,architecture boils down to whatever the important stuff is.” - Martin Fowler
- 9. Youdon’tknowangular@joshj Architecture. “the decisions thatare hard to change”
- 10. Youdon’tknowangular@joshj Architecture. • Code Craftsmanship •Flow Strategies • I/O Strategies • Readability
- 11.
- 12.
- 13.
- 14. Youdon’tknowangular@joshj Code. Crafts. man. ship. Find ways tolove the code you are working on.
- 15. Youdon’tknowangular@joshj Build a workingdocument your team can get behind. Code. Crafts. man. ship.
- 16. Youdon’tknowangular@joshj If you havea team: Have training / idea sharing times. (If not, take a class) Code. Crafts. man. ship.
- 17. Youdon’tknowangular@joshj Be a ZenMaster Architect. Code. Crafts. man. ship.
- 18.
- 19. Youdon’tknowangular@joshj Nomenclature Almost anything canbe a service. A service is typically a class with a narrow, well-defined purpose. It should do something specific and do it well. Service The component or set of methods that will be using our service. Consumer
- 20.
- 21.
- 22.
- 23.
- 24.
- 25.
- 26.
- 27.
- 28.
- 29.
- 30.
- 31.
- 32.
- 33.
- 34. Youdon’tknowangular@joshj Don’t Use Events(Unlessyou absolutely have to…)
- 35.
- 36.
- 37.
- 38.
- 39.
- 40.
- 41.
- 42.
- 43.
- 44.
- 45.
- 46.
- 47.
- 48.
- 49.
- 50.
- 51. Youdon’tknowangular@joshj Flow. stra. teg. ies. • Organized • Easyto reference • Self contained • Safer for teams Benefits
- 52.
- 53.
- 54.
- 55.
- 56.
- 57.
- 58.
- 59.
- 60.
- 61.
- 62.
- 63. Youdon’tknowangular@joshj #01 Whenever data enters orleaves the application have a strategy for hiding the source or the target from the application as a whole. I/O Stratagies.
- 64.
- 65.
- 66.
- 67. Youdon’tknowangular@joshj I/O. stra. teg. ies. Article Component Article Servicehttp() getArticles()
- 68. Youdon’tknowangular@joshj I/O. stra. teg. ies. Article Component API Servicehttp() getArticles() this.apiService.get()Article Service
- 69.
- 70.
- 71.
- 72.
- 73.
- 74. Youdon’tknowangular@joshj I/O. stra. teg. ies. Article Component Analytics Serviceevent() this.analytics.event() Google Strategy http()
- 75. Youdon’tknowangular@joshj I/O. stra. teg. ies. Article Component Analytics Service CrashlyticsFirebase event() this.analytics.event()
- 76.
- 77.
- 78.
- 79. Youdon’tknowangular@joshj “Any fool canwrite code that a computer can understand. Good programmers write code that humans can understand.” Martin Fowler
- 80.
- 81. Youdon’tknowangular@joshj I/O. stra. teg. ies. L.I.F.T • Locate • Identify •Flat • Try to be DRY
- 82.
- 83.
- 84. Youdon’tknowangular@joshj I/O. stra. teg. ies. Don’t Abbreviate your constructorarguments or instantiated classes. constructor( private navigationService: NavigationService, private myElementReference: MyElementReference ) { this.fooAwesome = new FooAwesome(); };
- 85.
- 86.
- 87.
- 88.
- 89.
- 90.