Episode 3 of 25

Downloading AngularJS

Learn how to set up AngularJS in your project using CDN or local files.

Let's get AngularJS set up in your project. There are several ways to include it.

Method 1: CDN (Recommended for Learning)

<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
    <meta charset="UTF-8">
    <title>My AngularJS App</title>

    <!-- AngularJS from CDN -->
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
</head>
<body>

    <div ng-controller="MainCtrl">
        <h1>{{ greeting }}</h1>
    </div>

    <script>
        var app = angular.module('myApp', []);
        app.controller('MainCtrl', function($scope) {
            $scope.greeting = "Hello, AngularJS!";
        });
    </script>

</body>
</html>

Method 2: Download Locally

  1. Visit angularjs.org
  2. Download the minified version
  3. Add it to your project folder
<script src="js/angular.min.js"></script>

Method 3: npm

npm install angular

The ng-app Directive

The ng-app directive tells AngularJS where your application starts:

<!-- Apply to the entire page -->
<html ng-app="myApp">

<!-- Or apply to a specific section -->
<div ng-app="myApp">...</div>

Verify It Works

<div ng-app="">
    <p>2 + 3 = {{ 2 + 3 }}</p>
</div>
<!-- Should display: 2 + 3 = 5 -->

If you see 5 instead of {{ 2 + 3 }}, AngularJS is working!