Angular Config & App Overview

[00:00:00]
>> Just some details around the NX workspace. If you look at angular.json And the reason why I bring this up is because invariably something goes wrong or I mess something up and I have to hop in here. This holds essentially a list of all of your projects. So we have the dashboard.

[00:00:26]
And if I go down, eventually I get to the dashboard, UI and the API. And so, in another module, we're going to essentially add in another application and it would go in here. Now nest or annex JSON, so these are in the root, you'll start to see that they are also keeping track of the projects.

[00:00:50]
And what this does, is this allows us to establish or define the relationships between our projects. So for instance, the dashboard e2e, it's naturally dependent on the dashboard. And the other piece that I want to show you that's really, really important is that if you go down to your Ts config.days.

[00:01:18]
This is in the root. You'll notice that we have these, essentially these aliases. And this allows us to essentially import things. And instead of having to go and type out these big long paths, we're able to essentially use the alias. So this is why for instance, if I go up to App component Ts, you notice here it's using this alias.

[00:01:49]
And so this is a really, handy way to just say FCM funded masters API interfaces just pointed this thing. So, with that said, let me show you how this works and then we will talk about, How we're going to get this together. So typically what I'll do and this is kind of a default that I use, and if you go to the ripple, in fact I'll just do that, so everybody can see.

[00:02:32]
This is something that I've done once, and I never ever want to do it again, is if you go to libs Material, source. Angular material is awesome, it's also broken up into a ton of modules. And so instead of having to like import everything and then it just gets really, really hard to manage that, across a lot of different components.

[00:03:06]
And so what I do is I essentially create a module that imports everything and then exports everything. So now if I want access to the Angular Material modules, I just have to import this one kind of barrel roll. Now what I'll do is I have everything in here.

[00:03:22]
Just for convenience, but on an application, when I was trying to make it fast is I would run a Performance Analyzer and I would realize like, or I would just even do a mental audit, say I'm not using these 16 things. I'm just using these 10. And I would parse the this down in an effort to increase performance, but for now I'm going to go here, copy this, we'll go back into our code, And open up material module.

[00:04:01]
And I'm just going to paste that in there. And then what I can do is, if you'll notice, so in material.module ts.ts I just pasted this in and all I'm doing is I'm importing all of the material modules that I want and then I'm exporting them and then from here if I go into, my app module, You will see that, I'm importing this.

[00:04:38]
And so now I'm not having to import everything kind of one by one is that it's now available to me in my application. So this is a very, very convenient way to essentially streamline the consumption of all these kind of little tiny sub modules. And then the caveat is you want to parse that down when you are ready to use it.

[00:05:00]
Now, does anybody have any questions about what I've done? Before I show a quick trick that I use when I'm working with code, the question was or the request rather is could I go back over real quick, the NX architecture to just show kind of where things are absolutely.

[00:05:26]
So And I'll just bump this up. I really wish VS code made a really easy way to do this. But at a high level, your apps go in your apps folder. And so this can be a nest app, an angular app, a react app, a next step, whatever you want.

[00:05:49]
They go here. Now, the nx team says this and I agree, just as much as I think components should be razor thin. I think your applications should be as thin as possible. So I do not necessarily subscribe to the idea of putting all your components or your visual layer into a lib for the sake of just doing it, because typically that's very specific to that application.

[00:06:20]
But what I do believe in is moving all of the business logic that's not app specific into a lib. And so in this case, we have our apps and we have our libs. And within the libs, we have an API interface. And this is where I share the data model between the front end and the back end and across applications and lips.

[00:06:50]
And so I believe that especially when you have an API and a client application that share the same data model, like you can use interfaces, especially if it's TypeScript. Now, with that said back to the lib. We'll typically start with two or more common lips. So one is core data and core state.

[00:07:17]
So core data is responsible for communicating with the server. And really, the handling of data is it moved from the server into the client. And then core state is responsible for managing the state of the application. And then within our core data, I believe I generated this is where for instance, my services would be so as we start to build this out and we start to consume the REST API, it would go in the widgets service.

[00:07:52]
And I'll talk about this a little bit more, but what this allows you to do is for instance, if you were building an ionic application, and I've done this, you can generate an in ionic application. And 80% of your application is done. Because you're not having to recreate your services in your state management.

[00:08:14]
When you do it this way, the only thing that I had to manage or think about was really the UI. And how do I actually work with the ionic components within nx workspace to make this possible? And hopefully that was a bit I really think nx is at the highest level that it's simply saying your applications go in the apps, any kind of shared common functionality go in the libs.

[00:08:46]
If that was cool, give me a thumbs up. I think probably cool enough. All right, so with that said, let me show you a real quick trick that I use just to keep my code moving forward. You'll notice here that there are these particular routes that I'm not using.

[00:09:18]
And so it's picking up the TypeScript language services and saying, hey, you've imported this thing and you are not using it. Very correct, and so one of the things that I do when I am working in vs code, I think vs code is amazing. But what I do is, I spent a lot of time using WebStorm before and they have a lot of really handy keyboard, I think hockey's so you could find the equivalent in the probably the vs code.

[00:09:57]
It's just I'd have to learn new key bindings. And so one of the ones that I've installed, which I recommend, especially if you already have experience with any of Jet Brains products is the IntelliJ IDEA a key binding plugin. So, typically just go to Plugins IntelliJ, boom, install it, and you're good to go.

[00:10:18]
Now, what this does is for me, Command Shift a is my master kind of control thing and then from here I'll just go organize imports. And you'll see that it takes all of these that I'm not using and it removes them and then it also sources alphabetically. And what I'll also do here is just because I like to be tidy, is that I'll highlight and then sort lines ascending as well.

[00:10:54]
Now, I've installed this into Eric's store, I don't need it, so I'm going to delete that. And we'll just clean this up real quick. So this is for me, this is just being tidy Organize imports, good, and so this is in my opinion, I look at this I'm like okay, I'm using everything.

[00:11:17]
Everything is organized and we are good to go.