SPRING MVC SIMPLE CRUD APPLICATION

Spring MVC is one of the Most Popular Application Framework on the internet, So today in this article, let’s build a simple CRUD application.

The goal of the application is to display the list of books, adding a new book, updating the existing book and deleting a book.

TOOLS AND TECHNOLOGIES USED

• Spring 4
• Hibernate 5
• MYSQL
• Maven 3.3.9
• eclips Oxygen
• Apache Tomcat 8

step 1

First let’s create a DB for our application, open your MySQL Workbench and add execute the following command,

Let’s start with the backend, Here is the project structure of Spring REST application

      I don’t go over in detail about the REST API’s, I believe you all know that the concept of API. Long story short, API’s are nothing but URL’s when we hit those URL’s/Consume those URL’s we will get JSON data that’s it. 

So let’s look at how to build such API’s using Spring REST

step 2

Create Maven project using Eclips IDE.

step 3

Since we are using a maven, first let’s add all the dependencies that are required for our application.

pom.xml

 <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd">  
  <modelVersion>4.0.0</modelVersion>  
  <groupId>com.madhusanka</groupId>  
  <artifactId>BookAPI</artifactId>  
  <version>0.0.1-SNAPSHOT</version>  
  <packaging>war</packaging>  
  <properties>  
   <failOnMissingWebXml>false</failOnMissingWebXml>  
  </properties>  
   <dependencies>  

   <!-- Spring MVC Dependency -->  
   <dependency>  
    <groupId>org.springframework</groupId>  
    <artifactId>spring-webmvc</artifactId>  
    <version>4.3.10.RELEASE</version>  
   </dependency>  

   <!-- Spring ORM -->  
   <dependency>  
    <groupId>org.springframework</groupId>  
    <artifactId>spring-orm</artifactId>  
    <version>4.3.10.RELEASE</version>  
   </dependency>  

   <!-- Hibernate ORM -->  
   <dependency>  
    <groupId>org.hibernate</groupId>  
    <artifactId>hibernate-core</artifactId>  
    <version>5.2.11.Final</version>  
   </dependency>  

   <!-- Hibernate-C3P0 Integration -->  
   <dependency>  
    <groupId>org.hibernate</groupId>  
    <artifactId>hibernate-c3p0</artifactId>  
    <version>5.2.11.Final</version>  
   </dependency>  

   <!-- c3p0 -->  
   <dependency>  
    <groupId>com.mchange</groupId>  
    <artifactId>c3p0</artifactId>  
    <version>0.9.5.2</version>  
   </dependency>  

   <!-- Mysql Connector -->  
   <dependency>  
    <groupId>mysql</groupId>  
    <artifactId>mysql-connector-java</artifactId>  
    <version>6.0.5</version>  
   </dependency>  

   <!-- Jackson API for JSON -->  
   <dependency>  
    <groupId>com.fasterxml.jackson.core</groupId>  
    <artifactId>jackson-databind</artifactId>  
    <version>2.8.7</version>  
   </dependency>  

   <!-- Servlet Dependency -->  
   <dependency>  
    <groupId>javax.servlet</groupId>  
    <artifactId>javax.servlet-api</artifactId>  
    <version>3.1.0</version>  
    <scope>provided</scope>  
   </dependency>  

  </dependencies>  
  <build>  
   <plugins>  
    <plugin>  
     <artifactId>maven-compiler-plugin</artifactId>  
     <version>3.5.1</version>  
     <configuration>  
      <source>1.8</source>  
      <target>1.8</target>  
     </configuration>  
    </plugin>  
    <!-- Embedded Apache Tomcat required for testing web application -->  
    <plugin>  
     <groupId>org.apache.tomcat.maven</groupId>  
     <artifactId>tomcat7-maven-plugin</artifactId>  
     <version>2.2</version>  
     <configuration>  
      <path>/</path>  
     </configuration>  
    </plugin>  
   </plugins>  
  </build>  
 </project>  

Step 4

Next step is to create a Property file inside the resources folder and specify the database properties

