fbAPIKey

fbAuthDomain

fbDBUrl

fbProjectId

fbStorageBucket

fbSenderId

Gain insights into designing scalable Angular applications. Learn about components, directives, routing, RXJS, forms, and Firebase authentication to develop rich, interactive web solutions.

Angular Designing and Architecting Web Applications.png

angular-starter-v5.tar.gz

Angular

Angular Install Dependencies

Angular with Relaunch

This course will teach you step-by-step how to design and architect large Angular applications. 

You’ll start with the basics: components, pipes, and directives. These are the building blocks of any Angular application, so you will get plenty of hands-on practice with this material. Next, you’ll ramp things up by stepping into modules, routing, and RXJS, where you’ll learn how to declaratively manage data and dive deep into observables.

In the latter half of the course, you’ll cover reactive and template forms (crucial for handling user data), as well as custom validators and setting up authentication with Firebase.

By the end of this course, you'll be able to design large, scalable applications, be able to develop rich interactive components, and you’ll really understand how Angular works under the hood.

Angular: Designing and Architecting Web Applications

The starter project by Angular can be overwhelming at first. The CLI downloads a bunch of files that it can be confusing as to where to start. We'll review some of the files to become more comfortable with the project. This review won't be super comprehensive. We'll be briefly looking at things.

Here are the files for the project the CLI scaffolded for us:

# This file is used by the build system to adjust CSS and JS output to support the specified browsers below.
# For additional information regarding the format and rule options, please see:
# https://github.com/browserslist/browserslist#queries

# For the full list of supported browsers by the Angular framework, please see:
# https://angular.io/guide/browser-support

# You can see what browsers were selected by your queries by running:
#   npx browserslist

last 1 Chrome version
last 1 Firefox version
last 2 Edge major versions
last 2 Safari major versions
last 2 iOS major versions
Firefox ESR
not IE 11 # Angular supports IE 11 only as an opt-in. To opt-in, remove the 'not' prefix on this line.


# Editor configuration, see https://editorconfig.org
root = true

[*]
charset = utf-8
indent_style = space
indent_size = 2
insert_final_newline = true
trim_trailing_whitespace = true

[*.ts]
quote_type = single

[*.md]
max_line_length = off
trim_trailing_whitespace = false


# See http://help.github.com/ignore-files/ for more about ignoring files.

# compiled output
/dist
/tmp
/out-tsc
# Only exists if Bazel was run
/bazel-out

# dependencies
/node_modules

# profiling files
chrome-profiler-events*.json
speed-measure-plugin*.json

# IDEs and editors
/.idea
.project
.classpath
.c9/
*.launch
.settings/
*.sublime-workspace

# IDE - VSCode
.vscode/*
!.vscode/settings.json
!.vscode/tasks.json
!.vscode/launch.json
!.vscode/extensions.json
.history/*

# misc
/.sass-cache
/connect.lock
/coverage
/libpeerconnection.log
npm-debug.log
yarn-error.log
testem.log
/typings

# System Files
.DS_Store
Thumbs.db


# Starter

This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 11.0.2.

## Development server

Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The app will automatically reload if you change any of the source files.

## Code scaffolding

Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module`.

## Build

Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory. Use the `--prod` flag for a production build.

## Running unit tests

Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io).

## Running end-to-end tests

Run `ng e2e` to execute the end-to-end tests via [Protractor](http://www.protractortest.org/).

## Further help

To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI Overview and Command Reference](https://angular.io/cli) page.


// Karma configuration file, see link for more information
// https://karma-runner.github.io/1.0/config/configuration-file.html

module.exports = function (config) {
  config.set({
    basePath: '',
    frameworks: ['jasmine', '@angular-devkit/build-angular'],
    plugins: [
      require('karma-jasmine'),
      require('karma-chrome-launcher'),
      require('karma-jasmine-html-reporter'),
      require('karma-coverage'),
      require('@angular-devkit/build-angular/plugins/karma')
    ],
    client: {
      clearContext: false // leave Jasmine Spec Runner output visible in browser
    },
    jasmineHtmlReporter: {
      suppressAll: true // removes the duplicated traces
    },
    coverageReporter: {
      dir: require('path').join(__dirname, './coverage/starter'),
      subdir: '.',
      reporters: [
        { type: 'html' },
        { type: 'text-summary' }
      ]
    },
    reporters: ['progress', 'kjhtml'],
    port: 9876,
    colors: true,
    logLevel: config.LOG_INFO,
    autoWatch: true,
    browsers: ['Chrome'],
    singleRun: false,
    restartOnFileChange: true
  });
};


/* To learn more about this file see: https://angular.io/config/tsconfig. */
{
  "extends": "./tsconfig.json",
  "compilerOptions": {
    "outDir": "./out-tsc/app",
    "types": []
  },
  "files": [
    "src/main.ts",
    "src/polyfills.ts"
  ],
  "include": [
    "src/**/*.d.ts"
  ]
}


