#native_company# #native_desc#
#native_cta#
  1. Angular
  2. Quickstart
  3. Overview

Overview

The course is going to begin with a quickstart to give you a high level view of the major features of Angular.

Let’s get started!

Contributors

This book is open source (https://github.com/codecraft-tv/angular-course) and maintained with the generous help of developers like you.

I would like to especially thank the people in the list below.

Shantanu Kulkarni — For updating all the code for all lectures to work with StackBlitz and Angular 6.

David A. Russo — For a huge update to fix lots of grammatical errors and typos on my part.

Tamilmozhi Gunasekar — For several updates to fix errors in the code examples and typos in the content.

alicexinyun — For some deep grammatical corrections and code updates.

Beno922 — For several commits to fix typos.

For a full list of the contributors please visit: https://github.com/codecraft-tv/angular-course/graphs/contributors

StackBlitz

Angular comes with a command-line tool which greatly eases the process of creating and building Angular applications locally on your computer.

We cover how to use the CLI in this course however for most of the lectures we will be using an online web editor called StackBlitz to edit and run our Angular applications.

  • No setup required, everyone can code in the browser instantly.

  • StackBlitz is the name of the site, a blitz is an individual project hosted on StackBlitz.

  • Each blitz has its own unique URL which you can share with others so it’s a useful way to show others your work or ask why something isn’t working.

  • You can’t edit someone else’s blitz but you can fork it. Forking creates a new blitz that you own with all the files copied across.

Structure of a Blitz

The file structure of a blitz conform mostly to the standard Angular layout with the key exception that we put as much code as possible into a single file. This is so in the associated videos we scroll up and down rather than flip between files. It’s far easier to keep a track of where I am in the code if i’m scrolling up and down a file, it’s far harder to keep a track of where I am in the code if they are split in multiple files and you blinked for a second when I clicked on a tab to change files.

Warning

This is BAD practice to do in production applications but a GREAT practice for teaching, especially via video content.

This isn’t going to be to everyone’s tastes, but many years of teaching programming has led me to conclude this is the best compromise that appeases most developers.

├── angular.json (1)
├── package.json (2)
├── src
│   ├── index.html
│   ├── main.ts (3)
│   ├── polyfills.ts (4)
│   ├── styles.css (5)
│   ├── tsconfig.app.json (6)
│   └── tslint.json (7)
├── tsconfig.json (8)
└── tslint.json (9)
1 This is the main configuration file for Angular, you need this to run the Angular CLI.
2 package.json is a configuration file that npm uses to install the required dependent libraries (These are libraries that you need in order to build your project, the code you need to deploy for your web app will be much smaller)
3 This is the file where all our code is going to go.
4 Polyfills to support older browsers
5 The CSS for this web application (we are using Bootstrap 4 Alpha Release)
6 A configuration file to tell TypeScript how to compile into JavaScript.
7 Configuration for the linter, so you can control what warnings you want to see when compiling.
8 A top-level TypeScript configuration file (subfolders can override, like above)
9 A top-level TypeScript linter file (subfolders can override, like above)

Running the Same Code Locally

All the code examples can also be run locally on your computer with the Angular CLI.

Important

Do NOT download the project directly from StackBlitz and try to run that locally.

That would work for most StackBlitz Angular projects but since our project structure is a little different it doesn’t work for us without some changes to the angular.json file.

Instead clone the official repository for this course and run from there, like so:

git clone https://github.com/codecraft-tv/angular-course
cd angular-course
cd 1.quickstart/3.first-app/code
npm install
npm start

This will use the Angular CLI to compile the project and run a local development server listening to port 4200.

If you visit http://localhost:4200 in your browser you will see your project running.

Plunker vs StackBlitz

Previous versions of this course used to use a similar service called Plunker to edit and run the code online.

We’ve since migrated all the code to work on StackBlitz however most of the videos still show Plunker.

Important

We won’t be re-recording the videos to show StackBlitz unless there has been a material change in the source code. The main.ts in the old plunkers and in the new blitzs are exactly the same.

We moved from Plunker mainly for these reasons:

  • Plunker based projects don’t work with the Angular CLI, so there was a disconnect.

  • The Angular team adopted StackBlitz for the official documentation so it’s better supported.

Note

If you see references to Plunker in any of the docs feel free to submit a PR to fix! All the documentation in this site and source code is open source.

Summary

We can code up Angular in the browser using an online editor called StackBlitz. It gives us the ability to try our Angular quickly without requiring complex setup.

It also gives us a unique URL so:

  1. We can quickly take a look at some code another person has written.

  2. We can share our code with other people, which is especially useful when we are stuck with some broken code and need help.

If however you wanted to run the code locally that’s ok as well, just clone the source code repository rather than downloading from StackBlitz.

Caught a mistake or want to contribute to the book? Edit this page on GitHub!


Advanced JavaScript

This unique course teaches you advanced JavaScript knowledge through a series of interview questions. Bring your JavaScript to the 2021's today.

Level up your JavaScript now!