Right, so picking up from last week’s announcement post-thingie, today’s post is more of an introduction to AngularJS, and maybe a tip or two, on how to set it up, etc.
What Is AngularJS?
AngularJS is a JavaScript framework - Short, and simple, no? It’s a framework that enables us to build single page web applications. It is also used by other frameworks, to extend it’s usage; some frameworks like Ionic take the Angular web-javascript app code, and cross-compile it into native Apps using other third party, open-source cross-compilers like Apache’s Cordova.
AngularJS is…more handier, to learn, and know since it’s a versatile JavaScript framework.
What Kind Of Apps Have Been Built Using AngularJS?
The Youtube app on the PS, is made up of AngularJS. Netflix was using Angular too. Other notable websites using Angular today include console.aws.amazon.com, udemy.com, etc. For more web apps made using Angular you can check out this page.
Then there are native mobile apps that made using Angular, and Ionic 2. You can checkout the list of apps that are made using these two, over at this webpage.
What Are The Pre-requisites For Learning Angular From This Blog?
There are some pre-requisites that we must have ticked off, before you start learning AngularJS from here (maybe even before you start learning from anywhere else too). These are:
- Experience with writing HTML/CSS: We should have some experience writing HTML/CSS (HTML5 amp; CSS3) from scratch. AngularJS is a framework for writing single page web-apps, doh.
- Some knowledge of, and experience with JavaScript: AngularJS is a JavaScript framework (I mention this above), and so we need to have a fairly good knowledge of, and experience with JavaScript in general, before we dive into the tutorials. AngularJS does a lot of DOM manipulation before, and during it’s startup (bootstrapping) process. Event handling, et al require JavaScript knowledge, the kind that comes from experience.
- Some knowledge, and idea of what DOM is: JavaScript is all about manipulating DOM (at the least in it’s basic form), and so knowledge of what the Document Object Model is, is required. Ergo, this point just re-iterates the above point.
- Knowledge, and some experience with MVC architectures: Familiarity, and some experience with M-V-C (model-view-controller) concepts is required to grasp how things work within our Angular app that we’re going to make.
- We should be comfortable using the command line: We’ll be using the command line for a ton of tasks, right from setting up our Angular dev environment to generating Angular’s elements, etc.
- Some knowledge about TypeScript: Angular 2 (4) uses TypeScript, which it compiles to JavaScript. TypeScript (or ECMAScript), is a super-set of JavaScript. That is, its syntax, with some other JavaScript-y stuff is the same. TypeScript extends JavaScript. Using Typescript is probably for the best because it extends strict typing of variables, and forces us (in some instances) to use OOP. This is not a necessary requirement, but it does help with understanding what’s going on, at a deeper level.
- We require an IDE or an editor: A capable IDE / code editor like WebStorm, Emacs, Atom, Sublime Text, etc. I’ll be using Atom (or Emacs).
- Some experience with Node and NPM: Although, not a requirement, but knowing NodeJS does make things easier while performing certain tasks with the Angular CLI.
- Experience with a server side scripting language: There’s probably one more requirement that we should fulfill, and that’s knowing a server side scripting language like PHP. This is not a listed requisite, just something that we’ll need during this tutorial series, to finish our Angular App (project).
Angular has changed quite a lot. And, we’re going to dive into setting up a development area (or environment) for our Angular Tutorials. We’ll be using the latest Angular, and we’ll be using the CLI (or Angular’s Command Line Interface) to do most of everything.
Before we proceed with installing, and setting up Angular, we need to install, and setup Node on our machine(s). We’ll npm (or node package manager) to install the Angular CLI.
Head on over here, to install Node, and npm together; then come back, and continue on from here.
How To Get Running For Dev?
Assuming that you’ve setup NodeJS, and have somewhat familiarized yourself with npm, we can no go ahead, and set up our Angular environment.
Normally, I would either use Docker or Vagrant to setup a dev / experimental environment, but I’ll not be doing so for this tutorial series, since it’s a Angular only series. With that being said, we start by navigating into a folder that will house our little project based on this tutorial series.
cd /path/to/the/folder-of-your-choiceNow we use npm to install, and setup Angular CLI for us.
npm install -g @angular/cli
Note that I am not using the -g option here. See below.
In the above line *@angular*’ is the namespace that the Angular npm repository uses. And, the *cli* is what we want to install. The -g option is used to install a node package on a global level. Which means that no matter which directory you find yourself in, and no matter when, you can still use the cli like a normal terminal (bash) command.
Great! With that we’ve successfully installed the Angular CLI. Now we’ll go ahead, and create our little project using the CLI.
ng new dailywrite
I am going with the project name 'dailywrite'. Note that I am not using the -g option here. See below.
The above command creates a new Angular app in the folder dailywrite, and the app is named / termed as ‘dailywrite’ by the Angular CLI
Awesome! We’ve succesfully just created our first bare-bones Angular web-app project using the CLI. Now, we’ll take it out for a bit of a spin. Let’s navigate to the project folder (dailywrite in our case).
cd dailywrite
ng serve
Note that I am not using the -g option here. See below.
The ng serve command compiles, packs, and serves our webapp. We can see our bare-bones app running, and now we can open it up in the browser. Using the browser of your choice you should navigate to localhost:4200.
Note: Here’s More Information on npm-do, et al.
I did not used the -g option while installing the CLI, and instead have opted for having the CLI available locally to each project’s folder separately. This helps me with version conflicts, packaging, etc. If you’d like to do the same, then you’d need to uninstall Angular CLI if you’ve installed it with the -g option already.
Now we need to tell the bash (terminal) environment where to find our CLI within our project’s directory. This is so that we may be able to run commands like ng serve, etc that are local to that project directory only. I found npm-do“ not so long a go. It’s a great, niftly little piece of code that enables using local node packages that are not installed globally. It works flawlessly, from my experience.
We can set up npm-do by adding the below one liner in our .profile or .bash_profile files.
function npm-do { (PATH=$(npm bin):$PATH; eval $@;) }With that done, quit your terminal windown, and relaunch it (or you can just source if you know how to).
source ~/.profileWe are now setup to use npm packages locally; in our case, use the local install of Angular CLI package.
To use local packages we just need to add the npm-do keyword before the any node package commands, like shown below.
#ng new dailywrite thus becomes
npm-do ng new dailywrite
#ng serve thus becomes
npm-do ng serveLastly, do note that I’ll be also interchangeably using Angular CLI and CLI from here on out, and both should mean the same when, and where mentioned; except where mentioned that they’re differently used.
The End Goal
The end goal is to make an workable app. What kind of app? Well, we’ll get to that a little later in the series, after having learned a few important elementals that Angular graces us with. Once we’re comfortable with a few of them, we will start on our goal project while using this tutorial series.
That’s it for today. More soon!
