Advertisements

Getting started with Angular 6 using Angular CLI – Part 1


Introduction

Today we are going to learn most popular Single Page Application called as Angular Js using Angular CLI ( Command Line Interface ). We know by using Angular we can build modern applications such as web, mobile, or desktop in the real world. Previously we learnt about another famous single page application called as Aurelia.

Prerequisites

  • Download and Install : Node.Js ( Angular requires Node.js version 8.x or 10.x. )
  • Download and Install : VS Code ( A best opensource editor for developing Angular Application,etc ).
  • Download and Install : Git ( Not mandatory but use for a best practice ).

Angular CLI Installation

We can install Angular Command Line Interface after the installation of “node js” in our environment.  This will help you to create projects, generate application and library code, and perform such variety of ongoing development tasks such as testing, bundling, and deployment in our application. So this will reduce the time of development activities because of command line Interface register and generate files automatically at the beginning stage.  So that is why we need a version control for newly changed item in the application and it will identify  in which files what types of changes are reflected. This is more helpful for the beginners in   Angular CLI application development. Now we can install the Angular CLI globally by using the following command in our application.

npm install -g @angular/cli

Create a Project

Now we are going to create a simple project repository in our environment. The repository I have created in Github account and it is been cloned  in my environment(machine). The best practice of Angular CLI or any other application is configuring a version control in our VS Code otherwise we blindly create and check-in the code in project repository. No issues we can continue without configuring a version control in our application.

Go to our repository or  the place where we are planning to create a project setup , open the command prompt and run the following command.

ng new angular-app

Eg : “ng new [ProjectName]” our project name is a “angular-app”

Angular CLI created “angular-app” in our repository.

Install Angular Essential Extension

Click on Visual Studio Code Extension menu in left side bar then search “Angular Essential”  (john papa) in the search box. Once we install Angular Essential,  it will install all other supporting packages in the application automatically. Also It will generate a different icons for all the folders,ts files,style,json,etc.

Angular Build

We are generated a dummy application in our repository. The next step will be to build our application. For that open a “Command Terminal” in Visual Studio Code.

  1. Click on Visual Studio “Terminal” menu from the top of the menu list.
  2. “Terminal” menu displays a list of options ,  just click “New Terminal (  Cntrl + Shift + ~ )”.

There is one more short key for opening “Terminal” in VS Code ( “Cntrl + ~ ” ) . We can see the following terminal displayed on the right side bottom of  VS Code.

Now we need to build our application for that we need to open root directory of the application. May be when you open the Terminal in the VS code it will display the repository path of our application. So just change to application path by the following way.

The build artifacts will be stored in the dist/ directory folder in the application. Now run the Angular CLI build Command.

ng build

If you are getting the following error then that means we need to install “@angular-devkit/build-angular” dev dependency. This package is newly introduced in Angular 6.0.

The following command will help us to create devkit dependency in our application.

npm install --save-dev @angular-devkit/build-angular

If you are facing this same issue after the installation of dev kit then you need to uninstall and install the angular cli.

App Component

Components are the basic UI building block of an Angular app. So here we can see there is a “app” component generated under the “src -> app” folder in “angular-app” application. If you are using Angular CLI then it will auto generate all the files that are relevant for your basic application. For example in the following screen shot app folder contain such auto generated files are css,spec,ts and module.

Angular Serve

Now build is succeeded, Yes our application is ready to serve. Please run any of the following command ( one is alias or a short command ) to open our application in a browser.

ng serve --open
ng s -o

or If we don’t want to open application in a browser then just run the following command and navigate to "http://localhost:4200/".

ng serve

Bundling the application

So we can bundle our application using any of the following command and flag “–prod” bundle for production.

ng build --prod
ng serve --prod

for more options click here.

Changing the default port number

Every application should navigate to "http://localhost:4200/" as default. So If you are really thinking to open an application in a different port address then it is possible. Just run any of the following command.

ng s --port 3000 --open
ng s --port 3000 -o

Output :

As I mentioned earlier the default port we have changed to “3000” instead of “4200”.

Download :

Reference

Summary

From this article we have learned the basic configuration of Angular 6 using Angular CLI and few basic CLI commands. I hope this article is useful for all the Angular CLI beginners.

Advertisements

Currency Filter In Angular Js


Introduction :

In this article you will learn about Currency Filter in Angular Js.

 

AngularJs : AngularJS is a JavaScript framework. It was originally developed by Hevery and Adam Abrons. Now it’s maintained by Google. Angular Js is light weight and easy to learn. It is perfect in Single Page Application projects. Angular Js is open source, free of cost and easy to handle.

Currency Filter

One of the filter in Angular Js is Currency Filter.This “currency” filter include “$” Dollar Symbol as default.So we can use the following code as the html template format of Currency Filter.

{{ currency_expression | currency : symbol : fractionSize}}

