Nuwana - Software Development

Introduction Angular යනු client side single page web applications develop කරන්න Google සහ Microsoft සමාගම් විසින් හදුන්වා දෙන ලද framework  එකකි ( Part of the view refresh asynchronously, not reload entire page). එහිදී AngulerJS  ලෙස මුල්ම version එක 2010 වසරේ හදුන්වා  දෙනු  ලබූ  අතර  ( Angular 1.0 is known as AngularJS) අතර  2016 දී  දෙවන version  එක ලෙස Angular 2 හදුන්වා  දෙන ලදී.මේ  වන විට  AngularJS (Angular version 1),Angular version 2,3,4,5,6,7 ... ලෙස version  කිහිපයක්ම release කර ඇත . In the single page application (SPA) SPA  වල්දී  user යම් event  එකක් ඇතිකලම ( click  on  a button, click on a  link ) server  එකෙන්  entire html page  එකක්ම ගේන්නේ නැතිව ,user ගේ event  එකට  අදාල data ටික විතරක් ගෙනල්ලා dynamically ව page rewrite කරනවා .මේක Angular app speed වෙන්න එක හේතුවක් වෙනව ( Part of the view refresh asynchronously, not reload entire page).   AngularJS සහ Angular (v2, v3, v4, v5, v6, v7, ..) අතර වෙනස්කම්.   AngularJS Angular1.0. JavaScript-based front-end

Architecture overview - Introduction Client side application development එක සැලකීමේදී , Usually, client   side   application   වලදී views තියනවා සහ එම views වලට data bind කරලා view එක render කරලා display කරනවා.එනම් user ගේ request   එක අනුව අවශ්‍ය data ටික යම් තැනින් ගෙන user ට interact වන ලෙස page එකකට data bind කරලා browser එකේ view කරනවා .තවද user අනුව display වන views සහ   data process   වෙන විදිහ වෙනස් වෙන්න පුළුවන්.උදහනයක් ලෙස   ebay application   එක සලකමු , Normally ebay use කරන clients ලට display වන views සහ front-end එකේ වන process වෙනම එකක් වගේම ebay admin කෙනෙක්ට අදාල වන ක්‍රියාවලිය වෙනම එකක්.එනම් , එකම application එක උනත්   admin module එක සහ client module එක යන ඒ ඒ   module වල කාර්යන් වෙනස්. එනම් same application එකේ module කිහිපයක් තියෙන්න පුළුවන් සහ ඒ ඒ module වලට අදාල views සහ views වලට අදාල process වෙනස් process තියනවා . Angular application එකක structure එකක ප්‍රදාන ලෙස පහත සදහන් කොටස් දැකගත හැක. 1)      Modules. 2)      Component.   01.   Modules. Ang

Architecture overview - Metadata Angular වලදී භාවිතා වන Metadata , Typescript class decorate කරන්න භාවිතා කරන අතර මෙම Metadata හරහා class එකක behaviour එක කොහොමද කියලා configure කරන්න පුළුවන්. TypeScript class – without metadata export class Department implements OnInit { } TypeScript class – with metadata  @Component ({ selector : 'app-department-detail' , template : ‘app/ department . component . hrml ’ styles : [] }) export class Department implements OnInit { } මෙහිදී @Component මගින් Department class  එක components ක් බව angular වෙත කියන අතර ''selector","templateUrl" වැනි decorators හරහා  class එකේ behaviour  එක configure කර ඇත.නමුත් මෙම Metadata එක භාවිතා කරන තුරු එය component එකක් බව  angular නොදනී. ( @Component is a  decorator  that gives the Deparment class more functionality using the metadata (selector, templateURL) associated with it). A  decorator is a function  that has a configuration object. Typescript class has

Architecture overview - Important files of angular application.  anguler.json This is the main configuration file which contain everything from starting point to output. We can define everything in this file. node_modules folder. Everything which we download from npm is stored in this folder. package.json That contain dependencies (library or modules) that are required the angular app to work. Packages listed in this files get installed, when you run the command ng new appName . All the packages get install inside the node_module folder.   src folder, This folder contain every required files. main.ts – it is the entry point of angular application.   App folder - Contains the all components files in which application logic and data is defined. Basically contain the business logic and the code which is required for the view.     App.module.ts – root module     App.components.ts – root components   Assets folder - This contain all the image ,styles , scripts and assets

Architecture overview - Angular application execution flow.  .........................................

  Architecture overview - Summary, Angular has modular approach, because of that, application which we have develop using angular has a clear structure. Angular has feature of components, so there are reusable code are in angular ( Newer angular is completely based on components. It consists of several components forming a tree structure with parent and child components. ).Angular has a lot of inbuilt capabilities such as validation, routing etc which will helpful to development quicker and easier. Easy to do the unit test.   Angular app – one or more modules. Modules – one or more components and services.  Modules interact and ultimately render the view in the browser. Services – Business logic  (Service is a basically a class which contain the business logic of the application.) Components – html + class (Each component has html template to resent the view in the browser and a class that controls the logic of that view)   Within any component components we can see, Template

Setting the development environment 01 .   node –go  https://nodejs.org/en/ and download, then install. 02.   npm –when we install the node , npm is also installed. 03.   anguler CLI – npm install -g @angular/cli    To check:  node –v Or node –version in CMD  Angular CLI provides command line tools start building fast, add components and tests, and then instantly deploy. We can use text editors like sublime , atom, visual studio code etc... Visual studio code - https://code.visualstudio.com   04.   ng new myApp   - create your first Angular app. 05.   cd myApp   - Navigate to your app. 06.   ng serve   - Start your server to run app.   07.   Creating a model – Example : ng g m sample-module ng generate module <name> [options] ng generate m <name> [options] ng g module <name> [options] ng g m <name> [options]   08.   Creating a component – Example : ng g c sample-component ng generate component <name> [options] ng gen