bing
Flat 10% & upto 50% off + 10% Cashback + Free additional Courses. Hurry up
×
UPTO
50%
OFF!
Intellipaat
Intellipaat

Angular Application Creation and Architecture

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

Creating a demo Application

To create an Angular Application with Angular CLI, run the following command in your terminal

ng new intellipaat-demo

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.

Demoapp
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.

App folder

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.

cd intellipaat-demo

Finally use the following command to run the application

ng serve

After running the above command, you should see the following output on your terminal

ngserve

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.

Intellipaat-demo

Architecture

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.

Wish to Learn Angular? Click Here

Components & Templates

 

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.

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

NgModules

 

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.

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 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.

Become Angular Certified in 16 hrs.
CLICK HERE

Data Binding

 

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

Directives

 

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.

Services

 

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

 

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.

Previous Next

Download Interview Questions asked by top MNCs in 2019?

"0 Responses on Angular Architecture"

    Leave a Message

    100% Secure Payments. All major credit & debit cards accepted Or Pay by Paypal.
    top

    Sales Offer

    Sign Up or Login to view the Free Angular Architecture.