shruti1312/angularapp-angular-version-8-

Asynchronous (AJAX) Weather Website with client-side in Angular2+ and back-end served by node-js (expressjs)

AngularApp

About the App

It's a webpage that allows users to search for weather information using the Forecast.io API and display the results on the same page below the form. The user provides the location information such as Street address, City and State for which they would want to find the detailed weather information or provide their current location. Once the user has provided the data and clicks on the Search button, validation must be done to check that the entered data is valid. Once the validation is successful, 3 tabs should be displayed. The 3 tabs correspond to Current tab, Hourly tab and Weekly tab. Webpage also supports adding cities to and removing cities from the Favorites tab and sharing the weather info with Twitter.

Usage of these concepts and technologies:

• Get familiar with the AJAX and JSON technologies
• Used a combination of HTML5, Bootstrap, and Angular on client side.
• Used JavaScript / Node.js on server side
• Get familiar with Bootstrap to enhance the user experience using responsive design.
• Get hands-on experience of Amazon Web Services/Google Cloud App Engine/Microsoft Azure.
• Used APIs such as Forecast.io API, Google Customized Search API and Twitter API.

Backgroud

AJAX and JSON

AJAX (Asynchronous JavaScript + XML) incorporates several technologies:

• Standards-based presentation using XHTML and CSS
• Result display and interaction using the Document Object Model (DOM)
• Data interchange and manipulation using XML and JSON
• Asynchronous data retrieval using XMLHttpRequest
• JavaScript binding everything together

JSON, short for JavaScript Object Notation, is a lightweight data interchange format. Its main application is in AJAX web application programming, where it serves as an alternative to the use of the XML format for data exchange between client and server.

Bootstrap

Bootstrap is a free collection of tools for creating responsive websites and web applications. It contains HTML and CSS-based design templates for typography, forms, buttons, navigation and other interface components, as well as optional JavaScript extensions. To learn more details about Bootstrap please refer to the lecture material on Responsive Web Design (RWD). Please use Bootstrap 4 in this homework. See the class slides at:

Angular

Angular is a toolset for building the framework most suited to your application development. It is fully extensible and works well with other libraries. Every feature can be modified or replaced to suit your unique development workflow and feature needs. Angular combines declarative templates, dependency injection, end to end tooling, and integrated best practices to solve development challenges. Angular empowers developers to build applications that live on the web, mobile, or the desktop

Node.js

Node.js is a JavaScript runtime built on Chrome's V8 JavaScript engine. Node.js uses an eventdriven, non-blocking I/O model that makes it lightweight and efficient. Node.js package ecosystem, npm, is the largest ecosystem of open source libraries in the world. To learn more about Node.js, visit:https://Node.js.org/en/

Also, Express.js is strongly recommended. Express.js is a minimal and flexible Node.js web application framework that provides a robust set of features for web and mobile applications. It is in fact the standard server framework for Node.js. To learn more about Express.js, visit: http://expressjs.com/