This application is built using two of the most powerful and popular resources, Angular 8 and material design.
To bring live news articles the application uses HTTP requests to fetch news articles from News API.
By consuming the News API, the application is able to get the latest live news articles from a range of sources, including BBC News, CNN, TechCrunch, Huffington Post and more, along with different categories, like technology, sports, business, science and entertainment.
- The application extensively uses Angular 8.
- Why Angular ?
- To communicate with back-end services over the HTTP protocol by using HttpClient module to easily interact with News API.
- The model-view-viewmodel(MVVM). This becomes handy when it comes to binding the remote data that will be stored in objects into the application template, where the component plays the part of the controller/viewmodel and where the template represents the view (Angular template language).
- Single Page Application(SPA) technology. Loading only the part of a page that needs to be changed to help the application load and perform more quickly and smoothly.
@Angular/Material Design - It's a suitable fit for Angular and to aid the visual aspect of the application and also to make the application responsive. It's also the official material design package for the Angular framework.
@Angular/Animations - To provide the illusion of motion that is HTML elements changing styling over time to make the application more fun and easier to use.
@Angular/CDK - Component Dev Kit which provides high quality predefined behaviours for components.
Progressbar - To enhance the user experience by creating a visual animation in the application that convices the user something is happening, since the application is making requests to a remote server.
This project was generated with Angular CLI version 8.3.2.
For a dev server, run:
$ ng serve
Navigate to https://localhost:4200/
. The app will automatically reload if you change any of the source files.
To build the project, run:
$ ng build
The build artifacts will be stored in the dist/
directory. Use the --prod
flag for a production build. That's
$ ng build --prod
To execute the unit tests via Karma run:
$ ng test
-
To get more help on the Angular CLI use
ng help
or go check out the Angular CLI README. -
To learn more on Angular template language visit https://angular.io/guide/template-syntax .
-
What is Angular - Angular is a platform that makes it easy to build applications with the web. 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.
-
There are many other benefits and features of Angular other than those stated above, which you can look uo with a quick online search.
-
What is Google's Material Design - It’s an adaptable system of guidelines, components, and tools that support the best practices of user interface design. It’s also backed by open-source code and supported by a large community of designers and developers who are collaborating together to build beautiful products.
-
The official Angular material documentation gives you an exact code needed to import each module.
-
Learn more about Angular Animations - https://angular.io/guide/animations
-
To find out more about Angular CDK, checkout this article
-
Learn more about using loaders - https://github.com/MurhafSousli/ngx-progressbar/blob/master/README_V3.md#installation