Discover Angular

By Ashlan Chidester

What you can expect from this book:

 

1-way data binding in Angular refers to the process of passing data from the component's TypeScript code to the component's template (HTML). This allows the component to control the data that is displayed in the view.In 1-way data binding, changes made in the component's TypeScript code will be reflected in the template, but changes made in the template will not be reflected back to the component's TypeScript code. 1The main ways to implement 1-way data binding in Angular are:

Interpolation: Using double curly braces {{ }} to display a component property in the template. For example, 

{{ title }}

 will display the value of the title property from the component's TypeScript code.

Property binding: Using square brackets [ ] to bind a component property to an HTML element property. For example,  will set the src attribute of the img element to the value of the imageUrl property in the component. 

This 1-way data flow allows the component to be the single source of truth for the data displayed in the view. Changes originating from the component's TypeScript code will automatically update the template, providing a seamless user experience.

 

...and MUCH MORE!

 

• Language: English
• Publisher: Ashlan Chidester
• Release date: Apr 23, 2024
• ISBN: 9798224446049

Ashlan Chidester

Thank you!

Book preview

Discover Angular

Ashlan Chidester

Published by Ashlan Chidester, 2024.

While every precaution has been taken in the preparation of this book, the publisher assumes no responsibility for errors or omissions, or for damages resulting from the use of the information contained herein.

DISCOVER ANGULAR

First edition. April 23, 2024.

Copyright © 2024 Ashlan Chidester.

Written by Ashlan Chidester.

Table of Contents

Title Page

Copyright Page

Dedication

Discover Angular

To my dog Winston. 

Discover Angular

By Ashlan Chidester

Prerequisites

Node as a JS runtime; npm as a package manager

Node.js

Node.js is an open-source, cross-platform run-time environment built on Chrome's V8 JavaScript engine.

Node.js is used to execute JavaScript code outside of a web browser. It provides a library of various JavaScript modules, which simplifies the development of web applications.

npm - node package manager

npm is a package manager for the JavaScript programming language. It is the default package manager for the JavaScript runtime environment -Node.js.

npm consists of three components - the website, the Command Line Interface (CLI), and the registry. The website discovers packages, set up profiles, and manage access to public or private packages. The CLI runs from a terminal and allow us to interact with npm. The registry is a public database of JavaScript packages comprised of software and metadata.

Why we need Node.js for Angular

We use Node.js and npm as tools for building Angular or React apps. Angular is a front-end framework used to create a web application and is written in Typescript. The browser only understands JavaScript code, so we need to compile Typescript (.ts file) to plain JavaScript (.js file). We use Node.js and npm to perform this compilation, then we can deploy them in production.

Installation of Node and npm

We need to add Node.js and an npm package manager to our development environment.

•  Download Node.js from nodejs.org and install it. To check the version, run node -v in a terminal.

•  The npm CLI gets installed with Node.js by default. To check that you have installed npm, run npm -v in a terminal. npm can install packages in a node_modules folder in our working directory.

References

•  Angular Docs - Setup

Angular CLI

Angular CLI

The Angular CLI is a command-line interface for Angular that helps us to get started with creating an Angular application. Angular CLI creates an Angular application and uses the typescript programming language, web pack for Module bundling, Karma for unit testing, and Protractor for end-to-end testing. The Angular CLI takes care of the configuration and initialization of various libraries. It also allows us to add components, directives, services, etc, to already existing Angular applications.

Installing Angular CLI

Before installing Angular CLI, make sure the development environment includes Node.js and an npm package manager.

•  Run the command npm install -g @angular/cli on the terminal to install the Angular CLI using npm.

•  Run the CLI command ng new my-app to create a