Code 

Html :

The following html code contain the root directory “ng-app” & Controller “ng-controller”.So you can create any name for it.The angular js currency filter contain “$” Dollar symbol as default.

<div ng-app="CurrencyApp" ng-controller="CurrencyController">
   <input type="number" ng-model="amount">
   <h2>{{ amount | currency }}</h2>
</div>

Angular Js :

When we are run this following code you will get the result as “$1000”.So you can change this “$” Dollar symbol based on the html template format of Currency Filter.

var myApp = angular.module('CurrencyApp', []);
myApp.controller('CurrencyController', function($scope) {
  $scope.amount = 1000;
});

Demo : Currency Filter In AngularJS

Removing Default Symbol Of Currency Filter

Html :
In the following code value=”” , So the default Symbol “$” Dollar will be removed.

<div ng-app="CurrencyApp" ng-controller="CurrencyController">
   
   <input type="number" ng-model="amount">
   <h2>{{ amount | currency : value="" }}</h2>
   <!-- or-->
   <h2>{{ amount | currency : "" }}</h2>

</div>

Demo : Removing the default symbol ( $ ) of currency filter in Angular Js

List Of Countries and Their Currency Using Angular Js

Html :

The following code contain the currency symbol for respective countries.


<h3>Countries & Their Currency Using AngularJS</h3>
<div ng-app="CurrencyApp" ng-controller="CurrencyController">
  <input type="number" ng-model="amount">
<h3>
   Removed default currency($) :  {{ amount | currency : "" }}  
</h3>
<h3>
   Default currency($) :  {{ amount | currency }}  
</h3>
<h3>
   Indian Currency: {{amount | currency:"&#8377"}}
</h3>
<h3>
   US Dollar - USD :  {{ amount | currency : "$" }}  
</h3>
<h3>
   United Kingdom Pound - GBP : {{amount | currency:"£"}}
</h3>
<h3>
   Thailand Baht - THB : {{amount | currency:"฿"}}
</h3>
<h3>
   China Yuan Renminbi - CNY : {{amount | currency:"¥"}}
</h3>
<h3>
   Costa Rica Colon - CRC : {{amount | currency:"₡"}}
</h3>
<h3>
    Ukraine Hryvnia - UAH  : {{amount | currency:"₴"}}
</h3>
</div>

Angular Js :

var myApp = angular.module('CurrencyApp', []);
myApp.controller('CurrencyController', function($scope) {
  $scope.amount = 1000;
});

Demo : Countries & Their Currency Using AngularJS

Fraction Size In AngularJS Currency Filter

We can use the fraction size in currency filter.The following code we added 3 as the fraction size so it added 3 zeros in result.

Html :


<h3>Fraction Size In AngularJS Currency Filter</h3>

<div ng-app="CurrencyApp" ng-controller="CurrencyController">
  <input type="number" ng-model="amount">
<h3>
    Amount :  {{ amount | currency : "$" : 3 }}  
</h3>
</div>

Demo : Fraction Size In AngularJS Currency Filter

Reference :

Summary

We learned how to use Currency Filter In Angular Js. I hope this article is useful for all beginners.

Multiplication of two numbers using Angular Js


In this article,we will disscuss multiplication of two numbers using Angular Js.


Angular Js : AngularJS is a JavaScript framework.It was originally developed by Hevery and Adam Abrons.Now it’s maintained by Google.Angular Js is light weight and easy to learn.It is perfect in Single Page Application projects.Angular Js is open source,free of cost and easy to handle.

Solution:

Let’s do some coding part.In the below example the code part contain two html input, First Number and Second Number.

<div ng-app="">
 
 <p>First Number:
<input type="number" ng-model="num1" ng-init="num1=0" />
 </p>
 <p>Second Number:
 <input type="number" ng-model="num2" ng-init="num2=0" />
 </p>
 <p>Sum: {{ num1 * num2 }}</p>
</div>

AngularJS Reference

AngularJS library written in JavaScript. Angular js reference file is given below.

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>

The AngularJS Major Components:

  • ng-app
  • ng-model
  • ng-bind

Important Knowledge :

  • The expressions are written inside the {{ expression }}.
  • ng-model directive help to bind the value in html control.the above solution num1 it contain the first input value.num2 contain the second input value.
  • ng-app directive define the angular js application.
  • The ng-init directive initializes application data.In this solution num1 and num2 assigned “0” or Zero. so we get sum "0" on the runtime in the both html textbox.
  • "*" help to multiple both input value inside the expression {{ num1 * num2 }}.

Output :

Output of the above solution..

Multiplication of two numbers using Angular Js

Multiplication of two numbers using Angular Js

 

 Example :

Jsfiddle Demo : http://jsfiddle.net/rajeeshmenoth/294k52a9/

Published : http://www.c-sharpcorner.com/Blogs/48229/

%d bloggers like this: