I saw Josh Godi speak at the STL Angular Meetup Wednesday night on the ABCs of making an Angular 6 application.

Nrwl Extensions for Angular have an Nx prefix and Nx Workspaces is a way to share apps and libraries so that n number of apps could use n number of repositories. This gets around pushing stuff out to a third party repository so that multiple applications may have at it. The Angular CLI has monorepo support for the Nx stuff and by mono-repo I mean it keeps many things in one giant God repository as opposed to doing it the multi-repo/many-repo way. Pluralsight, Lynda, egghead.io, and angular.io were recommended for training materials. I recommend Maximilian Schwarzmüller's Udemy trainings myself. nvm (Node Version Manager) allows for different versions of Node if you have been working in version 7 but now need the current version. The Angular CLI requires version 8 of Node. As a CLI command ng --help tells you all of the commands you may run utilizing the CLI and ng new cat --routing --style=scss is a good example of a command to set up a new project. Here will we will be making a project named cat, looping in the routing which would otherwise be absent, and using Sass instead of LESS for making the CSS. You may use Jest instead of the default karma-jasmine if you'd like for testing. That would be another configuration beyond what is given here. One of the differences between the 6 stuff and what came before is the imports of NgRx. Before one would import Observable by importing from rxjs/Observable and now it comes from rxjs all alone. The reason stuff like this was not done before is because we did not want to drag into scope the whole of the rxjs library as it was too fat. In modern times, it is alright to pull in the whole of the fat library because the treeshaking has gotten so good. The treeshaking will shake out all of the unused portions of the rxjs library. The angular-cli.json file which showed up in version 5 of Angular is now an angular.json file in version 6 and there are all sorts of configurations you may do inside of this file. There is a build section under the architect section for... yes, build configuration. There are test and linting options too. You may now blacklist certain imports as a part of the tslint.json linting. There is a way to ngUpgrade angular-cli.json to angular.json. Make a dog folder with a DogModule in the dog folder with ng generate module dog and, following up on that, ng g component dog/dog-list makes a DogListComponent in the dog folder and wires the DogListComponent up to be tied into the DogModule component. The six main concepts in Angular are Bootstrapping, Modules, Data Binding/Events, Providers, Components, and Directives/Pipes. Modules keep track of Components and Providers in short. Bootstrapping could be considered all of the wire up upstream of the outermost module that makes an index.html page into a SPA application. Josh had this example of loadChildren in a module route:

const routes: Routes = [
   { path: '', redirectTo: 'list', pathMatch: 'full' },
   { path: 'list', loadChildren: './cat-list/cat-list.module#CatListModule' },
   { path: 'cat/:name', loadChildren: './cat-view/cat-view.module#CatViewModule' }
];

 
 

Above is an example of lazy loading modules from another module. A more cut and dry example of routing might be:

const routes: Routes = [
   { path: '', component: 'CatListComponent' }
];

 
 

The providedIn trick mentioned at this talk earlier in the day was brought up again in Josh's talk and he gave an example of an attribute directive too that was like so:

import { Directive, HostBinding } from '@angular/core';
@Directive({
   selector: '[expz]'
})
export class ExpzDirective {
   @HostBinding('style.font-weight') fontWeight = 'bold';
   @HostBinding('style.color') color = '#712C30';
}

 
 

A member of the crowd opined that the markup was quite a bit different than that of JSX a frontend framework for React and another tool that was named dropped was Travis CI a continuous integration tool that is both hosted and distributed that plays nicely with GitHub. The GBYE JOSH message shown in the photo here does not apply to this Josh. Josh Godi clarified that a different Josh in human resources was moving on from Bullhorn which hosted both this event and the employment of the two Joshes. Also it really did say GBYE JOSH in balloons and not GBYC JOSH. The middle spike on the E is kinda bent backwards and you can't see it here in this picture. Goodbye Josh!