Creating Angular Routing

In this session we will prepare the routes and directories for creating our order CRUD.

To make our project more organized we will create a directory for our features and within them separate them to facilitate the maintenance and separation of the logic of each feature, all within the 'app' directory.

Now we are going to create 3 directories, 1 to register, 1 to edit and 1 to list. But for that we will already create using the angular CLI to generate everything we need in these components. First we will go through the console to navigate to the 'features' directory and then we will run the command 'ng generate component order-list'.

Now let's create the module and route with the command 'ng generate module order-list --routing = true' note that we did not change the project directory on the console by running the command with the same name 'order-list' it will add in the directory already created

repeat the process creating 'order-create' and 'order-edit'

We will use the template automatically generated by the angular to create our CRUD. Remove the content from the page inside the tag 'div class = "content" role = "main"' replace at the top welcome with Orders by inserting a tag 'a' to create a simple menu and change the css in that same file to white so we leave it well simple the page to work

Now we are going to prepare the routes and link them with the components. First we need to play inside the main div where we clean all our content the tag generated by the angular named 'router-outlet'. This tag indicates to the angular that the contents of the routes will be rendered within this tag.

When we use the commands from the angular CLI, the component references were automatically generated in the main module, we need to remove them from there.

getting like this.

Now we are going to import the modules that we created in our main module.

In the main routes file of the application we will create it by default as soon as we load into the project root bring our order list module using path: '', redirectTo: '/ order-list', pathMatch: 'full' and when not find no URL in the tracking we will also configure to redirect to our list of orders 'path:' ** ', component: OrderListComponent'

We must not forget to inform in each module created in our features which component it belongs to as below

And now in each module, configure your own route

and to end this session we’ll add the link in our orders menu to our order listing route. In the next session we will create our crud and work more with routes by linking the editing and creation route for example. To do this add the following command routerLink = "order-list"

Then run the project as we saw in the project creation session and check the routes

The project created during the training will be available here on my github! here