Interpolation is a way angular use to display variables inside your HTML using the curly braces. You can display variables, named. Name <b>name<b> using {{name}} 

You can bind the data from the class to the template

1. Bind data using double curly bracket

{{property_name}} → there is class property name here. Then showing dynamic value. 

2. Using expression 

<h2>{{2+2}}</h2>  → output: 4

3. Also concatenation + property name 

concatenation: <p>{{“welcome ” + name}}</p>

<p>{{name.length}}</p>

<p>{{name.toUpperCase()}}</p>

4. Using method

<p>{{greetUser()}}</p>

5. Alternate way 

public siteUrl = window.location.href;

<p>{{siteUrl}}</p>

Not possible: 

<p>{{a = 2+2}}</p> (You can not assign the expression in a variable. So assignment is not possible in a variable)

<p>{{window.location.href}}</p> (so template is not aware javascript global variable)

The post Day 3 – Interpolation first appeared on Bipon's Diary.

ইউজার টেমপ্লেট (template) এ ডাটা বাইন্ড করতে পারে ক্লাস (Class) থেকে –  

1. বাইন্ড ডাটা ডাবল কারলি ব্রাকেট ব্যবহার করে 

{{property_name}} → ডাবল কারলি ব্রাকেট এর মধ্যে ক্লাস প্রপার্টি নাম থাকবে । তাহলে ডাইনামিক ভ্যালু দেখাবে । 

2. ইউজিং সিনটেক্স

<h2>{{2+2}}</h2>  → output: 4 

3. স্ট্রিং কংক্যাটেনশন + প্রপার্টি নাম  

concatenation: <p>{{“welcome ” + name}}</p>

<p>{{name.length}}</p>

<p>{{name.toUpperCase()}}</p>

4. ইউজিং মেথড 

<p>{{greetUser()}}</p>

কম্পোনেন্ট ফাইল

greetUser(){

Return “Hello ” + this.name; 

}

5.অন্য ভাবে

public siteUrl = window.location.href;

<p>{{siteUrl}}</p>

Not possible: 

<p>{{a = 2+2}}</p> ভ্যারিয়েবল এ এক্সপ্রেশন এসাইন করা যাবে না । ব্রাউজার এর কনসোলে দেখাবে – Template parse error. 

<p>{{window.location.href}}</p> টেমপ্লেট  জাভাস্ক্রিপ্ট গ্লোবাল ভ্যারিয়েবল বুঝে না । ব্রাউজার এর কনসোলে দেখাবে – location of undefined. 

possible:

#<p>{{siteUrl}}</p> (public siteUrl = window.location.href)

The post দিন ৩– ইন্টারপোলেশন first appeared on Bipon's Diary.

Framework to build client side application

Great for SPAs

# Why

Modular approach

Re-usable code

Development quicker and easier (like validation, routing)

Unit testable and easily maintainable code

Google + Microsoft product (Angular + Typescript)

# Angular’s History

2010 – AngularJS

2016 – Angular version 2. Just called Angular

2016 Dec – Angular version 4

2017 Nov – Angular version 5

2018 Oct – Angular version 7

Day1 – Basic Functioning 

Prerequisites – to learn Angular

• HTML, CSS, JS
• Basic of Typescript

Development Environment: 

• Node – https://nodejs.org/en/
• Node Version check – node -v
• NPM (npm install -g. Check = npm -v)
• Angular CLI (npm install -g @angular/cli)
• CLI version check (ng -v)
• Text Editor like VS Editor

 New project creation 

• Open your Git bash interface and then write bellow command 

• ng new project_name (ng new hello-world) 

#way 2

VS Editor

• View >> Integrated Terminal >> ng new hello-world
• Going to project – cd hello-world
• Run the project – ng serve
• After compile successfully 
• Then going to browser localhost:4200

Module

• First building block is a Module

• Angular application is collection individual module
• Angular must have on module Root Module – AppModule
  • Module have two things
  • Component (Root component – AppComponent)
  • Service – Here have business logic
• Export and Import (interact and ultimately render the view in the browser)

Component

• Angular must have on component Root component – AppComponent 
  • Component have two things
  • HTML Template (To represent the view)
  • Class (View logic – control the particular logic)

Service 

• Module 
  • Service under Module 
  • Service there write business logic of your application 

Architecture Summary 

• Angular app – one or more modules
• Module – one or more components and services
• Components – HTML (contain the html template) + Class (class control the logic for the particular view )
• Service – Business Logic (contains the business logic)
• Modules interact and ultimately render the view in the browser 

Package.json

• This file contains the dependency & the dev dependency that are required for angular application 
• Project run – ng serve or npm start (npm start means internally call ng serve)

Main.ts 

• This is the entry point to the application 
• If run the ng serve command then application come to main.ts file then bootstrap and kickstart appModule → bootstrap appComponent. And appComponent (have two things HTML template + class (contains the data for particular view logic)
• ) and render the HTML.  Initially class have title property sync/bound with component html by interpolation. Also other html is static 

App.module.ts: 

• This is the main module for any angular application. Also app.component.ts file is the root component of angular application 

Operation flow: 

• When we run the command ng serve into git bash then execution comes to main.ts file . then goes to app.module.ts file. then bootstrap: [AppComponent] 
• Then goes to app.component 
• Then data property title gets render in the app.component.html 
•  AppComponent have two things
  • Html file
  • Component – (contain class >  to control the view logic)

The post Day 1 – Basic Functioning first appeared on Bipon's Diary.