An overview of the javascript Angular framework basic concepts to get started.

This is a guide to understand Angular core concepts.

Overview

Angular is a Javascript framework to build web and mobile applications.

It has a command line utility to facilitate tasks ng installed with npm install -g @angular/cli.

Basic Concepts

Angular is based in these concepts:

  • Javascript classes
  • Javascript modules
  • Dependency injection defined by TypeScript types.
  • Metadata defined by decorators.

Typescript is a superset of JavaScript that compiles to plain Javascript, with the ability to add optional static typing to the language.

Javascript classes

Javascript classes are used to

  1. create objects

    To define a class we can use one of two methods, both using prototype-based inheritance.

    A class expression:

     var MyClass = class [className] [extends] {
       // class body
     };
    

    Or we can use a class declaration.

     class name [extends] {
       // class body
     }
    

    The difference between them is that class declaration doesn’t allow an existing class to be re-declared.

    Technically speaking, it is said that

    function declarations are hoisted and class declarations are not

  2. deal with inheritance

    Inheritance makes it possible to extend existing classes to create new ones.

    The extends keyword is used to create a subclass.

     class Cat extends Animal {
     }
    

Javascript modules

Each module is a piece of code (variable and function declarations, objects, etc) that is executed once it is loaded. Some of them can be marked to be exported so other modules can import and use them.

To import them we use the import keyword and to expose them to other modules the export keyword.

import defaultMember from "module-name";
import * as name from "module-name";
import { member } from "module-name";
import { member as alias } from   "module-name";
import { member1 , member2 } from "module-name";
import { member1 , member2 as alias2 , [...] } from "module-name";
import defaultMember, { member [ , [...] ] } from "module-name";
import defaultMember, * as name from "module-name";
import "module-name";

Angular apps are modular and Angular has its own modularity system called NgModules

Every Angular app has at least one NgModule class, the root module, conventionally named AppModule.

JavaScript also has its own module system for managing collections of JavaScript objects. It’s completely different and unrelated to the NgModule system.

Dependency injection

Dependency injection (DI) is an application design pattern. In this coding pattern the class receives its dependencies from external sources rather than creating them itself.

Angular comes with a dependency injection framework called injector where you register classes, and it figures out how to create them.

Every time you need a class instance, instead of using a Factory, you ask the injector to get it for you.

let car = injector.get(Car);

Metadata

Decorators support annotating or modifying a class declaration, method, accessor, property, or parameter. They can be used in Angular with TypeScript.

Angular has many decorators that attach metadata to classes so that it knows what those classes mean and how they should work.

Decorators use the form @expression, where expression must evaluate to a function that will be called at runtime with information about the decorated declaration.

NgModule is a decorator function that takes a single metadata object whose properties describe the module.

Project Structure

To analyze a typical Angular project structure we create a new one with the command line app ng:


$ ng new --help
ng new < options... >
  Creates a new directory and a new Angular app eg. "ng new [name]".
  aliases: n
  --dry-run (Boolean) (Default: false) Run through without making any changes. Will list all files that would have been created when running "ng new".
    aliases: -d, --dryRun
  --verbose (Boolean) (Default: false) Adds more details to output logging.
    aliases: -v, --verbose
  --skip-install (Boolean) (Default: false) Skip installing packages.
    aliases: -si, --skipInstall
  --skip-git (Boolean) (Default: false) Skip initializing a git repository.
    aliases: -sg, --skipGit
  --skip-tests (Boolean) (Default: false) Skip creating spec files.
    aliases: -st, --skipTests
  --skip-commit (Boolean) (Default: false) Skip committing the first commit to git.
    aliases: -sc, --skipCommit
  --directory (String) The directory name to create the app in.
    aliases: -dir < value >, --directory < value >
  --source-dir (String) (Default: src) The name of the source directory. You can later change the value in ".angular-cli.json" (apps[0].root).
    aliases: -sd < value >, --sourceDir < value >
  --style (String) (Default: css) The style file default extension. Possible values: css, scss, less, sass, styl(stylus). You can later change the value in ".angular-cli.json" (defaults.styleExt).
    aliases: --style < value >
  --prefix (String) (Default: app) The prefix to use for all component selectors. You can later change the value in ".angular-cli.json" (apps[0].prefix).
    aliases: -p < value >, --prefix < value >
  --routing (Boolean) (Default: false) Generate a routing module.
    aliases: --routing
  --inline-style (Boolean) (Default: false) Should have an inline style.
    aliases: -is, --inlineStyle
  --inline-template (Boolean) (Default: false) Should have an inline template.
    aliases: -it, --inlineTemplate
  --minimal (Boolean) (Default: false) Should create a minimal app.
    aliases: --minimal


