DEV Community: Nalaka Jayasena

A tour of Angular for web developers: Composing the user interface with components

Nalaka Jayasena — Sun, 23 Aug 2020 18:45:21 +0000

This is the second part of our brief tour of the Angular framework. In this post, we take a closer look at the primary building block of an angular application, the component.

This series is best read in sequence, as each one usually builds upon the previous ones. The target audience is somewhat experienced web developers, specially those coming from another framework like React, Vue, or Ember. However, even if you are a beginner with a decent grasp of HTML, CSS, TypeScript, HTTP and NodeJS, you should still be able to easily follow along. and at the end of the series, have a good idea of how Angular works and how to go about using it to build modern web applications.

The journey so far
The anatomy of a component
Interpolation
Pipes
A new pipe
A new component
Repeating UI elements
Conditionally rendering elements
Binding to properties, events, and attributes
Passing data between components
What's next

The journey so far

In the previous post, we created a new Angular workspace and then added a web application project to it. If you haven't read through that yet, please go ahead and do.

A tour of Angular for web developers

Nalaka Jayasena ・ Aug 22 '20

#angular #webdev #tutorial

Here's a recap of the commands we used:

# Install ng (The Angular CLI)
npm install -g @angular/cli

# Create an empty workspace
ng new into-angular \
        --strict --create-application="false"

# Create a web app project
ng generate application hello \
       --strict  --inline-template  --inline-style

cd into-angular  

# Run hello project in local dev server
ng serve hello --open             

# Run unit tests for hello project
ng test hello

# Run end-to-end tests for hello project
ng e2e hello

# Do a production build on the hello project
ng build hello --prod

# Install serve (simple web server)
npm install -g serve

# Serve the production build locally
serve into-angular/dist/hello

Back to TOC.

The anatomy of a component

Now open the into-angular/projects/hello/src/app/app.component.ts file. It defines AppComponent, the component that sits at the top of the component hierarchy making up our apps' user interface.

The generator has populated this file with some content useful for Angular novices. After having a look at that, delete everything and replace it with:

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  template: `
    <div>
      <h1>Hello {{ name }}!</h1>
    </div>
  `,
  styles: ['h1 { color: darkred; }']
})
export class AppComponent {
  name = 'world';
}

This is the classical "Hello World Program"- a minimal program that displays the text "Hello World!".

If the ng serve command was already running when the above change was made, you should see the development server picking up the change to the app.component.ts file, do a build, and hot reload the browser; this time with just the text "Hello World!".

Let's take a closer look:

The @Component decorator "decorates" the plain class AppComponent with component metadata and identifies it as a component.

The selector is a CSS selector expression for locating DOM nodes where this component should be attached to.
The template is a string of HTML that represents the structure of the contents of this component.
The styles is an array of CSS strings that applies styling to the DOM elements making up this component.

Having the components' code, the HTML template, and the CSS styles in a single app.component.ts file was a nice feature. However, for more complex components, it is more convenient to move the HTML and CSS files to separate files. We can do that with this:

@Component({
  selector: 'app-root',
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"]
})

In fact, this is the default behavior. It is what would have been generated if we had omitted the --inline-template, and --inline-style options to the ng generate application command.

Back to TOC.

Interpolation

The HTML template in above example contains a template expression enclosed in a pair of double braces.

<h1>Hello {{ name }}!</h1>

Template expressions are side-effect free JavaScript expressions that are evaluated in the context of a component object. In this case, the context is:

name = 'world';

Since the components' name property is initialized to the value 'world', when the component first renders, we see that the text node inside the h1 element contains the text Hello world!.

If we programmatically change change the value of the components' name property, Angular will detect the change, re-evaluate the template expression, and update the DOM.

Back to TOC.

Pipes

Try changing the template expression to:

<h1>Hello {{ name | uppercase }}!</h1>

What do you see on the screen. Can you guess what's going on?

Try changing to:

