Angular is an open-source, front-end framework for building applications. The web apps produced with it are very modular in design and lean heavily on reusability. It has been around for a while now (in software terms that is), and is steadily gaining new versions and functionality. All examples in this blog are based on Angular 5.
You can see the release schedule here (1).
For a new player on the field it might all seem a little bewildering – where to start, what to do or learn first? Angular comes with a great many functionalities, concepts and ideas.
Luckily the amount of resources and examples online is steadily growing. The Angular site itself contains a comprehensive example application (2) which is used to explain and show many of the concepts behind Angular. But as with all examples and demonstrations, it generally doesn’t show that one thing you’re looking for.
That’s why I put together these examples, in the shape of a little family tale, incorporating several things that I ran into when I started playing with Angular myself. It’s all about communicating – talking and listening.
We’ll be using the Node Package Manager (NPM) to install Angular-CLI, which we can then use to quickly setup a basic Angular site to get you started.
The following is a small introduction to basic component-to-component communication in Angular.
You’ll need to have both NodeJS and NPM installed. Luckily, the NodeJS installer includes both of these, so it’s a one-stop download for us. Download the NodeJS installer from their site (3). If you’re not sure what version to get, use the LTS version and ‘next-next-next’ your way through the dialogue screens. You can work with NPM directly on the command line (DOS, Bash or PowerShell), but I prefer using a tool like Visual Studio Code (4) since it comes with a built-in text editor and other handy functions.
We will start by installing the Angular CLI environment that we will need. It will be installed globally, so you can use it from anywhere on your PC. To start this, enter the following command: