Angular Best Practices

Hi Friends, This is Lakshman here. As part of the Series "Angular Best Practices". Today, We will Implement Resolver for your angular app . Pre-requisites: The pre-requisites are Node.JS - Click Here Angular CLI - Click Here VS Code - Click Here Creeate Resolver - Click Here Angular Snippets (Version 11) Click Here For Code Editor its VS Code . Resolver In Angular Application, every page requires some information to display it. By Default, every developer call service to fetch some information to display in OnInit Function inside Component. Most people forgot about Resolver itself. It helps our application to way better than you think. Service & Resolver has to be like bread & butter to Solve Data dependencies on Page Load. Things to know By default, we have the option to Create Resolver via Angular-CLI after cli version 11.0.5 or greater. Add Angular Snippets from Extension Marketplace. Each Resolver can have only one resolve method. Things to...

Hi Friends, This is Lakshman here. Welcome back to the Series Angular Best Practices Today, We will go through, how to Create you First Testing in Angular App. Angular Testing As we develop the application, we usually validate the functionality via Serving the Application and check it's working or not. What if we need to check for multiple workflows per functionality either way as Positive & Negative Scenario. As a default, it has two types of tests, Unit Testing (via Karma ) End-To-End Testing (via Protractor ) Unit Testing On Unit Testing, its available for * Components * Service In Testing, we can test the two elements such as * HTML Testing * Code Testing Testing Files will be available with extension as .spec.ts By Default, angular generate the template below, import { async, ComponentFixture, TestBed } from '@angular/core/testing'; import { HelloComponent } from './hello.component'; describe('HelloComponent', () => { let comp...

Hi Friends, This is Lakshman here. As part of the Series "Angular Best Practices". Today, We will go through Practices to followed on Handling Multi-Environment for Angular App. In all command, request to use Angular CLI installed in App's Dev Dependencies. In package.json "scripts": { "ng" : "ng" , ... } , "devDependencies": { ... "@angular/cli" : "~10.0.6" , ... } , ... Angular Environments As Default, The Angular creates environment.ts & environment.prod.ts files to Handle Environments. Usual Environment variables are, Production Flag. API Url, etc., If we have more than Two Environments such as QA, UAT, we usually create environment.qa.ts & environment.uat.ts and configure variables. The Current problems were, We are needed to create each file per environment, which drives to rebuild application per environment. Can't able to Change variables While App...

Hi Friends, This is Lakshman here. As part of the Series "Angular Best Practices". Today, We will go through Practices to be followed for Implement Service with Resolver If you're required to know, Options to Setup Angular Environment Click Here Practices for Your First Angular App Click Here To Implement Your First Module Click Here I have covered things using Angular CLI in Windows. In all command, request to use Angular CLI installed in App's Dev Dependencies. In package.json "scripts": { "ng" : "ng" , ... } , "devDependencies": { ... "@angular/cli" : "~10.0.6" , ... } , ... Service In Angular Application, we should not operate Fetch & Save Data within Component. For that purpose, we start using Service. By Default, every developer thing of Angular Service is only to consume data via API. It is more than it. Things to know A Piece of Code required to write...