db.properties

 # MySQL properties  
 mysql.driver=com.mysql.cj.jdbc.Driver  
 mysql.url=jdbc:mysql://localhost:3306/bookapi  
 mysql.user=root  
 mysql.password=sajith  

 # Hibernate properties  
 hibernate.show_sql=true  
 hibernate.hbm2ddl.auto=update  

 #C3P0 properties  
 hibernate.c3p0.min_size=5  
 hibernate.c3p0.max_size=20  
 hibernate.c3p0.acquire_increment=1  
 hibernate.c3p0.timeout=1800  
 hibernate.c3p0.max_statements=150  

Step 5

Once it’s done, let’s configure the spring and hibernate. Inside the config, package create a class called AppConfig and write the following code.

We will annotate this class with @Configuration, @PropertySource, @EnableTransactionManagement and @ComponentScan

@Configuration: It is a replacement to the XML based configuration for configuring spring beans. So instead of an XML file, we write a class and annotate that with @Configuration and define the beans in it using @Bean annotation on the methods.

@PropertySource: Specify the classpath of the property file. Reading values from a property file are far superior to hard coding them in our class files. If we hard code then we need to recompile if we want to change any of them.

@EnableTransactionManagement: It enables the transaction management. @ComponentScans: To scan the multiple packages.

Appconfig.java

 package com.madhusanka.spring.config;  
 import java.util.Properties;  
 import org.springframework.beans.factory.annotation.Autowired;  
 import org.springframework.context.annotation.Bean;  
 import org.springframework.context.annotation.ComponentScan;  
 import org.springframework.context.annotation.ComponentScans;  
 import org.springframework.context.annotation.Configuration;  
 import org.springframework.context.annotation.PropertySource;  
 import org.springframework.core.env.Environment;  
 import org.springframework.orm.hibernate5.HibernateTransactionManager;  
 import org.springframework.orm.hibernate5.LocalSessionFactoryBean;  
 import org.springframework.transaction.annotation.EnableTransactionManagement;  
 import static org.hibernate.cfg.Environment.*;  
 @Configuration  
 @PropertySource("classpath:db.properties")  
 @EnableTransactionManagement  
 @ComponentScans(value = {  
           @ComponentScan("com.madhusanka.spring.dao"),  
           @ComponentScan("com.madhusanka.spring.service")  
 })  
 public class Appconfig {  
      @Autowired  
        private Environment env;  
        @Bean  
        public LocalSessionFactoryBean getSessionFactory() {  
         LocalSessionFactoryBean factoryBean = new LocalSessionFactoryBean();  
         Properties props = new Properties();  
         // Setting JDBC properties  
         props.put(DRIVER, env.getProperty("mysql.driver"));  
         props.put(URL, env.getProperty("mysql.url"));  
         props.put(USER, env.getProperty("mysql.user"));  
         props.put(PASS, env.getProperty("mysql.password"));  
         // Setting Hibernate properties  
         props.put(SHOW_SQL, env.getProperty("hibernate.show_sql"));  
         props.put(HBM2DDL_AUTO, env.getProperty("hibernate.hbm2ddl.auto"));  
         // Setting C3P0 properties  
         props.put(C3P0_MIN_SIZE, env.getProperty("hibernate.c3p0.min_size"));  
         props.put(C3P0_MAX_SIZE, env.getProperty("hibernate.c3p0.max_size"));  
         props.put(C3P0_ACQUIRE_INCREMENT,   
            env.getProperty("hibernate.c3p0.acquire_increment"));  
         props.put(C3P0_TIMEOUT, env.getProperty("hibernate.c3p0.timeout"));  
         props.put(C3P0_MAX_STATEMENTS, env.getProperty("hibernate.c3p0.max_statements"));  
         factoryBean.setHibernateProperties(props);  
         factoryBean.setPackagesToScan("com.madhusanka.spring.model");  
         return factoryBean;  
        }  
        @Bean  
        public HibernateTransactionManager getTransactionManager() {  
              HibernateTransactionManager transactionManager = new HibernateTransactionManager();  
              transactionManager.setSessionFactory(getSessionFactory().getObject());  
              return transactionManager;  
             }  
 }  

Step 6

