Page 9

How to install Gradle – 6 easy steps

Install Java – version 1.8 and above if not already installed.
To verify, open command prompt and type java -version
Download the binary version of the latest gradle distribution from the link https://gradle.org/install/
Create a new directory at C:\Gradle and unzip the content into the directory
Add a new environmental variable “Gradle” and point the variable to C:\Gradle\bin
Append the Gradle variable to the path environmental variable as shown below
Gradle setup is done. Verify by opening a new command window and type Gradle -v

Angular JS Basic Commands

ng new

This Command will be used to create new app in angular js.It will use predefined schmatics to create app

it will ask for couple of details like routing ,styling framework like less,CSS etc and then generate angular application and at the end it will download alldependencies in node_modules folder.

Below app will get created by this command

ng generate

This command will be used to create component,services in angularjs

you can generate or play below things as per documentation

appShell
application
class
component
directive
enum
guard
interface
library
module
pipe
service
serviceWorker
universal
webWorker

Below is example

ng serve

This command will be used to complie and run angular js applicaiton and its configuration are mentioned in angular.json file

Below is example

ng test

This command will run testcase using configuration mentioned in angular.json file.This b default run karma framework which is allready mentioned in dependencies

Below is example

ng e2e

This commend is having following configuration in angular.json file and it will uilds and serves an Angular app, then runs end-to-end tests using Protractor.

Below is example

ng build

This commend is having following configuration in angular.json file

Below is example

ng lint

Default configuration is specified in the project’s tslint.json file, This will run linting tools on angular projects typescript files and shows erros if any descrepencies are there

Referecnce: https://palantir.github.io/tslint/

Below is example

ng config

This command will Retrieves or sets Angular configuration values in the angular.json file for the workspace.

Below is example

ng run

This command will runs an Architect target with an optional custom builder configuration defined in your project

In this command you have to mention for which project you need to run architect target like below example

Hello World with Angular JS

Prerequisites

Angularj JS new version is using nodejs for setting up application and for running applicaion you will also need any code editor tool.

For current setup we are using visual code studio

Kindly down load latest version of nodejs and visual code studio on your machine and complete setup

Node Installation

1 Go to this site and download latest version of node js

https://nodejs.org/en/

2) Once installed open command prompt and type “node”

you will be able to see version on node js that means nodejs installed

Install Visual Studio

1 Go to this site and download latest version of

https://code.visualstudio.com/

2. Once installed on windows go to search menu and type visual you will be able to see its installed like below screenshot

3.Open Application and you will be able to see below screen

4) Select folder from file menu for your project

5) Open Terminal from Terminal option

Install Angular cli

Run below command

npm install -g @angular/cli

once its installed type below command in terminal to verify installation

Create a workspace and initial application

Run below command

ng new my-app

it will ask for angular routing =>select yes

then select css as style sheer language like below screenshot

Press Enter and it will generate your project

in below diagram 1) Creating html and components from schematics 2) DOwnloading required packages you can see under node_modules folder

Run the application

Run below command

traverse to application folder

cd my-app

run below command to start and open application

ng serve –open

this command will compile app and launch it with webpack on http://localhost:4200/

Congrats your first application is running and working fine

Creating Hello World

In angular data binding is happening between html and component classes .

Here we will declare one variable in component file and same will be visible on UI .

Delete everything from app.component.html.

2. Declare variable in app.component.ts

app.component.ts

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'my-app';
  message = 'Hello World';
}

3. Now add binding between UI and component with scriplet tag

app.component.html

<div>

<h1>{{message}}</h1>

</div>

4. Run below command to compile app

ng serve

5. Open browser and enter http://localhost:4200/

Your application is running and rented “Hello World” in browser. Same way you can initialize variables and pass data from component to UI.

GIT REPO:

https://github.com/letsblogcontent/AngularJS/tree/master/HelloWorldApp

AngularJS Overview

Why Angularjs

Angular JS is opersource web application framework and growing very fast now days.

Most of companies are adopting this framework for UI development as time to production is less.

Below are advantages of AngularJs

Easy to create single page application.
Easy to test code
Provides data binding capabilities
Easy to integrate with rest web services
Complex UI can be done easily and can be reused as component .
Data handling is easy with pojo classes in typescript
Type scripts gives lot many out of box futures
Angular JS provides many easy to use features like services,components,pipe,dependency injection, validators..etc