Skip to main content

AngularJS

Basics​

  • AngularJS: JavaScript MVC framework, version 1.x (not Angular 2+)
  • Key Concepts: Modules, Controllers, Directives, Services, Data Binding, Dependency Injection

Setup​

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

<!-- App Declaration -->
<html ng-app="myApp"></html>

Module​

var app = angular.module("myApp", []);

Controller​

app.controller("MainCtrl", function ($scope) {
  $scope.greeting = "Hello, AngularJS!";
});
<div ng-controller="MainCtrl">{{ greeting }}</div>

Data Binding​

  • Interpolation: {{ expression }}
  • ng-model: Two-way binding
<input ng-model="name" />
<p>Hello {{ name }}</p>

Directives​

  • Built-in: ng-app, ng-model, ng-repeat, ng-if, ng-show, ng-hide, ng-click, ng-submit, ng-class
  • Custom Directives:
app.directive("myDirective", function () {
  return {
    template: "<div>Custom Directive!</div>",
  };
});

Filters​

{{ 1234.5678 | number:2 }}
<!-- 1,234.57 -->
{{ "hello" | uppercase }}
<!-- HELLO -->
{{ "hello" | lowercase }}
<!-- hello -->
{{ dateObj | date:'yyyy-MM-dd' }}

Common filters: currency, date, json, limitTo, orderBy

Services​

  • Built-in: $http, $timeout, $interval, $location, $window
  • Custom:
app.service("myService", function () {
  this.sayHello = function () {
    return "Hello!";
  };
});

Inject service:

app.controller("Ctrl", function ($scope, myService) {
  $scope.msg = myService.sayHello();
});

Dependency Injection​

  • Inject dependencies via function parameters.
app.controller("Ctrl", [
  "$scope",
  "$http",
  function ($scope, $http) {
    // ...
  },
]);

Routing (ngRoute)​

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular-route.js"></script>
app.config(function ($routeProvider) {
  $routeProvider
    .when("/home", {
      templateUrl: "home.html",
      controller: "HomeCtrl",
    })
    .otherwise({ redirectTo: "/home" });
});
<div ng-view></div>

$http Service (AJAX)​

$http.get("/api/items").then(function (response) {
  $scope.items = response.data;
});
$http.post("/api/add", { name: "Item" }).then(function (response) {
  // handle response
});

Forms & Validation​

<form name="myForm">
  <input ng-model="user.email" required />
  <span ng-show="myForm.email.$error.required">Required!</span>
</form>

Events​

<button ng-click="doSomething()">Click Me</button>
$scope.doSomething = function () {
  alert("Clicked!");
};

ng-repeat​

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

Scope Hierarchy​

  • $scope: Each controller has its own scope
  • $rootScope: Shared across app

Custom Filters​

app.filter("reverse", function () {
  return function (input) {
    return input.split("").reverse().join("");
  };
});
{{ 'hello' | reverse }}
<!-- olleh -->

Built-in Services​

  • $http, $q (promises), $timeout, $interval, $filter, $location, $window, $rootScope

Promises​

$http.get("/api/data").then(
  function (response) {
    $scope.data = response.data;
  },
  function (error) {
    // error handling
  }
);

Animations (ngAnimate)​

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

Useful CLI Commands (for AngularJS projects)​

  • No official CLI, but use bower, npm, or manual file management.

Best Practices​

  • Use controllerAs syntax for clarity
  • Minimize use of $scope (prefer this)
  • Organize code by modules
  • Prefer one-way data flow where possible

Debugging​

  • Use browser DevTools
  • Use ng-inspector browser extension

Migration​

  • AngularJS is legacy (Angular 2+ is recommended for new projects). Migration tools: Angular Upgrade Guide

Tip: Always separate concerns (controllers for logic, views for UI, services for data/communication).

Reference​