Next step is to create MyWebAppInitializer class to initialize the servlet container, instead of using traditional web.xml, we will use java class that will extends AbstractAnnotationConfigDispatcherServletInitializer.

MyWebAppInitializer.java

 package com.madhusanka.spring.config;  
 import org.springframework.web.servlet.support.AbstractAnnotationConfigDispatcherServletInitializer;  
 public class MyWebAppInitializer extends AbstractAnnotationConfigDispatcherServletInitializer{  
      @Override  
      protected Class<?>[] getRootConfigClasses() {  
           return new Class[] { Appconfig.class };  
      }  
      @Override  
      protected Class<?>[] getServletConfigClasses() {  
           return new Class[] { Webconfig.class };  
      }  
      @Override  
      protected String[] getServletMappings() {  
           return new String[] { "/" };  
      }  
 }  

Step 7

Next step is to create WebConfig class inside the config package, we will annotate this class with @Configuration, @EnableWebMvc, and @ComponentScan

@EnableWebMvc: @EnableWebMvc is used to enable Spring MVC. @EnableWebMvc is equivalent to <mvc:annotation-driven /> in XML.

Webconfig.java

 package com.madhusanka.spring.config;  
 import org.springframework.context.annotation.ComponentScan;  
 import org.springframework.context.annotation.Configuration;  
 import org.springframework.web.servlet.config.annotation.EnableWebMvc;  
 import org.springframework.web.servlet.config.annotation.WebMvcConfigurerAdapter;  
 @Configuration  
 @EnableWebMvc  
 @ComponentScan(basePackages = {"com.madhusanka.spring.controller"})   
 public class Webconfig extends WebMvcConfigurerAdapter {  
 }  

Above three files are required for the spring and hibernate configuration.

Step 8

Now, let’s write the model class, create a Book class inside the model package.
Step 8

Above three files are required for the spring and hibernate configuration.

Now, let’s write the model class, create a Book class inside the model package.

Book.java

 package com.madhusanka.spring.model;  
 import javax.persistence.Entity;  
 import javax.persistence.GeneratedValue;  
 import javax.persistence.GenerationType;  
 import javax.persistence.Id;  
 @Entity(name = "Book")  
 public class Book {  
      @Id  
      @GeneratedValue(strategy = GenerationType.IDENTITY)  
      private Long id;  
      private String title;  
      private String auther;  
      public Long getId() {  
           return id;  
      }  
      public void setId(Long id) {  
           this.id = id;  
      }  
      public String getTitle() {  
           return title;  
      }  
      public void setTitle(String title) {  
           this.title = title;  
      }  
      public String getAuther() {  
           return auther;  
      }  
      public void setAuther(String auther) {  
           this.auther = auther;  
      }  
      @Override  
      public String toString() {  
           return "Book [id=" + id + ", title=" + title + ", auther=" + auther + "]";  
      }  
 }  

Step 9

Now, let’s create an Interface for DAO, we will create BookDAO interface inside the dao package

BookDao.java

 package com.madhusanka.spring.dao;  
 import java.util.List;  
 import com.madhusanka.spring.model.Book;  
 public interface BookDAO { 

 
      //save the record  
      long save(Book book);  

      //get the single record  
      Book get(long id);  

      //get the all the record  
      List<Book> list();  

      //update the record  
      void update(long id,Book book);  

      //delete record  
      void delete(long id);  
 }  

Step 10

Now, let’s implement those methods in the BookDaoImp class and annotate this class with @Repository
@Repository: It is an annotation that marks the specific class as a Data Access Object, thus clarifying its role.

