How routing works in angular

As you have seen in our previous video, there are many small steps that you have to remember, to implement routing correctly in an angular application. Let's quickly recap those steps. Step 1 : Set <base href> in index.html.Step 2 : Import the RouterModule into the application root module AppModule.Step 3 : Configure the application routes. Step 4 : Specify where you want the routed component view template to be displayed using the <router-outlet> directiveStep.

Angular Routing

Implementing routing in an Angular application involves many small steps. Angular CLI does a pretty good job in having some of these routing steps implemented out of the box by just using --routing option. Before we discuss, how we can use Angular CLI to implement routing let's setup routing manually so we understand all the moving parts as far as implementing routing is concerned.Using the following command,.

TSLint in Visual Studio Code

At the moment, our editor Visual Studio Code does not show linting errors. It would be nice if Visual Studio Code can display these linting errors so we can fix them as we are writing code. To achieve this install Visual Studio Code extension - TSLint.To install this extension Click on the "View" menu in "Visual Studio Code" and select "Extensions" from the context menu In the "Search Extensions.

Angular tslint rules

In this video we will discuss some of the common angular linting rules in tslint.json file. You may modify these rules depending on your project requirements. Here are some of the common linting rules quotemark rule specifies whether you want single or double quotes no-trailing-whitespace rule disallows trailing whitespace at the end of a line semicolon rule specifies that a line should be terminated with a semicolon comment-format rule specifies that all single-line comments must begin with a space component-class-suffix rule.

Linting TypeScript

Angular has a linting tool that checks our TypeScript code for programmatic and stylistic errors as well as non-adherence to coding standards and conventions. tslint.json is the configuration file for linting. This file contains all the default rules for linting our code. For the purpose of this demo I have created a brand new Angular project using the following command.ng new AngularProjectUse the following command to lint the codeng lintSince we have just generated a new angular project and all the code.

Angular cli generate class, interface and enum

So far we have discussed generating angular features like components, services, directives etc. We can use the Angular CLI to generate TypeScript features as well. In this video we will discuss generating TypeScript features like classes, interfaces and enumerations using the Angular CLI. As you have seen throughout this course, Angular CLI provides consistent set of commands for generating features. To generate a class useng generate class className or ng g cl classNameFor example, to generate an employee.

angular cli generate directives, pipes and routing guards

In this video we will discuss generating directives, pipes and routing guards using the Angular CLI. Generating directives, pipes, routing guards and other angular features is very similar to generating component and services. We discussed generating components and services using the Angular CLI in our previous videos in this course. Angular FeatureComplete CommandAlias Directiveng generate directive directiveNameng g d directiveName Pipeng generate pipe pipeNameng g p pipeName Routing Guardng generate.

Angular cli generate module

In this video we will discuss generating modules using the Angular CLI.  To generate a module useng generate module moduleName OR ng g m moduleNameFor example to generate a students module we could use ng generate module students -d OR ng g m students -dPlease note : Since we are using the --dry-run flag, the module file and folder is not actually created. We only get the report of the files and folders that will be created.The above command.

Angular cli generate service

In this video we will discuss generating services using the Angular CLI. Generating services is similar to generating components. To generate a component we useng generate component componentName OR ng g c componentName Similarly to generate a service we useng generate service serviceName OR ng g s serviceNameFor example, to generate a customer service we use the following command. ng generate service customerThe above command generates the service and the.