Angular 6 is a powerful version of the popular framework for building web applications. If you are a beginner or want to learn the basics quickly, this short course will give you the basic concepts and steps to get started with Angular 6.

1. Installing the necessary tools

Before you can start working with Angular 6, you need to install a few tools:

• Node.js: Be sure to install Node.js (and the npm that comes with it), as Angular uses these tools to manage dependencies and build your project.
• Angular CLI: The Angular CLI is a command line tool for creating and managing projects in Angular. Install it using the npm command: npm install

g @angular/cli

2. Creating a new project

After installing the Angular CLI, you can easily create a new project using the command:

ng new my-angular-app

This command will create a new project with the desired directory structure, files and settings. Once the project is created, navigate to the project directory:

cd my-angular-app

3. Starting the project

To run the application, use the command:

ng serve

After that, open a browser and go to http://localhost:4200/. You should see a welcome page from Angular, which means the application is running properly.

4. Creating components

In Angular 6, everything is built around components. Each component represents a part of the user interface, such as a button, form, or panel. To create a new component, use the command:

ng generate component my-component

This command will create a new component with the necessary files: TypeScript file, HTML template, CSS styles and tests.

5. Using services to work with data

Services in Angular are used for logic that can be reused, such as APIs or data processing. A service can be created using:

ng generate service my-service

The service can then be injected into the component using Angular Dependency Injection. This allows you to decouple the application logic and improve the code structure.

6. Routing (Routing)

In Angular 6, an important part is routing, which allows switching views based on URLs. To set up routing, we need to define routes in the configuration and then use in the templates to map components.

Example route:

const routes: Routes = [
{ path: 'home', component: HomeComponent },
{ path: 'about', component: AboutComponent }
];

To configure routing in the project, add routes to the main module app.module.ts and import RouterModule.

7. Working with Forms

Angular 6 supports two types of forms: template-driven (Template-driven) and reactive (Reactive). Template-driven forms are simpler and are used for smaller applications, while reactive forms provide more flexibility and are better suited for complex applications.

8. Using Angular Modules

In Angular, a project can be divided into modules, which improves the structure and scalability of the application. Each module can contain components, services, routes, and other modules. This helps to divide the code into logical blocks, which is especially important for large applications.

9. Updates and Improvements in Angular 6

• Angular CLI 6: With the CLI, it is now easier to update your project, as well as use improved features such as code optimization at build time.
• RxJS 6: Angular 6 uses a version of RxJS 6 that adds new operators and improvements.
• Angular Elements: This feature allows you to use Angular components as elements for the web, making it easier to integrate with other frameworks and applications.

Conclusion

Once you’ve completed these steps, you’ll be able to build and run a basic application in Angular 6, and use components, services, and routes for more advanced features. Of course, this is just the beginning, and you will have to deepen your knowledge by exploring Angular in more detail, but in an hour you can easily learn the basics of the framework and start developing your own applications.