Getting started with Angular on Windows 10

Angular is a popular, open-source JavaScript framework by Google for building interactive web apps. From what I see on Twitter (Todd Motto and Wes Bos mainly), it is a big deal (along with React). In this post I try to install and get to grips with the basics but quickly realise I am way out of my depth and too engrained in the old ways of plain HTML, JavaScript and PHP.

Installing Node & NPM

First off, Angular relies upon the Node.js runtime environment to run, as well as the Node Package Manager (NPM) to install Angular itself. Installing Node is simple enough, simply head to Nodejs.org, and click the link for the recommended Windows .msi installer. At the time of writing, the recommended release was v6.11.2 (for Windows 10 x64).

The Node Windows installer

Once Node is installed, I verified the versions of Node and NPM by running node -v and npm -v in the command line.

Installing Angular

With Node/NPM installed, Angular can now be installed by typing npm install -g @angular/cli in the command line. This process might take a few minutes.

Creating the first test app

I navigated to a directory I created called ‘angular’, I then ran the command ng new my-first-app to generate a new skeleton application in a subdirectory called my-first-app.

To test the generated app, I then changed directory to the application and ran the webserver with ng serve --open:

cd my-first-app
ng serve --open

Running this command should then open the default web browser (Chrome in my case) to the app’s URL at http://localhost:4200/. The resulting page is rather unimpressive, but still a small achievement for someone with no experience of using Angular (or anything like it).

New Angular app in browser

One-hundred and eighty-five megabyte ‘Hello World’?!

After realising my created ‘app’ weighed in at a whopping 185MB (and tens of thousands of files), I genuinely considered rage-uninstalling Angular, although to be fair, a large chunk of that is taken up by the node-modules folder, but still, to someone who comes from a background of PHP, MySQL, HTML and a little JavaScript/jQuery, this seems really excessive just for one web page.

To be perfectly honest, I still don’t understand JavaScript frameworks or the advantage of using them in the first place. Looking through example code, I find myself scratching my head wondering if all this fuss is really better than plain HTML and JavaScript. I might revisit Angular in the future, possibly React too, but for now I think I’ll stick to refining my HTML, PHP, Jekyll and CSS skills.