Angular Application Creation and Architecture

In this tutorial section, we will be creating a demo Angular application, generating components, and running our application using Angular CLI. Here, we will be guiding you through the architecture. You can find the following content in this module:

Creating a Demo Application

To create an Angular application with Angular CLI, we have to run the following command in our terminal:

ng new intellipaat-demo

Note: The name of our application is ‘intellipaat-demo’, and you can name your application to anything you like.

When we run the above command, Angular CLI will automatically generate a project with the name specified in the command. It will also create all the relevant files and directories for our project as shown in the following screenshot:
Demoapp
After all the files have been created, we can locate all these files in our system in a directory that is named after the name of our project. We will find that our project has a whole lot of files. We don’t have to worry if we have no idea about all these files. The files of our concern right now are in a folder named ‘app’. It contains five files as shown in the screenshot below:
App folder
Now to run this demo application that we have just created, we will move to the directory of our project using the cd command as shown below:

cd intellipaat-demo

Then, we will use the following command to run the application:

ng serve

After running the above command, we would see the following output on our terminal:
ngserveOur application should be running on Port 4200. The app will open up on the browser on its own but if it doesn’t, we will just copy the address mentioned on the terminal and open it on the browser.

And that’s it! We have successfully created an Angular application. Our app should look like the following screenshot:
Intellipaat-demo

Architecture

Angular team has provided us with an amazing framework having some extremely compelling features, not only for developers but also for designers. No wonder why Angular is being used so extensively.

Let’s take a look at the architecture of this framework.

Angular applications are composed of two parts, the front-end part and the back-end part. Front-end is where a user interacts with the applications and what the user sees in there, whereas back-end is all about the storage and data processing concerns.

Now, the front-end part of the applications is composed of the technologies such as HTML, CSS, and TypeScript, i.e., Angular, meaning that Angular is only involved in the front-end part of the applications.

Now that we know that Angular only plays in the front-end part of the applications, let’s understand the building blocks of the Angular front-end applications.

Components and Templates

Components in Angular control views (sections on the screen, created via HTML/CSS). In simple words, a component is whatever we can see on the front end of an Angular application. It is the UI part of the application. Components are made up of two elements:

  • Class: Contains the logic to display the view on the screen and is written in TypeScript
  • Template: Contains the HTML markup and tells Angular how to display the view on the screen

NgModules

A module is a collection of components. Components are part of a module and can’t exist independently. To maintain the modularity of the Angular applications, we use modules or NgModules. While an application may have multiple modules, it must contain the root module that is generally named as AppModule. Modules can also import other modules to use their functionalities.

Metadata

Using metadata is how we tell Angular how to process a class. When we use a component, it acts like a class unless we tell Angular that it’s a component, and we do this with the help of metadata. Metadata is attached in the TypeScript using a decorator. Decorators are functions that know the configuration of classes and how they are supposed to work.

Data Binding

Data binding aids in the coordination and communication of templates and components.

Directives

Angular renders views dynamically and to do that it provides a special class called directives. Directives basically allow us to manipulate the HTML document at the run time. We can use directives to add or remove an element and to add or remove a class to an element. Angular comes with a bunch of in-built directives, but we can also create our own custom directives.

Services

Services in Angular do not have any particular definition. It isn’t bound to any particular component or module and that is why it’s a great way of sharing information across an application. It could be a particular class with a particular purpose. It can be anything that our application needs, be it a value, a feature, or a function.

Dependency Injection

Dependency injection (DI) is helpful in managing code dependencies. Using this concept, we can create objects that depend on other objects in Angular. Angular comes with its own DI framework pattern. Angular uses DI and provides services to the new components.

Recommended Videos

Leave a Reply

Your email address will not be published. Required fields are marked *

Solve : *
9 + 5 =