Angular Application Setup and Architecture

In this blog series, I will discuss the Angular Application setup environment and architecture.

Angular Application Requirements:

1>Nodejs : Node is JavaScript runtime built on Chrome v8 JavaScript engine.

Download from https://nodejs.org

• Nodejs is an open-source server framework and it is free.
• Node js is run on various platforms(Windows,Linux,Unix ,Mac os )
• Node js can generate dynamic page content.
• It helps to run javascript outside the browser.
• By using Nodejs we can create desktop and server-based application using JavaScript.

We can verify the NodeJs version by the following the command.

node -v

cmd on Nodejs command prompt.

2>Node package Manager (NPM):

• It is default package manager for the Javascript runtime environment Node.js
• It has command line tool for interacting with huge repository of Node.js projects.
• Npm program is install when node program in install in your computer.

 

3>TypeScript  :

• TypeScript is basically free and open source scripting language.
• It is developed and maintained by Microsoft.
• It is superset of JavaScript.
• It is a strongly typed, object oriented, compiled language.
• TypeScript is design by  Anders Hejlsberg (designer of C#) at Microsoft.
• TypeScript code is compiled to JavaScript.

   Why Typescript ?

• From last few years Java script has been used vast  in development.
• Java script is cross-platform language used to develop modern web based application to develop both client side of application in Angular and React and on server side using Node.js.
• Java script is used to develop end to end application.
• JavaScript is not type safe language that is it uses no type systems .In which
• A variable in JavaScript can have any type of value like string,number,boolean etc. The advantage of type system is code readability, easy to maintain.
• But Without the type system, it is difficult to scale JavaScript to build complex applications with large teams working on the same code.
• Typescript compiles into simple JavaScript. Compatibility of Typescript is with ECMAScript 3 or higher environment. Nowadays all browser is compatible with the same conditions today.
• Some of the most popular JavaScript frameworks like Angular and WinJS are written in Typescript. Because of which to use Typescript is allows JavaScript to be used at scale.
• Typescript compiles into simple JavaScript. The Typescript compiler can be used with any browser or JavaScript engines like Node.js. Typescript requires an ECMAScript 3 or higher compatible environment to compile. Some of the most popular JavaScript frameworks like Angular.js and WinJS are written in Typescript.

How to use Typescript?

• Typescript code has to save with .ts extension.
• Typescript file is get compiled into JavaScript by using Typescript compiler.
• Typescript compiler needs to install on your platform.
• The node package manager is used to set up Typescript environment.
• To install typescript using node js following command is used.

npm  install –g typescript

tsc –v

TypeScript Features:

• Cross-Platform: Typescript is use on any platform which support JavaScript . The Typescript compiler can be installed on any Operating System such as Windows, MacOS and Linux.
• Object Oriented Language: Type script support Object Oriented Programming feature such as writing class, Interface and Module .
• Static type-checking: TypeScript uses static typing. This is done using type annotations. It helps type checking at compile time. Hence we   can find errors while typing the code without running your script each time. Additionally, using the type inference mechanism, if a variable is declared without a type, it will be inferred based on its value.
• Optional Static Typing: TypeScript also allows optional static typing if you would rather use JavaScript’s dynamic typing.
• DOM Manipulation: By using TypeScript it is easy to manipulate the DOM for adding or removing elements.
• ES 6 Features: TypeScript supports 2015 (ES 6, 7) features such as class, interface, Arrow functions etc.

4>Visual Studio Code :

• It is free to open source and cross-platform editor that runs on Windows, MAC os and Unix.
• Download visual studio code from https://code.visualstudio.com
• It is includes support for debugging, embedded Git Control, Syntax highlighting, intelligence code completion ,snippets code refactoring.
• It can debug JavaScript ,Typescript and any other language and get transpile to Javascript.

 

5>AngularCLI:  Angular command line Interface is used to automate development task.

• It is a tool to initialize tool ,develop and scaffold and maintain Angular Application.
• It allows to
• Create an Angular application
• Helps to review application during development process
• Run unit tests
• Runs the application end-to end tests
• Build the application for deployment to production

For Free Demo classes Call: 8237077325

Registration Link: Click Here!

Prerequisite :

Angular CLI requires Node.js  6.9.0 and npm 3.0.0 or higher installed on the system.

npm install  -g @angular/cli

This command latest Angular CLI .If you want specific version the following command is use.

npm install –g @angular/cli@version

 Angular CLI commands

• ng help
• ng version
• ng new peoject_name
• cd project name
• npm start :Navigate to http://localhost:4200

App will automatically  reloads if any changes are mode by any of the source file.

Scaffold	Usage
Component	ng g component my-new-component
Directive	ng g directive my-new-directive
Pile	ng g pipe my-new-pipe
Service	ng g service my-new-service
Class	ng g class my-new-class
Guard	ng g guard my-new-guard
Interface	ng g interface my-new-interface
Enum	ng g enum my-new-enum
Module	ng g module my-new-module

Structure of Angular Application :

             

For Free Demo classes Call: 8237077325

Registration Link: Click Here!

Angular workspace  configuration files :

Angular all projects with in work space share a CLI configuration context. Configuration files are present at the top level of the workspace.

Configuration File	Purpose
.editorconfig	Configuration for code editors.
.gitignore	Specifies intentionally untracked files that Git should ignore.
README.md	Introductory documentation for the root app.
angular.json	CLI configuration defaults for all projects in the workspace, including configuration options for build, serve, and test tools that the CLI uses, such as TSLint, Karma, and Protractor. For details, see Angular Workspace Configuration.
package.json	Configures npm package dependencies that are available to all projects in the workspace. See npm documentation for the specific format and contents of this file.
package-lock.json	Provides version information for all packages installed into node modules by the npm client. See npm documentation for details. If you use the yarn client, this file will be yarn. Lock instead.
src/	Source files for the root-level application project.
node_modules/	Provides npm packages to the entire workspace. Workspace-wide node_modules dependencies are visible to all projects.
tsconfig.json	Default TypeScript configuration for projects in the workspace.
tslint.json	Default TSLint configuration for projects in the workspace.

We can develop angular application in a work space .Works space consist of file for project . Angular project  consist of set of files for  a standalone application.

 To create a new workspace we can use Angular CLI ng.

                         ng  new <Project_Name>

  When we run above command the angular CLI installs the Angular npm package in node module folder along with dependencies in a new workspace.

The workspace root folder contains different configuration files and a README file which contain generated descriptive text .

In addition to this ng new creates an skeleton application in the workspace .This skeleton  has ready to run and easy to modify structure.so that a developer no need start from scratch. So by using Angular CLI first welcome application is ready to run and test and easy to modify.

In Angular project there is root level folder called it is src / which contains source files of the project. Angular support the multi project workspace which is used by advance developer for creating shareable libraries.

The building block of Angular :

Module :

 Angular is a framework for creating client application using HTML and Typescript.

The most basic building block of Angular Application  is Module. The module is a container for all other building block .Module provide a context for components. In Angular Application module is define by using NgModule.It  will collect the related functionality of the application.

When we create an Angular Application it must contain a root module that will bootstrap .Module can contain another module as well. To write a module we simply need a Typescript class with NgModule decoarator.Usally root module is called  as AppModule.

@NgModule(

declarations :[] , /* This property  use register the

{

Component,Pipe,Directive in the module */

imports:[] ,/* This property  use to import the built-in and custom module in Angular App */

providers:[] , /* This property  use to register the Services in the module */

bootstrap:[]   /* This property  use to specify the bootstrap component in the module */

})