BookDaoImp.java

 package com.madhusanka.spring.dao;  
 import java.nio.channels.SeekableByteChannel;  
 import java.util.List;  
 import javax.websocket.Session;  
 import org.hibernate.SessionFactory;  
 import org.springframework.beans.factory.annotation.Autowired;  
 import org.springframework.stereotype.Repository;  
 import com.madhusanka.spring.model.Book;  
 @Repository  
 public class BookDAOImp implements BookDAO {  
      @Autowired  
      private SessionFactory SessionFactory;  
      @Override  
      public long save(Book book) {  
           SessionFactory.getCurrentSession().save(book);  
           return book.getId();  
      }  
      @Override  
      public Book get(long id) {  
           return SessionFactory.getCurrentSession().get(Book.class, id);  
      }  
      @Override  
      public List<Book> list() {  
           List<Book> list=SessionFactory.getCurrentSession().createQuery("from Book").list();  
           return list;  
      }  
      @Override  
      public void update(long id, Book book) {  
           Book oldBook= SessionFactory.getCurrentSession().byId(Book.class).load(id);  
           oldBook.setAuther(book.getAuther());  
           oldBook.setTitle(book.getTitle());  
      }  
      @Override  
      public void delete(long id) {  
      Book book = SessionFactory.getCurrentSession().byId(Book.class).load(id);  
      SessionFactory.getCurrentSession().delete(book);  
      }  
 }  

Step 11

Now, let’s create another Interface for service, we will be creating this service inside the service package

BookService.java

 package com.madhusanka.spring.service;  
 import java.util.List;  
 import com.madhusanka.spring.model.Book;  
 public interface BookService {  

      //save the record  
      long save(Book book);  

      //get the single record  
      Book get(long id);  

      //get the all the record  
      List<Book> list();  

      //update the record  
      void update(long id,Book book);  

      //delete record  
      void delete(long id);  
 }  

Step 12

Now, let’s implement those methods in the BookServiceImp class and annotate this with @Service
@Service: This tells hibernate it is a Service class where you will have @Transactional etc Service layer related annotations so hibernate treats it as a Service component.

BookServiceImp.java

 package com.madhusanka.spring.service;  
 import java.util.List;  
 import com.madhusanka.spring.model.Book;  
 public interface BookService {  

      //save the record  
      long save(Book book);  

      //get the single record  
      Book get(long id);  

      //get the all the record  
      List<Book> list();  

      //update the record  
      void update(long id,Book book);  

      //delete record  
      void delete(long id);  
 }  

Step 13

Finally, we will create a controller BookController inside the controller package and annotate with @RestController, which specifies that this is a REST controller

BookController.java

 package com.madhusanka.spring.controller;  
 import java.util.List;  
 import org.springframework.beans.factory.annotation.Autowired;  
 import org.springframework.http.ResponseEntity;  
 import org.springframework.web.bind.annotation.DeleteMapping;  
 import org.springframework.web.bind.annotation.GetMapping;  
 import org.springframework.web.bind.annotation.PathVariable;  
 import org.springframework.web.bind.annotation.PostMapping;  
 import org.springframework.web.bind.annotation.PutMapping;  
 import org.springframework.web.bind.annotation.RequestBody;  
 import org.springframework.web.bind.annotation.RestController;  
 import com.madhusanka.spring.model.Book;  
 import com.madhusanka.spring.service.BookService;  
 @RestController  
 public class BookController {  

      //get all the book  
      @Autowired  
      private BookService bookService;  
      @GetMapping("/api/book")  
      public ResponseEntity<List<Book>> list(){  
           List<Book> list= bookService.list();  
           return ResponseEntity.ok().body(list);  
      }  

      //save the book  
      @PostMapping("/api/book")  
      public ResponseEntity<?> save(@RequestBody Book book){  
           long id = bookService.save(book);  
           return ResponseEntity.ok().body("Book created ID: " +id);  
      }  

      //get single record  
      @GetMapping("/api/book/{id}")  
      public ResponseEntity<Book> get(@PathVariable("id") long id){  
           Book book = bookService.get(id);  
           return ResponseEntity.ok().body(book);  
      }  

      //update book record  
      @PutMapping("/api/book/{id}")  
      public ResponseEntity<?> update(@PathVariable long id,@RequestBody Book book){  
           bookService.update(id, book);  
           return ResponseEntity.ok().body("Record are updated:");  
      }  

      //delete book record  
      @DeleteMapping("/api/book/{id}")  
      public ResponseEntity<?> delete(@PathVariable("id") long id){  
           bookService.delete(id);  
           return ResponseEntity.ok().body("Book record deteted");  
      }  
 }  

That’s it for the backend, now we have 5 REST API’s

OUTPUT

