Sunday, 17 June 2018

Angular 4 Tutorial - Day 1

Prerequisite of angular Framework
History of angular
Angular Features
Node Configurations (Lab 1)
File Structure of Angular
First Application (Lab 2)
Create Child Component (Lab 3)
Angular Directives
Directive Code practice (Lab 3)

Prerequisite of angular Framework


 History of angular

Angular 1.x
Angular 2 -- Angular
Angular 3 - routing -- 3.x
Angular 4,5,6

Angular Features

·         Transpilation :  The process of converting one version of  JS cod to other (preferrbaly lower version) Transpiler is a tool which does this. Babel is commenly used transpiling module...
React js  - JSX -- ES5
JSX - Javascript XML

Angular --- Type Script -- ES5 [ Converted using typescript compiler)

·         Modularity and maintainability
To access only the specific feature we don't have anything. We need to include all the files
 code(all the library)  to the application.
It sends unnesseray code to the browser.
clubing mutiple file together and create one single file together.
as Bundle.js. Proccess is called bundaling of the files.
Angular using the same technology using the webpack.

·         Scaffolding and application
Making the setup and folder structure ready for application devlopment. Angular, we have cli tool to scaffold an app which we call angular Cli. Angular Is also using the NodeJs for devlopment.
NodeJs- is plateform javascript
§  Component Based Approch
Component based approach for development
Component is nothing but individual development unit. Angular application is collection of different individual unit(component).
è Template (Html)
è Look and Feel aka Style (CSS)
è Data (Model)  --  Javascript Objects
è Events Associated with it (Listen and handle ) – Javascript functions
è Here @component is using as a decorator for typescript

        templateURl: "x.html",
        styleURl : "x.css"

class Header {

    handleEvent() {


Node Configurations (Lab 1)

For configuring the Node module
Ø  Open Nodejs - Open NodeJs command promt. ProgrameFile -> Search -> NodeJS

Ø  npm init  --  Create a folder for your project. Go to that folder and type command as npm int. it will  create the Package.json file in that folder and it contains like below code.

  "name": "angular4_practice",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  "author": "",
  "license": "ISC"

Ø  npm install –save Jquery
Now it will install the jquery and ad it into package.json

Ø  Npm install typescript –g  --- it is used to install type script version

Ø  Get the path in

Ø  npm install  --save-dev jasmine

To work with angular
To install the angular 5
Ø  npm install –g @angular/cli@1.7.4  it is used to install the angularcli
It will install the angular CLI

Ø  Ng new FirstAngular1

Ø  Basic details about Type script
Basic datatype supports are
·         String
·         Number
·         Boolean
·         object

Using the interface for type script

File Structure of Angular

Ø  Structure created for first application.

Package.Json : Having the full application configuration, what are the
TsConfig.JSON : it contain the definition of
Tslint.json : it contains the linkin rules, its checks the standerd of the code. Like stylecop, it check for standard
Karma.conf.js : it uses for unit testing it will framed which port it will call to configure the application for testing. It not library it the configuration sections. Mostly all the jasmine test library task is done by Karma.
Jasmin is a testing library.
E2e:  is using for end to end test cases. And it configuration is done by protractor and which will use the protractor.conf.js for maintaining the test cases.

Gitignore : it will use when you are going to checkin to code into git and having list of files and folder that you need to checkin.

First Application (Lab 2)

All the application configuration it will maintain in .angular-cli.json

Starting of the code overview
Angular is use to make the simple page application so its entry point is in one page.
e.g for it is Index.html.   so there is the initial tag which will become the entry point of application as

Ø  Run the first application
Now you already have the application just do few changes to understand the code and run your application in command prompt.
Changes in app.component.ts

And run application as ng serve

[it is always suggestible to run the serve in terminal and leave as it is so it won’t stop and running continuously]

Now open browser and use http://localhost:4200
You will get the output like below [Port change as I did the port changes here]

Suppose you want to change the posrt number just do the changes as
Ø  Ng serve –port 4300
So your application will start listening to port 4300
Ø  Ng build
It will use to publish your code and produce the server version of files and code.

Now you will get the Folder in your application directory like. It will create folder dist.

Create Child Component (Lab 3)

Creating the child component for application using the angular CLi command, you just need to give the child name and use command as  ng generate component <child>
Ng generate component child

It generates the child component as like below.

And it will automatically registered into app.module.ts

Now let’s work with child component that we have created.
Open the child.component.html

Changes in child.component.css

Add Import  on top of the file, otherwise it will not recognize the component and OnInit
import {Component, OnInit} from '@angular/core'

Now use the component which is defined in the child component as app-child as below. That we are using in app.component.html as

You can see the output as.

A basic unit in the UI which its own template, styl e based data Events.

Angular Directives

Custom attributes applied for components and native html elements
Directive in angular are three types
1.       Component directives: Every component you create a component directive.
What we just done the practice is component directives.

2.       Structural Directive:  A structural directive generally brings changes in the layout or templates structurally. Showing a template or hiding template or generating a template. All Structural directives must be prefixed with *.

e.g. *ngFor , *ngSwitch, *ngIf

Defined array as:

Using the ngfor as

Output is

3.       Attribute Directives:
It generates changes the behavior of the elements on which it is applied like CSS style and data shown in the layout.

It is categories into three kinds
§  Input Directive
Input directives generally recives the values from the value part.
e.g. ngClass,  ngStyle,style
<h1 [ngclass]=”temp”></h1>
<h1 [style.color]=”blue”></h1>
<h1 [style.color]=”’blue’”></h1>  // Blue is the hard coded here

Flowing from right to left

§  Output Directive
Output directive emits values to the variable in the value part and it calls functions in the value part.
It is enclosed within ()
e.g. click, change, mouseover
<h1 (click)=”doThis()”></h1>

Flowing from left to right

§  Two Way bound directive
             Information flows bidirectional.
It should be enclosed within [()]
<input type=”text”  [(ngmodel)] =”x”>
This is the only way to bind the data bidirectional [Don’t follow angular 1.x. It is fully class based]

Let’s have example attribute directive will the example of input and output directive.
Using the [ngClass] to change the style sheet dynamically and (click) will use to perform operation.

Directive Code practice (Lab 3)

Defined two class as .unit1 and .unit2

Implementing the [ngclass] directive which is assign a variable with unit and (click) with call the method as changeColor

There is implementation and definition of unit and changeColor method implementation.

To work with ngModel we need to import the form modules as like below than only you will the ngModel.
That you need to import in app.module.ts
FormModule is required when you are using the @Input or @output directive in application.

Having the import of FromsModules as


Output we will get as like

Day 1
Day 2
Day 3
Day 4

Get all the code from Git as

No comments:

Post a Comment