export  Class AppModule

{

}

@NgModule:

• @NgModule typically tells Angular how to compile and run module code.
• The root module acts as the applications main entry point.
• The root module helps assemble and link all parts of the angular application.
• Angular allows to create user defined modules as well.
• Such modules need to be linked with the root module.

Few built-in Module

• BrowserModule
• NgModule
• NgModule
• ReactiveFormsModule
• HttpClientModule

For Free Demo classes Call: 8237077325
Registration Link: Click Here!

Angular Components:

• In Angular application Components represent a UI. It is a basic building in an Angular application.
• An Angular application consist of multiple Components arrange in a Tree .
• Angular components are a kind of directives.
• components always have a template
• Template defines the look of the component when it gets rendered.
• @Component({ }) decorator used to configure metadata of a component.

             import { Component } from ‘@angular/core‘;

• In Angular Application Component must be a part of Module (@NgModule) so that it reuse by any other application
• Add it to the list in the declarations[] field of that @NgModule() of a module.

@Component(

{

selector : “selector-name”,

templateUrl: ”path of html page”,

styleUrls:[‘ path of css file’]

})

export class MyComponent{

// business logic

}

Most commonly used metadata properties

• selector – defines the name of the HTML tag for the live component.
• template – inline-defined template for the view. It contains the HTML that needs to be rendered in the application
• templateUrl – url to an external file containing HTML that needs to be rendered in the application.
• styleUrls – URL to the stylesheet to be applied to the component’s view.
• styles – It is used to style a specific component. inline-defined styles to be applied to the component’s view.

