Setup AngularJS

24 Oct 2016

Download AngularJS

There are multiple ways to download and use AngularJS.

You can use the Google CDN using:

1
2
3
4
5
6
7
8
9
10
<!DOCTYPE HTML>
<html ng-app="myApp">
    <head>
        <title>AngularJS App</title>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
    </head>
    <body>
    ...
    </body>
</html>

Note that only versions 1.0.1 and above are available on the CDN. If you need an earlier version (which you shouldn’t) you can use the https://code.angularjs.org/ URL, which was the previous recommended location for hosted code source. If you’re still using the Angular server you should switch to the CDN version for even faster loading times.

Using Bower:
bower install angular
Or use a specific version of Angular:
bower install angular#1.2.0
Using GitHub:
git clone -b master https://github.com/angular/angular.js.git
Using NPM:
npm install angular

Quick example:

Make a simple HTML page including the AngularJS library and a JavaScript file called app.js like:

1
2
3
4
5
6
7
8
9
10
<!DOCTYPE HTML>
<html>
    <head>
        <title>Simple App</title>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
        <script src="app.js"></script>
    </head>
    <body>
    </body>
</html>

Then add to the <html> tag: “ng-app=”myApp”.

In your app.js file, write the following:

1
2
3
4
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.myText = "Hello World!";
});

Go back to your html file and add to the <body> tag :
ng-controller="myCtrl".
And in your body add a <h1>{{ myText }}</h1>.

It should looks like this:

1
2
3
4
5
6
7
8
9
10
11
<!DOCTYPE HTML>
<html>
    <head>
        <title>Simple App</title>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
        <script src="app.js"></script>
    </head>
    <body ng-controller="myCtrl">
        <h1>{{ myText }}</h1>
    </body>
</html>

Now open your html file and admire a wonderful :