mkdir my-app cd my-app write the app run the app & test git init .... heroku login heroku apps:create myapp # commit git add . git commit -m "First node app deploy" git push heroku master # debug heroku open
Month: September 2017
Angular5 part-1
01 | Template on Plunker
https://plnkr.co/edit/gQjnRg?p=info
02 | Setup a project locally using ng-cli
if you already have an older version:
npm uninstall -g angular-cli npm cache clean npm install -g @angular/cli@latest
03 | Configure Routes
WARNING! AppComponent Shouldn’t be part of routing. But it is set as the default route by ng-cli.
> Never Use this:
{ path: '', component: AppComponent },
> Should use something like below:
import { Routes } from '@angular/router'; import { AppComponent } from './'; import { ContactComponent } from './contact/contact.component'; import { AboutComponent } from './about/about.component'; export const routes: Routes = [ { path: '', redirectTo: '/contact', pathMatch: 'full' }, { path: 'contact', component: ContactComponent }, { path: 'about', component: AboutComponent }, { path: '**', redirectTo: '/contact', pathMatch: 'full' }, ];
Route Redirection: { path: '**', redirectTo: '/contact', pathMatch: 'full' }, Wildcard Routes: { path: '**', component: PageNotFoundComponent },
04 | Routing
From Template:
<a>Click here to Signup</a>
From your .ts file (typescript):
// src/app/landing/landing.component.ts import { Component } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { Router } from '@angular/router'; @Component({ selector: 'app-root', templateUrl: './landing.component.html', styleUrls: ['./landing.component.css'] }) export class LandingComponent { title = 'landing page'; constructor(private router: Router) {} launchHome(): void { this.router.navigate(['/home']); } }
05 | Barrel Files for the rescue
One of the first things you will notice when you start working on it is, you have to write so many import statements. Gets worst, when you have to make 2 dedicated imports to get hold of 2 components sitting inside the same folder.
Well, this isn’t one of those where you blame at Angular! This is something to do with Typescript. The resolution is to use barrel files
. As a practice you can start creating an index.ts file in each of your folders containing services, components or feature modules.
Assume you src folder has too many components (example: Home, About, Contact):
The barrel file:
// src/app/index.ts export { AppComponent } from './app.component'; export { HomeComponent } from './home.component'; export { AboutComponent } from './about.component'; export { ContactComponent } from './contact.component';
Usage:
import { AppComponent, HomeComponent, AboutComponent, ContactComponent} form './'; // or even simpler import { * } from './';
There is a neat blog on this which can give you a better understanding of this.
06 | Running the App
ng serve
and navigate your browser to http://localhost:4200
07 | Unit Test and other CI/CD Concerns
There are scripts setup on package.json for these, one can refer it. For more on configuring karma & etc read this blog. Example, Running unit tests (jasmine – BDD):
ng test
08 | Need to create your feature module?
After sometime you realize your app module has grown out of proportion. It is time to consider some logical organization of your code. First is to consider organizing them into modules. Here is a neat read
09 | Adding a Simple Form
You will notice I’ve placed a simple form in ContactComponent. At this point it’s important that you don’t forget to import FormsModule in your app.module.ts.
However, one thing you will notice there is a realtime representation of form data. It is quite useful for you to debug, it can be achieved with the following peace of markup:
... <div>Formdata in realtime: <pre>{{ form.value | json }}</pre> </div>
10 | Lifecycle Hooks
Intention behind post was to have an Angular2 guide which would help one to start a project from scratch & take it all way to deployment. I haven’t covered much of Angular2 concepts or structs on this post for brevity & aligning with my intention to keep it super short. However, Lifecycle Hooks are a thing it can’t afford to miss. Angular2 provides 8 of them in total: ngOnInit
, ngOnChanges
, ngDoCheck
, ngAfterContentInit
, ngAfterContentChecked
, ngAfterViewInit
, ngAfterViewChecked
, ngOnDestroy
. Here is an example:
import { Component, OnInit, OnDestroy } from '@angular/core'; @Component({ selector: 'app-root', templateUrl: './app.component.html' }) export class AppComponent implements OnInit, OnDestroy { constructor() {} ngOnInit() { console.log('App Component Init'); } ngOnDestroy() { console.log('App Component Destroyed'); } }
You can refer this blog if you want to know them in detail
11 | Before you go for Production
You are just a command away if you want to do a production build for your awesome app. Afterwards you just need to copy the generated dist
folder to your live server.
ng build --aot --environment prod
Yet, there are few things one should know going to this step. When you execute above the step there are so many things happening behind the scene. Here are some, concatenation, minification, uglification & tree shaking.
Since I have already made a note on first 3 on a different blog, I would like you to come to terms with Tree Shaking.
Tree Shaking
is the process of getting rid of dead code. If you’re coming from Java world or most other OOP environments, you will be familiar with a warning called ‘unused code/method’. However, if you want to go deep into it with examples & numbers here is great post from an expert. Minko Gechev is the author of the official Angular Style Guide.
If you are already an expert at Angular & came across this post whilst considering ways to improve the page load time & performance tuning for your app here is a great stack overflow thread which you shouldn’t miss!
12 | Sourcecode
Here is the github repo used for this post.