1. Create a new resource ( equivalent to SQL INSERT statement)       http://localhost:8081/bookapi/api/book
   
2. Retrieve a resource ( equivalent to SQL SELECT statement)    http://localhost:8081/bookapi/api/book
   
3. Update or modify a resource ( equivalent to SQL UPDATE statement)   http://localhost:8081/bookapi/api/book/2
   
4. Delete a resource ( equivalent to SQL DELETE statement)     http://localhost:8081/bookapi/api/book/3
   

By : Madhusanka Edirimanna
        Pramodi Samaratunga
        Undergraduates- University of Moratuwa

Software Design Patterns

Design Pattern 

“Each pattern describe a problem which occurs over and over again in our environment, and then describe the core of the solution to that problem, in such a way that you can use this solution a million times over, without ever doing it the same way twice”

 [Christopher Alexander]

Design Pattern Space

There are two criteria of  design patterns namely Purpose and the Scope.

Purpose - What pattern does

Mainly there are 23 design patterns which categories under three main categories. Those are Creational , Structural, and Behavioral patterns.

• Creational – Process of Object creation 
• Structural – Composition of Classes or Objects
• Behavioral – Classes or Objects interact and distribute responsibility 

Scope - Whether the pattern applied primarily to a class or an object

• Class – Deals with relationships between classes and sub-classes (Via inheritance and static) 
• Object – Deals with object relationships (can be changed at runtime and dynamic)

Advantages of Design Patterns

• Can reusable in multiple projects.
• They capture the software engineering experience.
• They provide transparency to the design of an application
• They are well-proved and testified solutions since they have been built upon the knowledge and experience of expert software developers
• These do not guarantee an absolute solutions.

Singleton Design Patterns

Singleton design pattern is one of the simplest design pattern and this categories under creational design pattern. this class have a single class which  create only one object.

Examples for singleton are

• Clip Board
• Windows Registry

Step 1 - Create a Singleton class

SingleObject.java

Step 2 - Get the only object from the singleton class

SingletonPatternDemo.java

Step 3 - Verify the Output

Written by - Pramodi Samaratunga

                     Madhusanka Edirimanna

Undergraduates - University of Moratuwa

Software Architectures

Enterprise Architecture is about understanding all of the different elements that go to make up the enterprise and how those elements interrelate

 -[The Open Group]-

Without Architecture

• Unpredictable Solutions

• Poor quality and reduced user experience

• Stunted evolution

• Rigid system - Hard to reuse 

There are many types of software architectures.

• Layered Architecture

• MVC Architecture

• Component Based Architecture

• Service Oriented Architecture

• Enterprise Architecture

In this article we only discus about the layered architecture and MVC architecture.

Layered Architecture

One of the most common architecture pattern is layered architecture that stand for most Java EE applications. Most of the time layered content four major layers namely presentation, business, persistence and database. But it is not specify special number of layers. These layers are organized as horizontal layers. In small applications there are only 3 layers and in complex application there are five or more layers. In an component it does not worry about other components’ logic.

Presentation layer – Responsible for handle the browser communication logic and user interfaces.

Business layer- According to the request this layer execute specific business logics.

Persistence layer – Contain the classes that responsible for technical stuffs.

Database – Represent data in the application and provide an interface to a database.

Fig.1.Layered Architecture

Applications of layered Architecture

•          World wide web

•         Web application development

•          Mobile application development

Advantages

•          Developer can work pararllelly in the application.

•          Increase the scalability, maintainability, and flexibility.

•          Have different levels of security.

•          Each component can work independently.

•          Can reuse the components by multiple applications.

Disadvantages

•          Add complexity to small applications. Not suitable for small applications.

•          Can decrease the performance because the data passing through components instead of directly call     for the components.

•          Sometimes difficult to decide the number of layers.

•          Chance of various improper stability issues if not handled correctly.

    MVC Architecture

MVC architecture is mostly use software architecture to develop applications. MVC stand for Model, View, Controller.

Model – All the logic related data that user work with is handle by Model. This can represent the data that transfer between the View and the Controller Components. This is like the database in your application.

View – All the UI applications that customer finally interact with are include in this component

