Angular, the successor to AngularJS, is a development platform for building mobile and desktop applications using TypeScript and/or JavaScript and other languages. Angular is popular for building high-volume websites and it supports web, mobile web, native mobile, and native desktop applications.
The Angular core development team is split between Google employees and a robust community; it’s not going away any time soon. In addition to its own extensive capabilities, the Angular platform has a strong external ecosystem: Several prominent IDEs support Angular, it has four data libraries, there are half a dozen useful tools and over a dozen sets of UI components, and there are dozens of Angular books and courses. In 2015, when InfoWorld awarded AngularJS a Bossie Award, I explained that it is a model-view-whatever (MVW) JavaScript AJAX framework that extends HTML with markup for dynamic views and two-way data binding. Angular is especially good for developing single-page web applications and linking HTML forms to models and JavaScript controllers. The new Angular is written in TypeScript rather than JavaScript, which has many benefits, as I’ll explain.
The weird-sounding “model-view-whatever” pattern is an attempt to include the model-view-controller (MVC), model-view-view-model (MVVM), and model-view-presenter (MVP) patterns under one moniker. The differences between these three closely related patterns are the sorts of things that programmers love to argue about fiercely; the Angular developers decided to opt out of the discussion.
Basically, Angular automatically synchronizes data from your UI (views in AngularJS and templates in Angular 2 and above) with your JavaScript objects (model) through two-way data binding. To help you structure your application better and make it easy to test, Angular teaches the browser how to do dependency injection and inversion of control. The new Angular (version 2 and above) replaces views and controllers with components and adopts standard conventions, which makes it easier to understand, and allows developers to concentrate on developing ECMAScript 6 modules and classes. In other words, Angular 2 is a total rewrite of AngularJS that tries to implement the same ideas in a better way. Angular view templates, which have a fairly simple syntax, are compiled into JavaScript that is well optimized for modern JavaScript engines. The new component router in Angular 2 can do code-splitting (lazy loading) to reduce the amount of code delivered to render a view.
Why Angular? And when is it not a good choice?
Choosing a JavaScript framework for a web app is the sort of process that sets off religious wars among developers. I’m not here to proselytize Angular, but I do want you to know its advantages and disadvantages. Ideally, you should pick the framework that’s appropriate for your app, taking into account the skills in your organization and the frameworks you are using in other applications. In general Angular has good tooling and is suitable for really large, high-traffic projects. Angular, as a complete rewrite from AngularJS, was designed from the ground up for use on mobile devices and for high performance. Like its predecessor, it does data binding easily and well.
Angular uses a web component pattern, but not Web Components per se. It’s not Polymer, which creates real Web Components, although you can use Polymer Web Components in Angular applications if you wish. Angular does use inversion of control (IoC) and dependency injection (DI) patterns, and fixes some problems with the AngularJS implementation of these.
Angular uses directives and components that mix logic with HTML markup. One school of thought says that mixing logic with presentation is a cardinal sin. Another school of thought says that having everything a program does declared in one place makes it easier to develop and understand. That’s an issue you’ll have to decide for yourself, as I’ve found myself on different sides of the question for different projects.
Angular does have some documentation issues, frequent backward-compatibility problems, and many concepts for a new developer to learn. On the other hand, Angular has a huge ecosystem that fills the gaps in Angular’s documentation with third-party web tutorials, videos, and books.
About TypeScript
Angular is implemented in TypeScript, a duck-typed superset of JavaScript that transpiles to JavaScript. In general, TypeScript applications are easier to maintain at production scale than JavaScript. The simple process of determining whether your types are correct at compile time eliminates a large class of common JavaScript errors, and knowing the types allows editors, tools, and IDEs to be more helpful with code completion, refactoring, and code checking.
I happen to be a big fan of TypeScript. I find it to be much more productive to work on a large TypeScript project than to work on a large JavaScript project. With JavaScript, I really never know whether bugs are lurking in the code waiting to bite me, no matter how often I run JSHint. With TypeScript, at least when I’ve added the optional types, classes, modules, and interfaces, I feel much more secure.
Get started: Install Angular, TypeScript, and Visual Studio Code
With that said, let’s install the software and get started.
Install Node.js and NPM
Before you do anything else, you need to install Node.js and NPM, the Node package manager, because they underlie much of Angular’s installation and tooling. To find out whether they are installed, and if so, which versions are installed, go to a console or terminal prompt and type the following two commands:
$ node -v $ npm -v
On my computer, the Node.js version reported is v6.9.5 and the NPM version is 3.10.10. Those are the current long-term-support versions at the moment, as I can tell from looking at https://nodejs.org/. If your versions are current, you can skip to the next section. If either command is not found or either version is out of date, you should install the current versions. My versions are current because I recently reinstalled Node, as shown in the screenshot below. Installing both Node.js and NPM is a matter of browsing to nodejs.org, pressing the green LTS button, and following the instructions.
IDGOnce you’ve completed the installation, check the versions again to make sure they really updated. I know repeating the check sounds paranoid, but a good programmer needs a healthy dose of paranoia to avoid bugs, and aborted installations aren’t uncommon.
1. Install Angular
There are two ways to install and use Angular. I’ll show you the command-line interface (CLI) method first, for several reasons. The first is that it fits better with the way I like to work. The second is that the CLI generates a more complete starter application than the QuickStart seed. The third is that the cleanup step in the QuickStart seed instructions seems like it might wreak havoc if used at the wrong time or in the wrong directory.
Browse to https://angular.io/ and click on one of the three Get Started buttons. They all go to the same place, the Angular QuickStart.
IDGPlease read that page over, and feel free to try the QuickStart example on Plunker via the link after the first code block. Once you think you can follow the @Component decorator function and the Angular interpolation binding expression {{name}}, click on the CLI QuickStart link at the left. Don’t worry too much about how the decorator function and interpolation binding are implemented: We’ll get to that.
1a. Install and test Angular-CL
We’re going to follow the instructions to set up the CLI development environment. The first step is to install Angular and its CLI globally with npm:
$ npm install -g @angular/cli
If you watch carefully as the installation proceeds, you’ll see a bunch of prerequisites and tools installed before Angular and its CLI. If there are warnings, don’t worry about them. If there are errors, you may have to fix them; I’ve only seen warnings myself. It is safe to reinstall the Angular CLI whenever you want.
The next step is to create a new project with the Angular CLI. I put mine inside a directory called Work under my home user folder.
$ cd work $ ng new my-app
IDGAs the instructions note, generating the new Angular app takes a few minutes. This is a good time to go brew a nice cup of tea or coffee.
You’ll see in the screenshot that I double-checked my TypeScript version (tsc -v) after the Angular CLI installation. Yes, it was a little paranoid. And yes, it’s a good idea for you to do as well. If you have not installed TypeScript already, let’s take care of that now:
$ npm install –g typescript
We’re almost there. Next, step into the new directory and serve the application.
$ cd my-app $ ng serve
As the server will tell you, it’s listening on port 4200. So open a browser tab to http://localhost:4200 and you’ll see the image at left.
IDGThe balance of the CLI QuickStart page instructs you to change the title property and its CSS. Feel free to do that with whatever programming editor (not a word processor!) you happen to have installed, or wait until you install Visual Studio Code later. The browser window will update automatically whenever you save, as the server watches the code and updates on changes.
When you’re done with the server, press Control-C in the terminal window to kill the process.
1b. Install the Angular QuickStart seed
Only do this step if you have skipped Step 1a. If you do both steps, this installation will clobber part of the CLI installation, and you’ll have to redo that if you want to use it again. The instructions for installing the QuickStart seed offer two options to start the process: downloading the seed and unzipping it, or alternatively cloning the seed, as follows:
$ git clone https://github.com/angular/quickstart.git quickstart
Whichever option you choose for getting the code, the next steps are the same:
$ cd quickstart
(or whatever you named the folder)
$ npm install
$ npm start
The npm install step does essentially the same thing as the $ npm install -g @angular/cli step in the CLI version of the installation, except that it does install TypeScript and it does not install the Angular CLI, since that isn’t on the dependency list in package.json. In fact if the Angular CLI is already installed, this script will uninstall it.
The npm start step runs this script:
"start": "concurrently \"npm run build:watch\" \"npm run serve\""
To expand that, the build:watch and serve scripts are:
"build:watch": "tsc -p src/ -w"
and
"serve": "lite-server -c=bs-config.json"
Have I mentioned that tsc is the TypeScript compiler? The -p option sets the project directory to compile, and the -w option says to watch input files.
The npm start step (running the two scripts concurrently) will do essentially the same thing as the ng serve step in the CLI version of the installation, except that it is likely to choose a different port, plus it will automatically load the page it is serving in your default browser, and the page will look like the image at left.
IDGWhen you’re finished playing with your Angular QuickStart app, just press Ctrl+C or close the terminal window to kill the process. You can start it up again by returning to the directory and running ng serve.
The next (optional) step in the QuikStart seed instructions is the one that makes me nervous: It tells you to delete the nonessential files using rm -rf in MacOS or del in Windows. If you decide to do that, at least double-check that you’re in the correct directory before firing off the script you copied from the documentation site. Please don’t try it after you’ve started to add files to the project.
No matter whether you followed the CLI or QuickStart seed instructions, your next step will be to explore the source code of an Angular project. To that end, let’s install an Angular-aware editor.
2. Install Visual Studio Code
The Angular resources page recommends three IDEs: IntelliJ IDEA, Visual Studio Code, and WebStorm. I use all three, but for the purposes of this exercise Visual Studio Code is the best choice because it’s free and open source. Browse to the Visual Studio Code home page and download the current stable version for your platform, then install the package.
Once Visual Studio Code is installed, run it and open the directory that holds your base project. On my Mac, the CLI-generated project is at ~/work/my-app and the seed is at ~/work/quickstartmaster. Your location will vary depending on whether you did the CLI install or the seed install, and any choices you made about their target directories. The source tree should look something like this:
IDGVisual Studio Code supports TypeScript out of the box, so there’s nothing else to install. If you want to install other languages later, it’s easy to do so in the Extensions panel, easily shown by clicking on the bottom icon at the top left. Type the name of the language or tool you want into the search box at the top of the Extensions panel. You can get back to the File Explorer by clicking the top icon at the top left.