Angular Directive :

• Angular directive is one of the core feature of Angular.
• Basically Directives are attribute provide us a special HTML syntax .
• Angular Compiler execute them when it is find in DOM.
• There are three types of Directive

1. Component Directive
2. Structural Directive
3. Attribute Directive

• Angular allows us to create a Custom Directive as well.

1. Component Directive :
   • Components are Directives with templates.
   • Angular components are a subset of directives.
   • Components always have a template.
   • In Angular application, there are multiple components but one component can be executed per an element in a template.
2. Structural Directive :

• Structural directives are responsible for HTML layout.
• By using Structural directive we can add, remove and update html element in a template.
• An asterisk (*) precedes the directive.
• Built-in structural directives

*ngIf, *ngFor, and *ngSwitch.

• NgIf – Conditionally add or remove an element from the DOM
• NgFor – Is use to repeat a template for each item in a list, Array or collection.
• NgSwitch – It is use set of directives that switch among alternative views.
• NgSwitch is actually a set of three, cooperating directives: NgSwitch, NgSwitchCase, and NgSwitchDefault

3. Attribute Directive :

• Attribute directives are a way of changing the appearance or behavior of a component or a native DOM element.
• Example
  • ng-class & ng-style
• Angular supports creating custom attribute directive

Angular Services:

• When we develop the application we decide it into small subsystem.
• Angular helps to create such subsystems by allowing the developers to create Services,
• These sub systems perform different tasks such as

Logging, data access, order processing, etc.

• An Angular service is a class that encapsulates some sort of desired business functionality.

-This class is referred to as Service in Angular.

• This service provides this functionality to the rest of the application components.

            Angular Pipe

• Angular application may accept data as input and format it to a desired output.
• Using Pipes in Angular help to display data in the desired format.
• We can create custom pipe as well.
• Built-in pipes

• • • Date – converts expression to a date format.
    • Currency – formats a number as currency.
    • Uppercase – Transforms text to uppercase.
    • Lowercase – Transforms text to lowercase
• Percentage – Formats a number as a percentage.

Data Binding:

• It is the most powerful feature of Angular. By which we can establish a communication between the HTML DOM and Component Class.
• It gives us a simple process of application to push and pull the data between the view (Html template) and business logic class i.e component.
• Angular there following way to perform data binding.
  1. String Interpolation. {{}}
  2. Property binding []
  3. Event Binding ()
  4. Two-way Databinding [(ngModel)]

Thanks for reading, in the next blog series I will discuss Component in Angular.

Author :
Jayshree Chaudhary
Full-stack Trainer

For Free Demo classes Call: 8237077325
Registration Link: Click Here!

Call the Trainer and Book your free demo Class for now!!!

© Copyright 2019 | Sevenmentor Pvt Ltd.