Controller – This is act as an interface between Model and View. This process all the business logics.

Fig.2.MVC Architecture

Applications of MVC Architecture

• Development of mobile application

• This is first desktop application and now mostly use in web applications.

Advantages

•         Can create multiple Views of a Model.

•          Multiple users can access an do the development process. One can work in View while         other work with Controller. So the process is faster.

•         Support asynchronous techniques.

•         Can use for develop large web applications.

•         For the return of data, no need of formatting.

•          If we do a modification in a component it does not affect to whole architecture.

Disadvantages

•          Not suitable for small applications.

•         The complexity is high when develop applications.

•         Increase the cost because of frequent updates.

•         Required knowledge of multiple technologies.

•         Multiple developers need for parallel development.

Written by : Pramodi Samarathunga

                    Madhusanka Edirimanna

 Undergraduates - University of Moratuwa 

Lesson O1 - Angular 7

Structure Directives (ngIf  , ngFor , ngSwitch)

ඔයාලා මිට පෙර if else, switch case , for loop මෙන්න මේ වගෙ දෙවල් ටිකක් ගැන  C language  හො java වැනි language වලින් ඉගෙන ගෙන තියනව නම් ඔයාලට මතක ඇති  කියලා මන් හිතනවා. අන්න ඒ  වැඩ ටික කරගන්න තමයි angular වලදි මෙන්න මේ Structural Directives use වෙන්නෙ.

1)   අපි  බලමු ngIf Directive කියන්නෙ මොකද්ද කියලා.

මේකෙදි වෙන්නෙ සරල වැඩක් මොකක්  හරි variable එකක් true උනොත් මේ ngif එක යටතේ තියෙන දෙවල්  වැඩ කරනවා . එහෙම උනේ නැත්නම් ඒ කියන්නෙ false නම් වැඩ කරන්නෙ නෑ . පහත  නිදසුන බැලුවොත් ඔයාලට ඒක පැහැදිලි වේවි.

component.ts

component.html

ඔයාලට පහත ආකරයෙ output එකක් බලාගන්න පුලුවන් වෙවි.

මේක පහත ආකාරයට else part  එකක් add කර  ගන්න පුලුවන්.එකට ng-templete කියලා elements එක්ක හදා ගන්න වෙනවා.එහෙම  එක්ක හදා ගෙන ඒකට පහත ආකරයට reference variable assign කරගන්න ඕන.

component.ts

component.html

දැන් අපිට බල ගන්න පුලුවන්  true block එක වැඩ කරලා "Condition is true" කියල output එකක්. මොකද අපි ts file ඒකෙ "condition=true;" කරලා තියන නිසා.

දැන් අපි බලමු ngIf Directive වල special අවස්ථා ටිකක්.

1.1)  කොහොමද string value එකක් compare කරන්නෙ  කියලා.

component.ts

component.html

ඒකෙදි ඔයාලට බල ගන්න පුලුවන් වෙයි පහත ආකාරයෙ  output එකක්.

1.2) කොහොමද integer value එකක් compare කරන්නෙ  කියලා.

component.html

component.ts

ඒකෙදි ඔයාලට  පහත output එකක් බලා ගන්න පුලුවන් වෙවි.

ඉහත ආකාරයටම AND ,OR  Operations වලටත් ඔයාලා කරල බලන්න.

වැඩි විස්තර බලා ගන්න ඕනනමි පහත Link එක Click කරන්න.

https://angular.io/api/common/NgIf

2 )   දැන් බලමු ngFor Directive කියන්නෙ මොක්කද? කොහොමද                  එකෙන් වැඩ කරන්නෙ  කියලා.

for කියද්දි අපට මතක් වෙන්නෙ looping . මේ ngFor Directive එක use වෙන්නෙත් loop වලට . ඒ කියන්නෙ template  එකේ එකම component එකක් හරි form එකක් හරි කිහිපවතාවක් පෙන්නගන්න ඕන නම් . ඒ කියන්නෙ array එකක තියෙන elements ටික පෙන්නගන්න ඕන කියලා හිතන්න. මේ වගේ වැඩ වලට තමයි ngFor use කරන්නෙ .

