AngularJS Basics Cheat Sheet

1. Installation and Setup

CDN (Quick Start)

Add AngularJS to your HTML:

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>

2. Basic AngularJS Application

<!DOCTYPE html>
<html ng-app="myApp">
<head>
    <title>AngularJS App</title>
</head>
<body>
    <div ng-controller="MainController">
        <h1>{{ message }}</h1>
    </div>

    <script>
        const app = angular.module('myApp', []);
        app.controller('MainController', function($scope) {
            $scope.message = 'Hello, AngularJS!';
        });
    </script>
</body>
</html>

3. Key Directives

ng-app – Declares the AngularJS application.

<div ng-app="myApp"></div>

ng-controller – Binds controller to a view.

<div ng-controller="MainController"></div>

ng-model – Two-way data binding for forms/inputs.

<input ng-model="username" placeholder="Enter your name">
<p>Hello, {{ username }}</p>

ng-repeat – Loops through arrays.

<ul>
    <li ng-repeat="item in items">{{ item }}</li>
</ul>

ng-bind – Binds content to HTML elements.

<h1 ng-bind="message"></h1>

ng-show / ng-hide – Conditional rendering.

<p ng-show="isLoggedIn">Welcome back!</p>
<p ng-hide="isLoggedIn">Please log in.</p>

ng-if – Conditionally includes/excludes elements.

<div ng-if="user.isAdmin">
    <p>Admin Access Granted</p>
</div>

4. Expressions

AngularJS expressions are written in double curly braces {{ }}.

<p>{{ 5 + 5 }}</p>  <!-- Outputs 10 -->
<p>{{ username }}</p>  <!-- Displays scope value -->

5. Controllers

Define application logic using controllers.

<div ng-controller="ExampleController">
    <h1>{{ title }}</h1>
</div>

<script>
    app.controller('ExampleController', function($scope) {
        $scope.title = 'AngularJS Controllers';
    });
</script>

6. Data Binding

Two-way data binding:

<input type="text" ng-model="name">
<p>Hello, {{ name }}</p>

One-way data binding (ng-bind):

<p ng-bind="name"></p>

7. Filters

Filters format data displayed to users.

<p>{{ message | uppercase }}</p>
<p>{{ price | currency }}</p>
<p>{{ date | date:'fullDate' }}</p>

Common Filters:
- uppercase – Converts to uppercase.
- lowercase – Converts to lowercase.
- currency – Formats as currency.
- date – Formats date.
- filter – Filters an array based on criteria.

8. Forms and Validation

<form name="userForm">
    <input type="text" ng-model="user.name" required>
    <span ng-show="userForm.$submitted && userForm.name.$invalid">Name is required.</span>
    <button type="submit">Submit</button>
</form>

9. ng-click (Event Handling)

<button ng-click="increment()">Increase</button>
<p>{{ count }}</p>

<script>
    app.controller('CounterController', function($scope) {
        $scope.count = 0;
        $scope.increment = function() {
            $scope.count++;
        };
    });
</script>

10. ng-repeat (Looping Through Data)

<ul>
    <li ng-repeat="user in users">
        {{ user.name }} - {{ user.email }}
    </li>
</ul>

<script>
    app.controller('UserController', function($scope) {
        $scope.users = [
            { name: 'Alice', email: 'alice@example.com' },
            { name: 'Bob', email: 'bob@example.com' }
        ];
    });
</script>

11. Services

Services are used to share data and logic across controllers.

app.service('MathService', function() {
    this.square = function(x) {
        return x * x;
    };
});

app.controller('MathController', function($scope, MathService) {
    $scope.result = MathService.square(4);  // Outputs 16
});

12. Custom Directives

Directives extend HTML functionality.

<div hello></div>

<script>
    app.directive('hello', function() {
        return {
            template: '<h1>Hello, Custom Directive!</h1>'
        };
    });
</script>

13. Dependency Injection

AngularJS uses dependency injection to manage services and components.

app.controller('MainController', function($scope, $http) {
    $http.get('/api/data').then(function(response) {
        $scope.data = response.data;
    });
});

14. HTTP Requests ($http Service)

<div ng-controller="ApiController">
    <p>{{ data }}</p>
</div>

<script>
    app.controller('ApiController', function($scope, $http) {
        $http.get('https://api.example.com/info')
            .then(function(response) {
                $scope.data = response.data;
            });
    });
</script>

15. Routing (ngRoute)

Install AngularJS route module:

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular-route.min.js"></script>

Set up routing:

app.config(function($routeProvider) {
    $routeProvider
    .when('/', {
        templateUrl: 'home.html',
        controller: 'HomeController'
    })
    .when('/about', {
        templateUrl: 'about.html',
        controller: 'AboutController'
    })
    .otherwise({
        redirectTo: '/'
    });
});

16. Single Page Application (SPA) Example

<div ng-view></div>

<script>
    app.config(function($routeProvider) {
        $routeProvider
        .when('/', {
            template: '<h1>Home Page</h1>'
        })
        .when('/about', {
            template: '<h1>About Page</h1>'
        })
        .otherwise({
            redirectTo: '/'
        });
    });
</script>

17. Useful AngularJS CLI Commands

npm install -g angular-cli       # Install CLI globally
ng serve                         # Run Angular app
ng generate component my-comp    # Generate component
ng generate service my-service   # Generate service

Download PDF of cheatsheet

AngularJS