Angular : Introduction, Installation and Create Angular Project

 

 Angular : Introduction, Installation and Create Angular Project

 The name angular derives simply from the fact that the HTML tags are enclosed by angle brackets. Angular is a widespread and extensively benefited client side framework. Originally called Angular JS, Angular is Google’s Javascript
(Typescript based) open source front end web application framework. It is designed specifically for creating dynamic web applications. With this framework, user can develop front-end based applications without having to use other plug-ins or frameworks. Angular is used to develop state-of the art client side Single Page Applications. It has a series of features and tools that simplify the development of the applications themselves while simultaneously guaranteeing excellent performance results.  

Angular is an open-source, JavaScript framework written in TypeScript. Google maintains it, and its primary purpose
is to develop a single page applications. As a framework, Angular has clear advantages while also providing a standard structure for developers to work with. It also enables users to create large applications in a maintainable manner.  As a platform, Angular includes:

1.   A component based framework for building scalable web applications.

2.   A collection of well-integrated libraries that cover a wide variety of features, including routing, forms management, client-server communication, and more.

3.   A suite of developer tools to help you develop, build, test and also update your code.

With Angular, user can take advantage of a platform that can scale from single developer projects to enterprise –level applications. Angular is designed to make updating as straightforward as possible, so take advantage of the latest developments with minimal effort.

v  Importance of Framework:

A Framework is an environment with a set of tools that are in the form of functions, classes, libraries, etc. With the help of this set of tools, user can develop complex applications. Or else, it will take a considerable amount of time to build such complex applications because user will have to start designing from scratch. Frameworks also helps user to organize the code. To develop front-end applications, user can use frameworks like AngularJS, Node.JS etc. Frameworks in general boost web development efficiency and performance by providing a consistent structure so that developers don’t have to keep rebuilding code from scratch. Frameworks are time saves that offer developers a host of extra features that can be added to software without requiring extra effort.

 v  Why Angular?

 

JavaScript is the most commonly used client-side scripting language. It is written into HTML documents to enable interactions with web pages in many unique ways. As a relatively easy to learn language with constant support, it is well suited to develop modern applications. But JavaScript is not ideal for developing single page applications that require modularity, testability, and also developer productivity. Nowadays, we have a variety of frameworks and libraries designed to provide alternative solutions. With respect to front end web development, angular addresses many, if not all, of the issues developers face when using JavaScript on its own.

 v  Features of Angular:

1.   Less Code: Angular requires less coding, which means you can achieve more functionality with less code. From a business point of view this means the overall development time and cost is greatly reduced.

2.   Model view Controller: With Angular developers are not required to alter everywhere in web pages when any changes are requested by clients. Using MVC controllers, any change made at one side is simultaneously
updated at other side.

3.   Unit Testing: Angular has been built to incorporate dependency injection concept which makes testing easier. Through the unit testing, eases the testing process, meaning less error and less working time for tester.

4.   Data Model Binding: While binding data to the HTML controls, special code is not required. Simply by adding very few snippets of code is possible to bind data, which is done through Angular.

5.   Desktop Apps: Using Angular, User can easily create applications that are desktop installed across various operating systems such as Windows, Mac and Linux.

6.   Virtual Scrolling: To load and unload items from DOM (Document Object Model), Virtual Scrolling in Angular is principally used. This process is completely based on visible parts of lists. 

v  MVC Architecture:

MVC stands for Model- View- Controller. The basic idea is to have three separate entities and never mix them up. Prior to the concept of MVC architecture, developers struggled with integrating their logic into their view which had to be also modelled in a certain way. Things would normally get extremely disorganized, which something that is not desired, especially when working on big projects that span thousands of lines of code. It makes activities like debugging and maintenance really tough.

With the MVC architecture, the entities are separated so that the business logic that ties everything together is always written separately. Therefore, user can also say that MVC is more of a software pattern, rather than architecture. Let’s take a look into its three main components;

     1.   Model: It is responsible for managing application data. It responds to the requests from view and to the instructions from the controller to update itself.

2.   View: It is responsible for displaying all data or only a portion of data to the users. It also specifies the data in a particular format triggered by the controller’s decision to present the data. They are script-based template systems such as JSP, ASP, PHP and very easy to integrate with AJAX technology.

3.   Controller: It is responsible to control the relation between models and views. It responds to user input and performs interactions on the data model objects. The controller receives input, validates it, and then performs business operations that modify the state of the data model.

 v  Architecture of Angular:

In Angular, Components are the main way we build and specify elements and logic on the page. In Angular, we achieved this through directives, controllers, and scope. But in Angular, all those concepts are combined into Components.

To build an Angular application we define a set of components, for every UI element, screen, and route. An application will always have a root component that contains all other components. In other words, every Angular application will have a component tree.

In the below diagram let us try to understand the component hierarchy for a small application.

 

In the above Diagram App is the Root Component and all other are it’s Child Component. In an Angular Application there will always be a One Root Component and rest other component are its descendant.

Now let’s go deeper and understand eight main building blocks of an Angular application.