/* To learn more about this file see: https://angular.io/config/tsconfig. */
{
  "compileOnSave": false,
  "compilerOptions": {
    "baseUrl": "./",
    "outDir": "./dist/out-tsc",
    "sourceMap": true,
    "declaration": false,
    "downlevelIteration": true,
    "experimentalDecorators": true,
    "moduleResolution": "node",
    "importHelpers": true,
    "target": "es2015",
    "module": "es2020",
    "lib": [
      "es2018",
      "dom"
    ]
  }
}


/* To learn more about this file see: https://angular.io/config/tsconfig. */
{
  "extends": "./tsconfig.json",
  "compilerOptions": {
    "outDir": "./out-tsc/spec",
    "types": [
      "jasmine"
    ]
  },
  "files": [
    "src/test.ts",
    "src/polyfills.ts"
  ],
  "include": [
    "src/**/*.spec.ts",
    "src/**/*.d.ts"
  ]
}


React

Dart

GoJS React

Typescript React

Vue.js

# Root Files

We'll start with the files in the root directory of the project.

## .browserslistrc

Angular is built with various tools, such as Webpack. Most tools can be configured to output different results for specific browsers. It can be tedious to configure each tool for different browsers. This is where the `.browserslistrc` file comes into play.

Instead of configuring each tool, you can outsource the list of browsers to support in one file. The current configuration will support the latest browser but not IE. You can click on the link at the top of the file for various queries that can be added for more browser support. You can also run the following command to get the list of browsers the configuration will support:

```bash
npx browserslist
```

## .editorconfig

The first file is the `.editorconfig` file. If you're working on a team, chances are everyone will be using a different editor. Their editors may be configured differently than yours, which can cause issues when the code is committed. 

The `.editorconfig` file can be detected by most code editors. If present, the settings in the file will override the current settings of the editor. This saves you from having to manually make the changes. It's a great way to keep formatting consistent across multiple editors.

At the top of the file, you'll find a link to the documentation for various configuration options. We won't be using this file for the course. You can safely ignore or delete it.

## .gitignore

The `.gitignore` file will tell Git what files to ignore when committing files. Angular has adjusted this file to include files and folders that don't need to be committed. We won't be modifying this file.

## angular.json

The `angular.json` file is how we can configure the workspace and project. The CLI will use it to determine how it should build the project for development and production. We'll be revisiting this file throughout the course.

## karma.config.json

The `karma.config.json` file is the configuration for the Karma test runner tool. Karma allows us to run tests in an environment of our choosing. You can safely ignore this file for the time being. It won't impact how we write code.

## package.json

The `package.json` file will contain a list of dependencies for our project. It will also have commands for interacting with the project using the Angular CLI.

## tsconfig.json

There are three configuration files for TypeScript: `tsconfig.app.json`, `tsconfig.json`, and `tsconfig.spec.json`. The `tsconfig.app.json` file is used when the application is compiled. The `tsconfig.spec.json` file is used when the testing code is compiled. Both files extend the `tsconfig.json` file. 

We aren't going to be modifying the TypeScript configuration. It's been optimized to best suit Angular. However, if you do need to change things, then you are more than welcome to do so.

# Directories

Let's explore the directories created in the project.

## e2e

The `e2e` directory is where we can define tests for end-to-end testing. There's not much else to it.

## src

The `src` directory is where we'll be working a majority of the time. It's where the application code will mainly sit. The CLI will compile the code inside this directory, bundle it, and serve the build. 

# Tunnel visioning

One of the biggest challenges of learning Angular is trying to understand everything it creates all at once. If you've ever used React or Vue, then you know it's possible to get a project going by loading one or two files. This makes it easier to get started with either library.

However, Angular is different. The files required for a basic project are comprehensive. This is because Angular is meant for large applications that can scale. Unlike other frameworks, it's not meant for building small widgets on a page. It's a convention over configuration framework.

## Convention over configuration

There are two types of frameworks: configuration over convention and convention over configuration. 

A configuration over convention framework is when a framework lets you decide how to structure your application. It provides you with the functions necessary to build an app but doesn't dictate how you name your files, functions, or variables. It's completely flexible. For this reason, they're prevalent because of their beginner-friendly approach. React and Vue falls into this category.

A convention over configuration framework is when a framework is much more opinionated. It requires an application to be structured in a certain way and has rules for how you should define classes, functions, and variables. These frameworks have a higher learning curve but are much more suitable for large applications. It's easier for teams to use because everyone has to adhere to standards set by the framework. Angular falls into this category.

## Focusing on two files

In the next lesson, we're going to focus on two files: `src/app/app.component.html` and `src/app/app.component.ts`. We'll be ignoring everything else.

**Why?**

That's a fair question. The approach we'll be taking to learning Angular is to focus on a small set of files and expand as we go along. We won't worry about why the files are named or structured in a specific way. We'll learn about the other files as the course progresses. For now, I want you to pretend as if the `app.component.html` and `app.component.ts` files are the only files in the `src` directory. 

Let’s review some of the files to feel more comfortable with the project.

First Steps

Our First Project

Component Basics

Pipes

Directives

Modules

Routing

Advanced Components

Services

RxJS

Reactive Forms

Template Forms

Custom Validators

Authentication

Conclusion

Reviewing the Files