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
Watch this insightful video on Angular vs React vs Vue:
Creating a Demo Application
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:
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:
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:
Then, we will use the following command to run the application:
After running the above command, we would see the following output on our terminal:
Our 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.
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.
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
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.
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 aids in the coordination and communication of templates and components.
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 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 (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.