<h1>Hello {{ name | uppercase | titlecase }}!</h1>

What do you see on the screen?

The "|" character is used in template expressions to act as a "pipe" that pumps the left-side expression as a parameter to the function on the right. These can be chained as we see above to form a "pipe line" through which the value of the left most expression flows through.

The expression name starts with the value "world"
The expression name | uppercase is equivalent to uppercase("world"), which evaluates to WORLD
And name | uppercase | titlecase is equivalent to titlecase(uppercase(name) which evaluates to titlecase("WORLD") which finally evaluates to "World"

So we can use pipes to transform our template expressions. Angular comes with a bunch of built-in pipes, let's try the date pipe to format a time string:

{{ currentTime | date: 'h:mm a on MMMM d, y' }}

Of course you need the currentTime property set in the component:

currentTime = Date()

It is also quite easy to create our own custom pipe- it is just a simple function after all.

Back to TOC.

A new pipe

Let's create a funkycase pipe that changes "world" to "wOrLd"

ng generate pipe funkycase

Notice that we didn't specify a project name as the hello project is used by default.

Run the unit tests with ng test - notice the new test that was created for our "funkycase pipe"

Try applying our new pipe:

<h1>Hello {{ name | funkycase }}!</h1>

We only get Hello !

The template expression has produced and empty result- i.e. funkycase("world") hasn't returned a valid value. Let's open the generated into-angular/projects/hello/src/app/funkycase.pipe.ts and fix this:

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'funkycase',
})
export class FunkycasePipe implements PipeTransform {
  transform(value: unknown, ...args: unknown[]): unknown {
    if (typeof value === 'string') {
      return [...value]
        .map((character, index) =>
          index % 2 === 0
            ? String(character).toLowerCase()
            : String(character).toUpperCase()
        )
        .join('');
    }

    return value;
  }
}

[Line 3-5] The @Pipe decorator marks our FunkycasePipe class as a pipe
[Line 6-7] Our class implements transform() from the PipeTransform interface.
[Line 9] First we use the ... syntax to spread out the string valued input into an array of strings
[Line 10-13] Then we map over this array collecting the "lowercase version if the index is even" and the "uppercase version otherwise" to a new array
[Line 15] Finally we join this new array to form the end result
[Line 18] If the input value is not a string just return it back

Let's add some more unit tests for this in app.component.spec.ts

it('handles a string', () => {
  const pipe = new FunkycasePipe();
  expect(pipe.transform('apple')).toEqual('aPpLe');
});

it('handles a number by passing it through unchanged', () => {
  const pipe = new FunkycasePipe();
  expect(pipe.transform(42)).toEqual(42);
});

Run ng test to see if all is still well.

You may get an error regarding funkycase not found from the AppComponnt unit tests. This is because the "Test Bed" used for running the AppComponent unit tests doesn't declare the FunkyTestPipe.

We can fix this in the app.component.spec.ts file, in the beforeEach call, change:

+- declarations: [AppComponent, FunkycasePipe],
-- declarations: [AppComponent],

Why did you not get this error when running the app? This is because the ng generate pipe command updated the app.module.ts and added the FunkyTestPipe to the declarations array in the module metadata object.

Back to TOC.

A new component

Let's create a new component:

ng g component foobar -st

This time, we've used the shorthand syntax:

g is short for generate
-s is short for --inline-styles
-t is short for --inline-templates

Two files are generated:

into-angular/projects/hello/src/app/foobar/foobar.component.ts
into-angular/projects/hello/src/app/foobar/foobar.component.spec.ts

And the AppModule definition in app.module.ts file is updated to add the FoobarComponent to its list of declarations.