දැන් මම පහත ආකාරයට array  එකක් හදා ගන්න ඕන.

  name=['Madhusanka','Edirimanna','Pramodi','Samaratunga'];

දැන් අපි මේක template එකේ එකින් එක පෙන්න ගන්නේ කොහොමද කියල බලමු .ඒකට මෙන්න මේ වගෙ syntax එකක් use වෙනවා.*ngFor='let myName of name';

මෙකෙන් කියවෙන්නෙ name කියන array එකෙන් එක බැගින් අරගෙන myName කියන variable එකට assign කරන්න කියන එක.මෙතන myName වෙනුවට අපට කැමති නමක් දෙන්න පුලුවන් . නමුත් name කියන එක වෙනස් කරන්න බෑ . ඒක තමයි array එකේ name(නම) එක.

දැන් ඉතින් Myname කියන variable එක view කරගන්න තියෙන්නෙ...ඒකට interpolation use කරන්න පුලුවන්.මතක ඇති component එකේ තියෙන දෙයක් template එකේ පෙන්නගන්න interpolation යොදා ගන්න ඕන. double curly brases දාගෙන.ඒකම තමයි මෙතනත් කරන්න තියෙන්නෙ .

component.html

component.ts

 මේක පහත විදියට view කරලා බලාගන්න පුලුවන් .

පහත ආකරයට  තමන්ට කැමති element විතරක් array එකෙන් view කර ගන්න පුලුවන්.ඒ සදහා පහත syntax භාවිතා කරන්න පුලුවන්.

component.html

component.ts

වැඩි විස්තර බලා ගන්න ඕනනමි පහත Link එක Click කරන්න.

https://coryrylan.com/blog/angular-ng-for-syntax

03 )   දැන් බලමු ngSwitch Directive කියන්නෙ මොක්කද? කොහොමද             එකෙන් වැඩ කරන්නෙ  කියලා.

java වල switchcase තේරුනා නම් මේකත් ඒ වගේමයි.හරිම ලේසියි.සමාන output කිහිපයක් තියෙද්දි  නිවැරදි එක තෝරගන්න තමා මේක use කරන්නෙ.java වල වගේම ngSwitch කියල මුලින්ම අදාල variable එක assign කරනවා . ඊට පස්සෙ *ngSwitchCase කියල selective ටික assign කරනව .  code එක බැලුවාම හොදටම පැහැදිලි වේවි ඔයාලට.

component.html

component.ts

වැඩි විස්තර බලා ගන්න ඕනනමි පහත Link එක Click කරන්න.

https://angular.io/api/common/NgSwitch


අපි එහෙනම්  next lesson එකෙන් හමුවෙමු.

By :- Madhusanka Edirimanna

Introduction to Japanese for Beginners......

As a beginner to japanese language you may know that there are three type of letter in japanese language.

1. Hiragana
2. Katakana
3. Kanji

To learn the language easily and quickly you should follow the above order of three type of letters.

Hiragana

Hiragana  letters usually have  phonetic sounds.These are basically used for particles, words and part of words. This express 46 different sounds used in the japanese language.when practising hiragana letters you will be able to pronouns japanese letters properly,read and write.If you learn hiragana first it will be easier to learn katakana next.

Katakana

These letters are basically used for foreign words.Katakana is a phonetic alphabet.Katakana was developed in the 8th century by simplifying the form of kanji symbols. Katakana and Hiragana represent exactly the same set of sounds.

Kanji

These are chinese characters and used for the stem of words and convey the japanese language.

********

As a beginner you should learn how to write and pronounce vowel letters in hiragana alphabet.

 Above letters are in the order of English Vowels A, I , U , E, O.

After practising vowel sounds in hiragana alphabet you should try following letters.

• Try the following exercise after practising above letters.

1. aka (red)
2. ao (blue)
3. aki (autumn)
4. ie (house)
5. koe (voice)
6. kao (face)
7. ue (on top)
8. kaki (permission)
9. eki (station)
10. okii (big)

By : Pramodi Samaratunga  - University Of Moratuwa 

        Madhusanka Edirimanna - University Of Moratuwa