1. Modules Angular apps are modular and Angular has its own modularity system called Angular modules or NgModules.
2. Components A component controls a patch of screen called a view.
3. Templates We define a component’s view with its companion template. A template is a form of HTML that tells Angular how to render the component.
4. Metadata Metadata tells Angular how to process a class.
5. Data binding: Two types of data binding- i).Event binding- lets your app respond to user input in the target environment by updating your application data. ii). Property binding- Enables users to interpolate values that ae computed from your application data into the HTML.
6. Directives @Component requires a view whereas a @Directive does not. Directives add behavior to an existing DOM element.
7. Services Service is a broad category encompassing any value, function, or feature that your application needs.
8. Dependency injection Using this feature user can keep their classes crisp and efficient. It does not fetch data from a server validate the user input, or log directly to the console.

  v  Angular Directives:

The templates of Angular are always dynamic. There are three types of directives in Angular, which are Components, Attribute and Structural directives.

1.   Components: is a directives with a simple template, class and metadata.

2.   Structural directives: is a directive which change the DOM layout by adding and removing DOM elements. For example ngIf, ngFor, ngSwitch are called structural directive.

3.   Attribute directive: To modify the behavior or appearance of an existing element, Attribute directives are used. ngClass and ngStyle are the example of Attribute directives.

 v  Component Based Model:

In Angular, “Everything is a component”. In fact Angular application is a hierarchy of component tree.

 

The above fig. is representation of a small application where App is the root component and Dashboard and List component are its child. List component inherit Detail component and Star component is child of List and Detail Component.

 v  Setting up Angular:

To install Angular, we require the following;

1.   Nodejs

2.   Npm (Node package manager)

3.   Angular CLI (Command Line
Interface)

4.   IDE for writing a code

 ü  Why Angular needs Nodejs :

 Node.js is a server-side backend, which makes it important but not mandatory for AngularJS. User will need node.js for the following purpose;

·    Npm is package manager that comes with node.js by default; it allows user to manage their project dependencies. Therefore, user do not have to manually add dependencies, remove some, and update their package. Most of Angular libraries are assigned as different NPM packages.

·     Npm provides the Angular CLI, a great tool for building Angular applications efficiently.

·    TypeScript is a primary language for building angular applications, which is not supported directly by web browsers. To compile them in JavaScript, node.js is required.

·     Angular works on the client side, while on the server side, you will need a node.js server environment for processing.

1.   Node.js:

To get the best development experience, and if you do not yet have the node pre-installed on your System: Please go to the download page of the nodej.org website and install the latest version of the node. To check whether ‘Node.js’ is already installed in your system, you need to type the node -v command in your terminal prompt. This will immediately show you the Node.js version installed on your system. Furthermore, to check the Node Package Manager, you can use the npm -v command in your terminal prompt.

 2.   Angular CLI:

 If you have installed node.js on your system, the next step is to install Angular CLI by using the following command:

npm install -g @angular/cli

 Here in the above command, -g is used for global installation. If you write this, you can use the CLI directly in any Angular project on your system.

3. IDE:

IDE is a program that streamlines the work required of coders by simplifying the entire development phase and assisting user I generating error-free coding. On website designing, as an Angular web development firm, we use coding and IDEs like;

• Angular IDE
• Visual Studio Code etc.

v  Create a new Angular Project:

 After installing Angular CLI, you can now use it to create a new Angular project using the following command:

ng new my-app

 The above command creates a new angular project (my-app) with all the required dependencies. Replace my-app with the desired name for your project. This will create a new directory with the same name and initialize it as an Angular project.

Navigate to the project directory:

cd my-app

Run the development server:

ng serve

This will compile and serve the application and will be available at http://localhost:4200/. The development server will also automatically reload the application whenever you make changes to the code.

That’s it! You now have a working Angular development environment. You can start building your application by modifying the files in the src directory.

To build a production version of your application, run the following command:

ng build –prod

The code above will create a production-ready build of your application in the dist directory.

v  AppComponent :

Components are the building blocks of a UI in an Angular application. These components are associated with a template and are a subset of directives.

The above image gives the tree structure of classification. There is a root component, which is the AppComponent, that then branches out into other components creating a hierarchy. Here are the some of the features like;

1.   Components are typically custom HTML elements, and each of these elements can instantiate only one component.

2.   A TypeScript class is used to create a component. This class is then decorated with the “@Component” decorator.

3.   The decorator accept a metadata object that gives information about the component.

4.   A Component must belong to the NgModule in order for it to be usable by another component or application.

5.   Components control their runtime behavior by implementing Life-Cycle hooks.

This image shows an App Component, which is a pure TypeScript class decorated with the “@Component” decorator. The metadata object provides properties like selector, templateUrl, and so on- the templateUrl points to an HTML file that defines what user wants to see on their application.

 v  Create Angular Component:

Step 1: First, create a folder in your application to store all your components in. 

ng g c components/new-component

Observe that the extension .component is appended to indicate that it is indeed a component.

Step2: Within the component, open the new-component.component.html file to type in whatever you’d like to see on
the browser. 

<h1>Hey! I’m the first component</h1>

Step3: In the new-component.component.ts file, copy the selector property to incorporate it in the app.component.html file. 

@Component({  selector: ‘app-new-component’,

  templateUrl: ‘./new-component.component.html’,

  styleUrls: [‘./new-component.component.css’] })

In the app.component.html, which is the root component, go ahead and define the custom HTML tag. This indicates that the component created is being incorporated for the final render.

<h1>Welcome to this tutorial on Angular Components</h1>

<app-new-component></app-new-component>

You can also define any styling conventions for the component in the CSS file. 

h1 {    text-align: center;   }

Once you execute the ng serve command, for the output.

You can create multiple components and define the tags in the app component. The components are executed sequentially.