Day 15 : Simple Angular UI

-

     As we discussed before the angular concepts.....using that now we are going to build a simple app.....

  • Angular contains the components to build a application :
  1.  A component class handles data and functionality.
  2. An HTML template determines the UI of application.
  3. Specific styles in component defines the looks and styles of application.
  • As we are created the application file earlier for HospitalManagement we are updating their further....
Create a folder :
  • Create a new file in HospitalManagement/EMR/src/app as app.model.ts.

app.model.ts :
  • We have created this new file.
  • We have to import this file in appComponent so we have to export this so that we can use the declarations.
  • An array stores multiple values as we all know, here we have declared array with genric type i.e  Array<element type>.
  • For now we are not going to see the array.....in upcoming blogs we are going to learn this. 
                                       


app.module.ts :
  • This is the root module of angular files, it organizes and separates your code.
  • We can import any other module in 'imports', as i have imported FormsModule which is not their at start. If you not import this FormsModule you can get error like "Can't bind to 'ngModel' since it isn't a known property of 'input' " .
  • We can declare components in 'declarations' , any component used in routing in that module must declared in this section.
  • We provide services in 'providers' section.
  • One thing which i have also get confused here we use 'NgModule' as a component and at binding side we use 'ngModule'.


app.component.ts :
  • Here we import the Patient class from app.model.ts.
  • The Components are defined using @Component decorator, it contains selector, template, style and other required properties.
  • This specifies the metadata required to process the component.
  • Here we created the object of Patient and Array<element> .
  • The this.patientObjs is used to store show the entered data and this.patientObj is used to clear the block.



app.component.html :
  • Angular is a framework which allows us to create "Single Page Applications". Here we write the basic HTML code.
  • This file shows the component view.

Output :
Whenever we type in the block the same will be shown below the add button and when we click Add button it will updated/added in the table below.



For more understanding watch below video :
Angular


Thank You!!!

Comments

Post a Comment

Popular posts from this blog

Day 3 : JavaScript

-
Image
 Data Types of JavaScript:  In JavaScript, their are three data types present i.e number, string and boolean. As we all know JavaScript is a dynamic language, means one variable can hold different datatypes.                    Example :                                      var x;                                      x=10;              //number                                      x="Hello"      //string                     // In above eg. the x holds number as well as string but shows string.                 ...
Read more

SQL Concepts-1

-
Image
              In this blog we are going to understand the important and basic concepts of SQL... Q. How to  create a SQL server database  connection and new database? 1. Firstly open SSMS and connect with server also ensure SQL Server(MSSQLSERVER) is in running mode - 2. Create a new database -                                                              3. Create a table - // U need to refresh whenever u add a new table            Q. What is primary key and foreign key in SQL server? Primary Key :  Primary key is a column having unique record. Primary key cannot have NULL values. It is used to uniquely identify records in relational database. Only one primary key is allowed in a table. When we delete or update records, data integrity happens. Foreign Key...
Read more

ASP .NET Session Management

-
Image
  Q. Why http protocol is called as stateless ? HTTP protocol is called as stateless because the http server not keeps the record of any information. When client requests to server, every time request treated independently(it not checks whether it requested before or not) by server. We can also say that when client ends the process of any task the connection between server and browser also terminated. In below example we can see that after accessing browser when we again access the value of i starts again from 0.                                                   Stateless Protocol : Stateless protocols are the protocols in which client sends request to server and server response back to client based on current state.  Server not require to maintain information of each client with multiple requests. Some important features of stateless protocol are :...
Read more