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).
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).
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.