Angular 1 – Getting Started

Posted on Posted in Angular

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

Angular is a framework for developing SPA (single page applications) using HTML and Javascript. It has become increasingly popular since it’s initial release in 2009. It is developed by Google and powers many websites you likely use every day.

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

So yes, I have been singing Angular’s praises, but there must be some downsides to Angular, and there are. Angular does take a bit of getting used to. It is a large framework that is intended to be a complete toolkit for you to develop an application from beginning to end, and it does that fantastically, however with that comes a certain amount of complexity. There is a lot to learn, some of which will take some time to understand completely. Another drawback is performance. Now while this might seem like a rather large negative, hear me out. Many of the performance issues people experience when using Angular is down to inefficient or badly written code, not the framework itself. However, were you to write the code in raw Javascript, performance would be better, but that also has pros and cons.

Getting Started

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
    • app
      • directives
      • views
      • app.js
    • assets
      • css
      • js
      • fonts
    • index.html

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

So, our application is going to use some code that other people have made to save time. Angular being the first and most obvious one. The second one is Bootstrap which is a UI library created by Twitter, this should save us a lot of time as we don’t have to design the UI from scratch. The third is jQuery, which is probably the most popular Javascript plugin on the planet, however, nowadays it is better in most developers opinions, not to use jQuery where possible. Everything that jQuery can do can be written in normal Javascript, and is more than likely more performant. The only reason we will be including jQuery is because it is a Bootstrap dependency.

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.

<!DOCTYPE html>
<html>
<head>
    <title>ToDo List</title>
    <link rel="stylesheet" type="text/css" href="assets/css/bootstrap.min.css">
</head>
<body>

    <script type="text/javascript" src="assets/js/jquery.min.js"></script>
    <script type="text/javascript" src="assets/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="assets/js/angular.min.js"></script>
    <script type="text/javascript" src="assets/js/angular-route.min.js"></script>
</body>
</html>

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.

Leave a Reply

Your email address will not be published. Required fields are marked *