$ ng new my-app
installing ng
  create .editorconfig
  create README.md
  create src/app/app.component.css
  create src/app/app.component.html
  create src/app/app.component.spec.ts
  create src/app/app.component.ts
  create src/app/app.module.ts
  create src/assets/.gitkeep
  create src/environments/environment.prod.ts
  create src/environments/environment.ts
  create src/favicon.ico
  create src/index.html
  create src/main.ts
  create src/polyfills.ts
  create src/styles.css
  create src/test.ts
  create src/tsconfig.app.json
  create src/tsconfig.spec.json
  create src/typings.d.ts
  create .angular-cli.json
  create e2e/app.e2e-spec.ts
  create e2e/app.po.ts
  create e2e/tsconfig.e2e.json
  create .gitignore
  create karma.conf.js
  create package.json
  create protractor.conf.js
  create tsconfig.json
  create tslint.json
You can `ng set --global packageManager=yarn`.
Installing packages for tooling via npm.
        Installed packages for tooling via npm.
Successfully initialized git.
Project 'my-app' successfully created.


Tree

The project is arranged in the following way:

.
└── my-app
    β”œβ”€β”€ e2e                            # end-to-end tests
    β”‚Β Β  β”œβ”€β”€ app.e2e-spec.ts
    β”‚Β Β  β”œβ”€β”€ app.po.ts
    β”‚Β Β  └── tsconfig.e2e.json
    β”œβ”€β”€ karma.conf.js                  # https://karma-runner.github.io/
    β”œβ”€β”€ .editorconfig                  # http://editorconfig.org
    β”œβ”€β”€ .angular-cli.json              # Configuration for Angular CLI
    β”œβ”€β”€ package.json                   # npm - third party packages
    β”œβ”€β”€ protractor.conf.js             # http://www.protractortest.org/#/
    β”œβ”€β”€ README.md
    β”œβ”€β”€ src
    β”‚Β Β  β”œβ”€β”€ app
    β”‚Β Β  β”‚Β Β  β”œβ”€β”€ app.component.css
    β”‚Β Β  β”‚Β Β  β”œβ”€β”€ app.component.html
    β”‚Β Β  β”‚Β Β  β”œβ”€β”€ app.component.spec.ts
    β”‚Β Β  β”‚Β Β  β”œβ”€β”€ app.component.ts       # Defines AppComponent
    β”‚Β Β  β”‚Β Β  └── app.module.ts          # Defines AppModule
    β”‚Β Β  β”œβ”€β”€ assets                     # Static files copied at build time
    β”‚Β Β  β”œβ”€β”€ environments               # Configurations for each env
    β”‚Β Β  β”‚Β Β  β”œβ”€β”€ environment.prod.ts
    β”‚Β Β  β”‚Β Β  └── environment.ts
    β”‚Β Β  β”œβ”€β”€ favicon.ico
    β”‚Β Β  β”œβ”€β”€ index.html                 # Page served
    β”‚Β Β  β”œβ”€β”€ main.ts                    # Main entry point of the app 
    β”‚Β Β  β”œβ”€β”€ polyfills.ts
    β”‚Β Β  β”œβ”€β”€ styles.css                 # Styles that affect all of your app
    β”‚Β Β  β”œβ”€β”€ test.ts                    # Main entry point for unit tests
    β”‚Β Β  β”œβ”€β”€ tsconfig.app.json          # TypeScript compiler config for app
    β”‚Β Β  β”œβ”€β”€ tsconfig.spec.json         # TypeScript compiler config	for tests
    β”‚Β Β  └── typings.d.ts
    β”œβ”€β”€ tsconfig.json
    └── tslint.json

Files

As we see in this particular project structure, the project is full of HTML and Typescript files (.ts extension).

Most relevant files goes inside src directory, while files outside src folder are just meant to support building the app.

Components

The typescript file located at ./src/app/app.component.ts is a special one called root component and its noted app-root.

Components control a section of the screen called view. They can be a navigation bar, a list of items, etc.

Each component can have associated files to define its CSS styling and HTML template.

A component contains the AppComponent class definition, like:

export class AppComponent {
  name = 'This is my component';
}

and a decorator with for example, data bindings to properties defined in the class:

@Component({
  selector: 'my-app',
  template: `<h1>Name: </h1>`,
})

Double curly braces are the interpolation binding syntax used by Angular.

Instead of a literal string as a property value in the Component, a class can be used:

export class Description {
  name: string;
}

export class AppComponent  {
    description : Description = {
		name: 'Some desc'
    };
}
@Component({
  selector: 'my-app',
  template: `<h1>Name: </h1>`,
})

Modules

There is also a special file called root module. It tells Angular how to assemble the application and is located at ` app/app.module.ts`.

Useful commands

Commands to work with and without the ng command line tool.

  • Create a new project based on the QuickStart: git clone https://github.com/angular/quickstart.git my-app
  • Install npm packages: npm install
  • Compile and serve: npm start
  • Run the TypeScript compiler once: npm run build
  • Run the TypeScript compiler in watch mode: npm run build:w
  • Run a light-weight, static file server lite-server npm run serve
  • Karma unit tests (compiles the application, simultaneously re-compiles and runs the karma test-runner): npm test
  • Protractor e2e tests (compiles, starts the lite-server and launches Protractor): npm run e2e

References

Uruguay
Marcelo Canina
I'm Marcelo Canina, a developer from Uruguay. I build websites and web-based applications from the ground up and share what I learn here.