kaveer's blog

Download Node.js Download Node.js NVM (Node Version Manager) Download and install NVM: GitHub - coreybutler/nvm-windows Command: Install a version of Node: nvm install 14.15.1 Use a version installed: nvm use 14.15.1 List all installed Node versions: nvm list Install Angular CLI npm -g @angular/cli Create Project Create a new Angular project: ng new [AppName] Or with a specified prefix: ng new [AppName] --prefix [PrefixName] All generated components will have the prefix in the selector o

Features of Angular Two-Way Data Binding Data binding is automatic and fast. Changes made in the View are automatically updated in the component class and vice versa. Powerful Routing Support The Angular Powerful routing engine loads the page asynchronously on the same page, enabling us to create Single Page Applications. Expressive HTML Angular enables us to use programming constructs like if conditions, for loops, etc., to render and control HTML pages. Modular by Design Angular follows the modular design. You can create Angular modules to better organize and manage our codebase. Built-in Back End Support Angular has built-in support to communicate with the back-end servers and execute any business logic or retrieve data

The first big change in Angular over AngularJs is Components. Components replace the Controllers of AngularJs. But that is where the similarity ends. Angular Components do not look like Controllers. The Components are actually similar to the directives of AngularJs. Angular Architecture The architecture of an Angular Application is based on the idea of Components. An Angular application starts with a Top-level component called Root Component. We then add child components forming a tree of loosely coupled components. Angular Modules The Angular provides a nice way to organize Components, Services, Directives by using the concept called Angular Modules. Special directives are used to create the Modules. The Angular Module is also called ngModule. Use Angular Module (or ngModule) to organize all the Angular code within a bigger Angular Application. The Application is made up of several Angular Modules acting toge

What is Angular CLI The Angular CLI helps us to quickly create an Angular application with all the configuration files and packages in one single command. It also helps us to add features (components, directives, services, etc) to existing Angular applications. The Angular CLI creates the Angular Application and uses: Typescript, Webpack ( for Module bundling), Karma ( for unit testing), Protractor ( for an end-to-end testing). How to Create a new Angular project Before starting with Angular, you need to set up your developer environment and install the required tools. Before going further install the following: Visual Studio Code (or any other editor of your choice) NPM Package Manager Installing Angular CLI The first step is to install the Angular CLI. We use the npm install command. npm install -g @angular/cli@latest The above command installs the latest version

What is Bootstrapping? Bootstrapping is a technique of initializing or loading our Angular application. Let’s walk through the code created in "Create your First new Angular project" and see what happens at each stage and how our AppComponent gets loaded and displays “app works!”. Angular takes the following steps to load our first view: Index.html loads: The initial HTML file is loaded into the browser. Angular, Third-party libraries & Application loads: Angular framework and any third-party libraries are loaded. Main.ts - the application entry point: The main.ts file is executed, which bootstraps the Angular application. Root Module: The root module ( AppModule ) is loaded. This module organizes the application code and defines the components, services, and other features used in the application. Root Component: The root component ( AppComponent ) is loaded. This component serves as the starting point of the application and is defin

What is an Angular Component The Component is the main building block of an Angular Application. The component contains the data & user interaction logic that defines how the View looks and behaves. A view in Angular refers to a template (HTML). The Angular Components are plain JavaScript classes and defined using @Component Decorator. This Decorator provides the component with the View to display & Metadata about the class The Component is responsible to provide the data to the view. The Angular does this by using data binding to get the data from the Component to the View. This is done using the special HTML markup knows as the Angular Template Syntax. The Component can also get notified when the View Changes. The Angular applications will have lots of components. Each component handles a small part of UI. These components work together to produce the complete user interface of the application The Components consist of three

What is Angular Data Binding Data binding is a technique, where the data stays in sync between the component and the view. Whenever the user updates the data in the view, Angular updates the component. When the component gets new data, Angular updates the view. There are many uses of data binding. You can show models to the user, dynamically change element style, respond to user events, etc. Data Binding in Angular The data binding in Angular can be broadly classified into two groups: One-way binding Two-way binding One-way binding In one-way binding data flows from one direction. Either from view to component or from component to view. From Component to View To bind data from component to view, we make use of Interpolation & Property Binding. Interpolation Interpolation allows us to include expressions as part of any string literal, whi