We will be creating a demo Angular application, generating components and running our application using Angular CLI. In this tutorial, we will be guiding you through the Architecture. You can find the following content in this module:
Learn Angular in 16 hrs from experts
To create an Angular Application with Angular CLI, run the following command in your terminal
Note: The name of our application is intellipaat-demo, you can name your application anything you like.
When you 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 your project as shown in the following screenshot.
After all the files have been created, you can locate all these files in your system in a directory that is named after the name of your project. You will find that your project has a whole lot of files. You don’t have to worry if you 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 you have just created, move to the directory of your project using the cd command as shown below.
Finally use the following command to run the application
After running the above command, you should see the following output on your terminal
Your application should be running on port 4200. The app will open up on the browser on its own but if it doesn’t, just copy the address mentioned on the terminal and open it on your browser.
And that is it! You have successfully created an angular Application. Your app should look like the following screenshot.
Angular team has provided us with an amazing framework with some very 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 the user interacts with the applications and what he sees in the application whereas the backend is all about the storage and data processing concerns.
Now, the front end of the applications is composed of the technologies such as HTML, CSS and Typescript, that is, Angular, meaning that Angular is only involved in the front end of the application.
Now that we know that Angular only plays part in the front end of the applications, let’s understand the building blocks of the Angular front end applications.
Components in Angular, control the views(sections on the screen, created via HTML/CSS). In simple words component is whatever you can see on the front end of the angular application. It is UI part of the application.
Components are made up of two elements.
Module is a collection of Components. Components are a part of module and can’t exist independently. To maintain the modularity of the Angular applications we use modules or NgModule. While an application may have multiple modules, it must contain the root module which 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 that using 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 template and components.
Angular renders the views dynamically and to do that it provides a special class called directives. Directives basically allow us to manipulate the HTML document at run time. You can use directives to add or remove an element, add or remove a class to an element. Angular comes with a bunch of built in directives but you can also create your own custom directives.
Service in Angular doesn’t have any particular definition. It isn’t bound to any particular componentor module and that is why it’s a great way of sharing information across application. It could be a particular class with a particular purpose. It can be anything that your application needs, be it a value, feature or a function.
Dependency injection 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 (Dependency Injection) framework pattern. Angular uses DI and provides services to the new components.
Download Interview Questions asked by top MNCs in 2019?