Learning Management Platform for Written Tutorial Series.

AngularJS Installation and Configuration

AngularJS Installation and Configuration

Introduction

In this tutorial, we are going to look at how to install and configure Angular JS. We will use Bower to install and manage frameworks, libraries etc. This is not necessary but it’s one of the godly ways of doing things in the 21st century. You can read more about bower and how to install it from the Bower official website. We will also work with twitter bootstrap.

Topics to be covered

We will cover the following topics.

  • Pre-requites for AngularJS applications
  • Installing AngularJS using bower
  • Alternative installation methods
  • HTML Webpage configuration for angular JS

Pre-requites for AngularJS applications

You will need the following developer tools when developing AngularJS application

  1. Modern web browser - AngularJS is a client-side framework. The code runs within a web browser that supports JavaScript. Most web browsers support JavaScript and many other features.
  2. Web server – this is an optional requirement but a must have. Chances are your AngularJS application will need to interact with a backend if anyone is to use it at all
  3. Integrated Development Environment – at a minimum, you need a text editor. I prefer IDEs because there are lots of benefits i.e. formatting code for you, auto complete, detecting errors etc. I personally love NetBeans IDE but feel free to use whatever IDE that you prefer
  4. Server side [PHP]– this is an optional requirement. Later tutorials will use PHP for the back end. You can use whatever server side technology that works for you.
  5. Database [MySQL] – this is an optional requirement. At some point, we will need to add, update or delete data from the database.
  6. Bower – this is an optional requirement. I find it easier to manage frameworks, libraries etc. using bower. You can use whatever tool that works for you.

Installing AngularJS using bower

In this section, we are going to AngularJS and twitter bootstrap using bower. Twitter bootstrap will add a bit of beauty to our examples. You can read more about twitter bootstrap from the official website Am working on a windows machine and I have XAMPP already installed. The good news is the knowledge in this tutorial is not dependent on the platform. The knowledge still applies to other platforms.

  1. create a new directory in the web root
  2. install the requirements frameworks

Step 1: Project directory

  1. You can directly create the folder angular-js in drive C:\xampp\htdocs. For me, I will create a new project using NetBeans IDE

Step 2: Installing required frameworks

  1. Open the command prompt / terminal and browser to the project root directory. Note: I have Cygwin installed. This allows me to run commands from the terminal in NetBeans IDE. I hate switching between windows just to run commands.
  2. On windows, run the following command to browser to the project root directory
cd C:\xampp\htdocs\angular-js

Run the following command to install the required frameworks using bower

bower install angular

HERE,

  • The above command installs AngularJS framework files into a directory bowercomponents. This directory is automatically created by bower. The installed files are in /bowercomponents/angular
bower install angular-route

HERE,

  • The above command installed AngularJS route and all of its dependencies if any. The installed files are in /bower_components/angular-route
bower install bootstrap

HERE,

  • The above command installs twitter bootstrap and all of its dependencies if any. Twitter bootstrap uses JQuery. JQuery will be installed too. The installed files are in /bower_components/bootstrap

Alternative installation methods

You can just link the required files in the HTML page from either your local server or respective content delivery network CDN of the respective framework. HTML Webpage configuration for angular JS The configuration depends on your personal taste/agreed upon rules of your organisation. In this section, we will create the following directories;

  1. js – this directory will contain all JavaScript files
  2. css – this directory will contain all Cascading Style Sheet (CSS) files
  3. images – this directory will contain images if any.

We will also copy the necessary JavaScript / CSS files into the respective folders

Step 1: Create Required Directories

On windows, you can create the folders manually or run the following commands from the terminal

mkdir js
mkdir css
mkdir images

We will now copy the mandatory JS file into js directory. We will look at other directories in the next tutorial AngularJS Hello World.

  1. Copy the following JavaScript file /bower_components/angular/angular.min.js into the directory /js directory
  2. Copy the following JavaScript file /bower_components/angular-route/angular-route.min.js into the directory /js directory

Step 2: Create HTML page and reference required files

Create a new HTML page with the following code index.html

<!DOCTYPE html>
<html ng-app="MyApp">
    <head>
        <title>AngularJS  Tutorial Series</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width">
    </head>
    <body >
        <div ng-controller="HelloController">Hi {{name}}, welcome to AngularJS Tutorial Series</div>

        <!-- JS Scripts -->
        <script src="js/angular.min.js"></script>
        <script src="js/angular-route.min.js"></script>
        <script>
            angular.module("MyApp", [])
                    .controller("HelloController", function($scope) {
                        $scope.name = "Rodrick"
                    });
        </script>
    </body>
</html>

Load the following URL in your web browser

http://localhost/angular-js/

You will get the following output

AngularJS App

Summary

Installing and configuration AngularJS is very easy. It is easy easier when done with a terminal and bower.

What’s next?

The stage has been set. The next tutorial will explorer our application and introduce more cool features that demonstrate the power of AngularJS

Tutorial History

Tutorial version 1: Date Published 2015-09-19


...