@NgModule({
  declarations: [AppComponent, FunkycasePipe, FoobarComponent],
  imports: [BrowserModule],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

What this means is, that the FoobarComponent belongs to the AppModule .

As we can see, we also have FunkycasePipe in the declarations metadata field. Also, an Angular component is really a special case of what is known as a "directive". Components, pipes, and directives are known as declarables.

Every component, pipe, and directive should belong to one and only one Angular module. This is because Angular uses NgModules to group those three types of things and allow those to refer to each other.

So, since both the AppComponent and FunkycasePipe belong to the AppModule, we can reference the FunkycasePipe as funkycase pipe from inside the HTML template of the AppComponent.

Open the app.component.ts file. There is no import statement for FunkycasePipe in that file, but the HTML template has the expression {{ name | funkycase }}. And it works!

Remove FunkycasePipe from the AppModule's declrations field and see what happens.

ERROR in projects/hello/src/app/app.component.ts:8:20 - error NG8004: No pipe found with name 'funkycase'.

8       <p>{{ name | funkycase }}</p>

Revert that change to fix.

Let's use our new component inside the AppComponent. Because the selector metadata field for FoobarComponent is set to app-foobar, we only need to append the following to the AppComponent template:

<app-foobar></app-foobar>

Run ng test and ng e2e, just in case we broke anything. Everything should check out.

Back to TOC.

Repeating UI elements

Right now, our FoobarComponent just display the text "foobar works!". Let's go work on it.

Change the template to:

<ul>
  <li *ngFor="let item of items">{{ item }}</li>
</ul>

And add the items property:

items = ['foo', 'bar'];

The ngFor is a structural directive. It is called an structural directive because it affect the structure of the view by creating or removing elements.

Back to TOC.

Conditionally rendering elements

Another structural directive is ngIf, let's see it in action by replacing he FoobarComponent template with:

<div>
  <h3>Your options</h3>
  <ul>
    <li *ngFor="let item of items">{{ item }}</li>
  </ul>

  <div *ngIf="selectedItem == ''">
    Please type-in one of the options.
  </div>
  <div *ngIf="items.includes(selectedItem)">
    Selected option is: <strong>{{ selectedItem }}</strong>
  </div>
</div>

And adding the selectedItem property:

selectedItem = '';

At this point, our app should look like this:

Back to TOC.

Binding our component to the DOM element

Let's add an input element where we can type-in our selection. Add this HTML to the end of the FoobarComponent template (between line 12 and 13 of previous code listing):

<div>
  <input
    #txt
    type="text"
    [value]="selectedItem"
    [attr.aria-label]="ariaLabel"
    [class]="customClasses"
    [style]="customStyles"
  />
  <button (click)="handleClick(txt.value)">Select</button>
  <p *ngIf="msg != ''">{{ msg }}</p>
</div>

Also add these properties in our component:

ariaLabel = 'Option to select';
customClasses="class1 class2";
customStyles = 'width: 200px; background-color: lightblue';

We have a bunch of new concepts in this one short code snippet:

The#txt syntax declares a template reference variable with the name txt, which we can use to refer to the corresponding DOM element, as done at line 10 above.
The [value]="selectedItem" is a property binding. This binds the selectedItem property on our component with the value property on the DOM element. The binding is one-way. When the selectedItem property changes, the DOM property is updated. But when the value DOM property is updated as a result of user interaction on the web page, that change does NOT automatically updates the selectedItem property on the component.
The [attr.aria-label]="ariaLabel" is an attribute binding. The reason for having this type of binding is that there are some HTML element attributes that do not have corresponding DOM properties. Like. for example, the aria-label attribute.
The [class]="customClasses" is a class binding. This binds the customClasses property of the component, which in this example is a space seprated list of CSS classes, to the classes that are actually attached to the DOM element.
The [style]="customStyles" is a style binding. This binds the customStyles property of the component, which contains a semicolon seprated list of CSS styles, to the DOM element.
The (click)="handleClick(txt.value)" is an event binding. This binds the handleClick method on the component with the click event on the DOM element. So every time the click event fires, our handleClick method gets invoked. Notice how we have used the template reference variable txt to access the DOM element here.

Back to TOC.

Passing data between components

Like we discussed before, a component is responsible for a chunk of our applications' user interface. For better mantainability, components keep largely to themselves and has no idea what's going on outside themselves. But when we compose our application out of a hierarchy of components, we need a way to send data into a component and get data out of that component. For this, Angular provides the Input and Output decorators:

Let's create a new component to understand how this works in practice:

ng g component baz -st

Replace the generated Baz component code in baz.component.ts with this:

import { Component, Input, Output, EventEmitter } from '@angular/core';

@Component({
  selector: 'app-baz',
  template: `
    <div>
      <p>{{ msg }}</p>
      <input #txt type="text" />
      <button (click)="handleClick(txt.value)">Ok</button>
    </div>
  `,
  styles: [
    'div{margin: 10px; padding: 5px; width: 200px; border: 1px solid grey}',
  ],
})
export class BazComponent {
  @Input() msg: string = 'Default prompt';
  @Output() nameSelected = new EventEmitter<string>();

  handleClick(val: string) {
    this.nameSelected.emit(val);
  }
}

And use the Baz component from inside the App component like this:

<app-baz [msg]="msgIn" (nameSelected)="onNameSelected($event)"></app-baz>
<p>
  Name received from the baz component:<br />
  <code>{{ nameOut }}</code>
</p>

You need to append the above HTML code to the template in the app.component.ts file, and the below TypeScript code to the class body.

msgIn = 'Please enter your name';
nameOut = '<No Ourput from child component yet>';

onNameSelected(name: string) {
  this.nameOut = name;
}

The Baz component displays a customisable message, reads user text input, and provides an Ok button that when clicked emits a custom event with what the user entered in the text box. Let's see it in action:

The displayed message is customisable by the parent component.

@Input() msg: string = 'Default prompt'

The Input decorator marks msg as an input property.

To the parent component, msg is "bindable" just like a DOM property:

<app-baz [msg]="msgIn"></app-baz>

The child component fires output events and the parent component binds to these events using the familiar event binding syntax.

<app-baz (nameSelected)="onNameSelected($event)"></app-baz>

The Output decorator is used on a field in the child component to declare that field as an output event.

  @Output() nameSelected = new EventEmitter<string>();

When the child component has data it needs to ouput, it uses nameSelected and emit an event with that data as the payload:

this.nameSelected.emit(val);

Back to TOC.

What's next

The code for our workspace as at the end of this post can be found under the p02 tag in the nalaka/into-angular repository.

nalaka / into-angular

Code for the dev.to series "A tour of Angular for web developers"

In the next post we will see how to create services that interact with the world outside our component and how to inject them where they are needed.

Following this, we will continue our tour by looking at routing, forms, material styling, animation, internationalization, accessibility, testing, and keeping our applications up-to date as Angular itself evovles.

Back to TOC.

A tour of Angular for web developers

Nalaka Jayasena — Sat, 22 Aug 2020 08:40:03 +0000

This article is the first step in a brief tour of the Angular framework for experienced web developers- specially those coming from another framework like React, Vue, or Ember.

With a decent grasp of HTML, CSS, TypeScript, HTTP and NodeJS, you should be able to easily follow along, and at the end of the series, have a good idea of how Angular works and how to go about using it to build modern web applications.

This article was last updated on 22nd August 2020.

Preamble
Web apps
Web frameworks
Angular vs React
A history lesson
Getting started with Angular
The layout of an Angular workspace
An Angular project
What next?

Preamble

Two years after the initial announcement at NgConf 2014 Europe, in the September of 2016, Angular version 2 was finally released. It was a massive overhaul of the framework that greatly improved the internal architecture and overall developer experience. Unfortunately, all those benefits came at a cost.

Version 2 was not at all backwards compatible with version 1, and at the time, there was no clear upgrade path. Version 2 was, for all practical purposes, a new framework! This caused some developers to jump ship to other frameworks such as React, Vue and Ember, or hold out from upgrading altogether.

Now contrast this to what happened on the February of 2020 when version 9 of Angular was released. Similar to how Angular moved from using the template engine to view engine with version 2, the rendering engine was replaced again, with version 9 moving to Ivy as the default. But this time, the developer experience was quite different. There were no angry tweets or posts about how difficult it is to upgrade- in fact, it was an uneventful, unremarkable, and downright boring upgrade experience.

So let me start this brief tour by saying that, Angular, with its already comprehensive feature set, great community, and now with a very boring upgrade story is a framework that gives very little reason for developers to stay away from!

Back to TOC.

Web apps

Let's take a step back and look at the big picture behind what we do as web developers.

A web app, by definition, lives at a particular URL and is loaded by and executed inside a web browser.

When the browser accesses this URL, it obtains the initial HTML code for the web app. This HTML code links to the CSS, JavaScript, and other asset files it needs.

The browser loads these files as well and renders the user interface of the web app on to the users' screen. During this process, an in-memory representation of the web page, a.k.a. web document is constructed by the browser and is maintained throughout the execution lifetime of the web app.

This in-memory representation of the web document is exposed to the web app's JavaScript code for manipulation via the DOM API. The Document Object Model is organized as a tree of nodes and logically sits between our applications' JS code and the view the user sees.

Each tag in the HTML file results in a corresponding node in the DOM tree. Each of these nodes correspond to a particular slice of the rendered view. When the user interacts with the view, the browser fires events, which the DOM API allows our JS code to listen to.

So, a web app is programmed by:

HTML code to define the initial structure of its user interface
CSS code to define the initial styling of its user interface
JavaScript code that:
- Uses the DOM API to manipulate the structure and styling of the user interface
- Uses other Web APIs for things such as accessing the network and saving data locally
- Implements the actual business logic and deliver value to the user

Although manipulating the DOM using the DOM API directly is very powerful, it is more convenient to use abstractions on top of that. This is where libraries like jQuery & React, and frameworks like Angular, Vue, and Ember comes in.

Back to TOC.

Web frameworks

The first library to enjoy widespread adoption was jQuery, which appeared around 2006 and addressed the problem of incompatibilities in how the Web APIs were implemented across the major web browsers. It also gave a simple, elegant API on top of the original DOM API for accessing and manipulating the DOM.

The next challenge was to have an easier way for our web apps' data and logic, typically organized as JS classes and or functions, to drive the user interface behind the DOM API. This question was addressed by multiple efforts that started to appear around 2010- such as, Knockout.js, Backbone.js, SproutCore, and AngularJS. These were followed by EmberJS which sprang out from SproutCore in 2011 December.

React launched in 2013 with its virtual DOM and component based approach to UI composition that challenged the mostly MVC based approaches of its predecessors. And Vue.js appeared in 2014 combining features of both AngularJS and React.

In 2016 Angular was released, a complete reboot of Angular, which ditched the MVC based approach of AngularJS in favor of a component based approach.

Back to TOC.

Angular vs React

Angular is often compared with React.

The first thing to note is that React is a library for building user interfaces whereas Angular is a framework for building applications. Given that applications certainly need user interfaces, it follows that Angular covers a much bigger scope than React. This unfortunately also means that Angular has a much bigger learning curve than React so developers are quicker to get productive in React than in Angular. So for simple apps, React seems to be a better choice.

But the proper comparison is to compare Angular with React core + React ecosystem. With React, most of the pieces that Angular provides as part of the framework needs to be picked and chosen from a large buffet of community offerings. This is a good and a bad thing. It is good because it gives more options to the developer so she can put together a highly customized solution. And it is bad for exactly the same reason. Too much choice is often problematic, specially for those beginners who looked at Angular, thought it had too much of a learning curve, gave up and instead picked React. They breeze through the core React concepts in a few weeks and then realize that building their apps requires quite a few more tools than what the React library provides.

So for complex apps, specially CRUD style enterprisy ones, arguably, Angular has a smaller total learning curve and a better return on intellectual investment than React.

Angular is a well architectured comprehensive application framework. So as you build bigger applications and maintain them for longer, you realize that the upfront learning cost of Angular is offset by the developer productivity that Angular continues to give over the full lifecycle of the web application.

Once developers get through the core concepts that underlies the Angular framework, they realize that the going gets much more easier and that they have in their possession a much more powerful toolbox with a set of cohesive tools to wield at many application development challenges.

That was how Angular compares to React at a framework level. There is also a fundamental difference in the way the UI library parts of the two frameworks handle DOM manipulation.

Though both Angular and React puts components front and center, as the building block for composing user interfaces out of, React uses what is known as a virtual DOM for manipulating the DOM whereas Angular works with the real DOM.

The virtual DOM is basically an in-memory representation of the real DOM so that when detecting changes, React does not have to touch the real DOM. That makes change detection faster.

Angular has adopted a totally different approach where the Angular compiler augments our app code with framework code. Then this hybrid code operates directly on the real DOM. The extra code is responsible for binding data between our "apps' objects" and "DOM objects" as well as handling DOM events from inside our apps' methods. The compiler tree-shakes unused framework and application code so as to produce leaner code bundles.

Both approaches have pros and cons- and each framework inspires the other to innovate. So assertions about each framework that was true few years ago may not hold today. As developers, our responsibility is to understand the task at hand and the pick the right tool for that particular job.

Back to TOC.

A history lesson

On 2020 October, Angular will be 10 years old. Over the last decade, Angular has helped transform the way we architecture and build web applications and in turn had transformed itself in lockstep with the evolution of the web platform. Let's take a look back at how Angular evolved over the years.

AngularJS was announced by Miško Hevery in 2009 and version 1 was released in 2010.

It came into a world looking for a better way to build web applications- and it really took off.

When v2 was released in 2016 September. It was a complete rewrite and was branded Angular instead of AngularJS. Most people felt that it was a completely different framework that happened to be done by the same team under almost the same name. In some senses it was, for example the template engine at the core of Angular was replaced by the view engine and the MVC architecture was replaced with a component based one.

There was no v3 of Angular because the Angular Router for Angular v2 had already been released as v3. Angular v4 was released 2017 March and v5 in 2017 November.

Angular v6 was released 2018 May. It focused on synchronization of the Angular toolchain- core, compiler, CLI, material, CDK, and a commitment was given to the community to keep things in sync going forward. A way to help users update their applications to newer versions of Angular was introduced in the form of a new CLI command called update. Another new CLI command add was introduced to help generate common application parts such as components.

Angular v7, released in 2018 October, introduced schematics, a mechanism for customizing the files CLI generates with the add command.

In 2019 May, Angular v8 introduced differential loading, which allowed the generation of smaller apps (often 7 to 20 percent smaller) by creating two separate bundles- one for evergreen browsers and one for legacy browsers. Version 8 also introduced builders, which allowed the customization of the tools used and the order in which they are run by the compiler.

Angular v8 was released in 2020 March. The new rendering engine, Ivy, that replaces the template engine used since v2 was available as an opt-in. Ivy was subsequently made the default for Angular at version 9, which was released in 2020 February.

Version 10, that came out on 2020 June, is the latest major release. It introduced few more features aimed at producing leaner and more maintainable Angular apps. For example, the CLI now warns when a dependency is packaged with CommonJS. A strict option for the ng new CLI command was added which enables strict mode in TypeScript and strict type checking in templates. The apps are now configured as side effect free, which makes them more tree shakable thus leading to smaller bundles.

Back to TOC.

Getting started with Angular

With a current release of NodeJS already installed in your system, install the @angular/cli package globally:

npm install -g @angular/cli

Now you should be able to access the Angular CLI with ng command: Try running ng version and ng help.

Open a shell and change directory to wherever you save your coding projects and use the ng new command to generate a new Angular workspace:

ng new into-angular \
        --strict --create-application="false"

An into-angular directory gets created with the workspace files and a Git repository gets initialized.

The strict option, introduced in Angular 10, enforces a set of best practices such as stronger type checking and making parts of the application self-contained and side effect free.

Let's add a web application project to our workspace:

ng generate application hello \
       --strict  --inline-template  --inline-style

Change into the generated workspace directory and use the ng serve command to build the hello project and run in the development server with live reload enabled.

cd into-angular
ng serve hello --open

The --open option opens the default web browser at the URL exposed by the development server.

We can run the unit tests with:

ng test hello

And the end-to-end tests with:

ng e2e hello

We can do a production build with:

ng build hello --prod

The production build is generated in the into-angular/dist/hello folder, and the output sizes are quite small- no unreasonable overhead from the framework!

 535B   index.html
   0B   styles.3ff695c00d717f2d2a11.css
 1.5K   runtime.e227d1a0e31cbccbf8ec.js
  36K   polyfills.9e86b32c42185429d576.js
 102K   main.77129eaa6e421d8e7131.js
  13K   3rdpartylicenses.txt
 948B   favicon.ico

To serve the production build locally, install the serve utility and "serve" this directory:

npm install -g serve

serve into-angular/dist/hello

Back to TOC.

The layout of an Angular workspace

The generated Angular workspace directory contains configuration files that applies to all projects.

All projects in a workspace share NPM dependencies. So even if you have ten projects inside the projects directory, you would have only one node_modules directory- the one at the workspace level.

The tsconfig.base.json declares the base options for the TypeScript compiler. These get extended by project level tsconfig files.

The workspace level tsconfig.json file is for code editors to pickup . So is the .editorconfig file, which declares coding style options like indenting, quotes, brackets, tabs/spaces.

The angular.json file is where we configure the behavior of the Angular compiler.

"defaultProject": "hello",
"newProjectRoot": "projects",
"projects": {
  "hello": {
    "projectType": "application",
    "root": "projects/hello",
    "sourceRoot": "projects/hello/src",
    "prefix": "app",
    "schematics": {},
    "architect": {
      "build": {
        "builder": "@angular-devkit/build-angular:browser",
        "options": {},
        "configurations": {
          "production": {}
        }
      },
      "serve": {},
      "test": {},
      "e2e": {},

Since the defaultProject is set to hello, in ng commands, we can drop the project name and still have the command act on the default hello project. So, we can just do a ng serve and get the hello project served.

In our hello project, we have the projectType set to application. The other option here is library. Later in our tour, we will see how to create a library project and reuse it in multiple application projects.

Soon we will be generating components and other directives- these have a selector that is used inside HTML templates to activate the directive. The string we specify in the prefix option is used as a prefix for the selector when we generate the directive with ng generate directive or ng generate component.

Schematics are the blueprints for the artifacts that the Angular CLI generates with ng generate command- applications, libraries, components, generic directives, services, pipes, and so on. Options for these go under the schematics section. The architect section is for configuring the Angular CLI build pipeline. Angular let's us customize both of these aspects- what the various generators output (with custom schematics) and what the build pipeline does (with custom builders). Later in this tour, we will see how!

Back to TOC.

An Angular project

The generated web application project, hello, looks like this:

The .browserslistrc file declares browsers supported by this project. Angular uses this information to adjust the CSS/JS output of the compiler.

Angular uses Jasmine for writing unit tests and Karma, configured with thekarma.conf.js file, for running them.

There are two tsconfig files- one for the application code, and one for the unit test code. These are for configuring the TypeScript compiler. The tslint.json file configures the TypeScript linter, TSLint. All three files extend their parents from the workspace directory.

The src folder contains all the source code for the application including unit tests. The e2e folder contains all the end to end tests. Let's dive into what they contain.

Protractor, configured with protractor.config.js, is used for writing end to end tests. The app.po.ts file is a "Page Object" for the our app's landing page. This has convenience methods for use in the actual end to end test file, in this case, app.e2e-spec.ts.

The index.html file is the main template. This is where the root component of our app's component hierarchy gets referenced. Entry point for application code is the main.ts file. For running unit tests, the entry point is the test.ts file.

Styles shared across the app are in the styles.css file. Later we will see that components can define their own private styles.

The app directory is named after the name of the code module it holds- in this case, app. The AppModule class is found in app.module.ts. This is the default module for holding our applications’ parts- components, other directives, services, pipes and so on. As we build bigger applications we will need more modules so that we can divide up the app into more manageable sections and load each section lazily when needed.

The app.component.ts declares the AppComponent and app.component.spec.ts contains unit tests for it. AppComponent sits at the root of our apps' component hierarchy. This is the component that get referenced in index.html causing our whole app to recursively get loaded.

Back to TOC.

What next?

In the next article we will take a closer look at the primary building block of an angular application, the component. Then we will see how to create services that interact with the world outside our component and how to inject them where they are needed. On subsequent articles, we will continue our tour by looking at routing, forms, material styling, animation, internationalization, accessibility, testing, and keeping the application up-to date as Angular itself improves.

Back to TOC.

A Software development setup on Apple Mac

Nalaka Jayasena — Wed, 12 Aug 2020 18:07:05 +0000

This is my current setup- sharing for my future self and anyone else that stumbles on here.

The bare necessities
JavaScript
Rust
Java

The bare necessities

The Command Line Developer Tools:

xcode-select --install

The default installation location is /Library/Developer/CommandLineTools, you can double check with xcode-select -p. Check the contents of the usr/bin sub-directory for all the tools that this gives you.

The Homebrew package manager.

iTerm 2 - a great replacement for the built-in terminal app.

Oh My Zsh - spices up the shell.

Visual Studio Code - code editor

The development editions of Chrome and Firefox web browsers:

Note taking:

Evernote - great for taking a quick note on the phone and picking up from the computer
Typora - surprisingly good markdown editor

Communication and media:

VLC Media Player - plays 'most anything thrown at it
Skype

And some miscellaneous utilities:

Folx Free Edition - for file downloads
NTFS for Mac - for working with disks formatted for Windows with NTFS

Back to TOC.

JavaScript

Volta is great for managing JS command line tools.

Install with:

curl https://get.volta.sh | bash

Later when Volta needs to be updated, repeat the same command.

Install Node.js

volta install node

Install any JS tools from NPM with volta install package-name - e.g.

volta install serve          # Serve a local directory over HTTP
volta install prettier       # Code formatter

Later, a tool can be updated by repeating the install command.

Back to TOC.

Rust

Use the Rustup script:

curl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs | sh

Update with rustup update

Self uninstallation is supported with rustup self uninstall

Back to TOC.

Java

Download the .dmg installer for the latest stable Java SDK from Oracle and run.

Back to TOC.

DEV Community: Nalaka Jayasena

A tour of Angular for web developers: Composing the user interface with components

Table of Contents

The journey so far

A tour of Angular for web developers

Nalaka Jayasena ・ Aug 22 '20

The anatomy of a component

Interpolation

Pipes

A new pipe

A new component

Repeating UI elements

Conditionally rendering elements

Binding our component to the DOM element

Passing data between components

What's next

nalaka / into-angular

Code for the dev.to series "A tour of Angular for web developers"

A tour of Angular for web developers

Table of Contents

Preamble

Web apps

Web frameworks

Angular vs React

A history lesson

Getting started with Angular

The layout of an Angular workspace

An Angular project

What next?

A Software development setup on Apple Mac

Table of Contents

The bare necessities

JavaScript

Rust

Java