Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Angular Basics for Data Visualization - Introduction

Angular Basics for Data Visualization - Introduction


Nishan Chathuranga

November 26, 2020


  1. 99x.io Angular for Data Visualization +

  2. Angular for Data Visualization Presenters Software Engineer, 99X NishanW@99x.io Software

    Engineer, 99X RashanL@99x.io Nishan Wickramarathna Rashan Liyanage
  3. Web Servers

  4. The term web server can refer to hardware or software,

    or both of them working together. What is a Web Server • On the hardware side, a web server is a computer that stores web server software and a website's component files. (for example, HTML documents, images, CSS stylesheets, and JavaScript files) A web server connects to the Internet and supports physical data interchange with other devices connected to the web. • On the software side, a web server includes several parts that control how web users access hosted files. At a minimum, this is an HTTP server. An HTTP server is software that understands URLs (web addresses) and HTTP (the protocol your browser uses to view webpages). An HTTP server can be accessed through the domain names of the websites it stores, and it delivers the content of these hosted websites to the end user's device.
  5. Examples of web server uses Web servers often come as

    part of a larger package of internet- and intranet-related programs that are used for: • Sending and receiving emails; • Downloading requests for File Transfer Protocol (FTP) files; and • Building and publishing webpages.
  6. Common and top web server software on the market •

    Apache HTTP Server. Developed by Apache Software Foundation, it is a free and open source web server for Windows, Mac OS X, Unix, Linux, Solaris and other operating systems; it needs the Apache license. • Microsoft Internet Information Services (IIS). Developed by Microsoft for Microsoft platforms; it is not open sourced, but widely used. • Nginx. A popular open source web server for administrators because of its light resource utilization and scalability. It can handle many concurrent sessions due to its event-driven architecture. Nginx also can be used as a proxy server and load balancer.
  7. Frontend Frameworks

  8. Node.js Introduction • Node.js is an open source server environment

    • Node.js is free • Node.js runs on various platforms (Windows, Linux, Unix, Mac OS X, etc.) • Node.js uses JavaScript on the server • Node.js can generate dynamic page content • Node.js can create, open, read, write, delete, and close files on the server • Node.js can collect form data • Node.js can add, delete, modify data in your database
  9. Webpack is a popular module bundler, a tool for bundling

    application source code in convenient chunks and for loading that code from a server into a browser. WebPack Introduction
  10. JavaScript (also known as ECMAScript) started its life as a

    simple scripting language for browsers. At the time it was invented, it was expected to be used for short snippets of code embedded in a web page. we have a language that was designed for quick uses, and then grew to a full-fledged tool to write applications with millions of lines. Every language has its own quirks — oddities and surprises, and JavaScript’s humble beginning makes it have many of these. Some examples: Problem with JavaScript
  11. Solution: TypeScript Detecting errors in code without running it is

    referred to as static checking. Determining what’s an error and what’s not based on the kinds of values being operated on is known as static type checking. TypeScript checks a program for errors before execution, and does so based on the kinds of values, it’s a static type checker. For example, the last example above has an error because of the type of obj. Here’s the error TypeScript found:
  12. JSON - JavaScript Object Notation JavaScript Object Notation is an

    open standard file format, and data interchange format, that uses human-readable text to store and transmit data objects consisting of attribute–value pairs and array data types.
  13. SCSS/SASS - Syntactically Awesome Style Sheet Syntactically Awesome Style Sheet

    is the superset of CSS. SCSS is the more advanced version of CSS. Due to its advanced features it is often termed as Sassy CSS. SCSS have file extension of .scss.
  14. Which utilizes these technologies Frontend Frameworks

  15. Introduction to Angular

  16. Introduction to Angular • Angular is a framework for building

    client application in HTML, CSS and TypeScript(that compiles to JavaScript) • Angular uses the concept of single page application
  17. Advantages of single page application • Fast and responsive •

    Caching capabilities • Client-Side rendering • Easy debugging • Performance
  18. Angular Component A component have 3 basic part • Html

    • Css file • Component file
  19. Angular Communicate with back end • To communication with back

    end angular uses the concept of “services”
  20. Angular Life Cycle Hooks

  21. Introduction to APIs

  22. Introduction to APIs • API stands for application programming interface.

    This is a concept in software technology that essentially refers to how multiple applications can interact with and obtain data from one another.
  23. Introduction to API

  24. REST (Representational State Transfer)API • A RESTful API is an

    architectural style for an application program interface (API) that uses HTTP requests to access and use data • That data can be used to GET, PUT, POST and DELETE data types, which refers to the reading, updating, creating and deleting of operations concerning resources.
  25. CRUD Operations

  26. CRUD Operations

  27. WEB SOCKET • WebSocket is an advanced technology that allows

    real-time interactive communication between the client browser and a server
  28. WEB SOCKETS • Web Sockets on the other hand don’t

    need you to send a request in order to respond. They allow bidirectional data flow so you just have to listen for any data • You can just listen to the server and it will send you a message when it’s available
  29. Web sockets are good for.. • Real-time applications • Chat

    apps • IoT (internet of things) • Online multiplayer games
  30. Thank you 99x.io

  31. Resources • What is the difference between CSS and SCSS?

    • TypeScript for the New Programmer • COVID-19 LK History API • COVID-19 HPB API • Demo Project • JSON2Ts • Loading Animation Library