Welcome to our first tutorial on using Angular, we hope you find it useful. Feel free to comment if you have any issues and we will try and help out!
What is Angular
It was initially designed to be a tool used by designers to easily piece together pages, however when the potential of it was realised by developers it became widely used and has grown massively, collecting a large community along the way.
The future of Angular is currently being developed in the form of Angular 2, a complete re-write from the ground up using TypeScript. Angular 2 is completely different and is not compatible with Angular 1, and is currently in beta stages as I write this.
So why should you learn Angular 1, if Angular 2 is being developed? Well Angular 1 is a tried and tested framework, used by many large companies around the world. It will take a long time for Angular 2 to gain the same amount of traction Angular 1 currently enjoys. This makes it much easier to learn with the vast amount of resources out there, and with Angular 2 still being in early stages, what you learn of it now may change in a months time again. Also, many of the same ideas are still used in Angular 2, just written in a different way.
Cons of Angular
Ok, so you now know a little bit about the background of Angular, lets begin using it!
Lets begin by setting up our application folder. Start by creating a folder called ‘Todo List’.
Inside this folder we are going to create some subfolders and files. It should be structured as follows:
- Todo List
We will be adding some more files and folders to this soon, but to begin with this is the basic structure of our application. I must point out that you can structure you application any way you like, however this is the way I like to structure my applications.
Folder Structure Overview
Let me provide a quick insight into the layout of this folder structure, although bear in mind some of the terms you may not have come across before but they will make sense soon.
app – this folder will contain the files specifically made for our application that will utilise Angular. It will contain our directives, pages and controllers for our application, along with the app.js file which will contain the initial set up of our application and routing configuration.
assets – this folder will contain files that are required by our application but do not use Angular, for example, it will contain the styling for our pages and also any external dependencies we may want to use, for example Bootstrap which we will be using in this application.
index.html – this file will be the starting point for our application. This is the page that will be loaded first and will be the container for all our views.
Getting Our External Dependencies
Note: More advanced users may want to obtain the following libraries using NPM or bower etc.. this tutorial will cover the traditional way.
Angular – https://angularjs.org
The latest version available at the time of writing is 1.5.0. However, they are unlikely to be changing Angular v1.x very much any longer so any 1.x version should work fine.
There are two scripts we need to download from this site. The first is the main Angular script which should be easily available. The second is ‘angular-route’ and should be available by clicking on the ‘Browse Additional Modules’ option.
Now you may notice there are several versions of the same file, eg. angular.js, angular.min.js and angular.min.js.map. The two of interest are angular.js and angular.min.js, either of these will work fine. They are essentially the same, however the one ending in .min.js is a minified version of the script, in other words it has been compressed to help pages load quicker. So I recommend you choose the angular.min.js and angular-route.min.js files.
Place these files in the assets/js folder.
Bootstrap – http://getbootstrap.com
The latest available version of Bootstrap at the time of writing is v3.3.6. Bootstrap 4 is currently in development, and is available in an alpha release however to ensure this tutorial works correctly choose a version in the v3.x.x release.
Place the files in the matching folders in the assets folder. You may remove any .map files or non minified versions of the files if you like.
jQuery – http://jquery.com
There are several versions of jQuery available. Bootstrap supports jQuery 1.9.x – jQuery 2.x so any of those will suffice. Save this file in the assets/js folder as jquery.min.js.
Basic HTML structure
The following this basic HTML structure you are required to have to start our application. Note the following does not include any Angular magic yet. This is simply the basic structure of an HTML page and linking in our dependencies.
That is pretty much the basic set up of the application structure. In the next tutorial we will look more in depth into the different parts of an Angular application.