AngularJS

Try the New Angular New
Download AngularJS
AngularJS support has officially ended as of January 2022. See what ending support means and read the end of life announcement.
Visit angular.io for the actively supported Angular.

Why AngularJS?

HTML is great for declaring static documents, but it falters when we try to use it for declaring dynamic views in web-applications. AngularJS lets you extend HTML vocabulary for your application. The resulting environment is extraordinarily expressive, readable, and quick to develop.

Alternatives

Other frameworks deal with HTML’s shortcomings by either abstracting away HTML, CSS, and/or JavaScript or by providing an imperative way for manipulating the DOM. Neither of these address the root problem that HTML was not designed for dynamic views.

Extensibility

AngularJS is a toolset for building the framework most suited to your application development. It is fully extensible and works well with other libraries. Every feature can be modified or replaced to suit your unique development workflow and feature needs. Read on to find out how.

The Basics

  1. <!doctype html>
  2. <html ng-app>
  3.   <head>
  4.     <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
  5.   </head>
  6.   <body>
  7.     <div>
  8.       <label>Name:</label>
  9.       <input type="text" ng-model="yourName" placeholder="Enter a name here">
  10.       <hr>
  11.       <h1>Hello {{yourName}}!</h1>
  12.     </div>
  13.   </body>
  14. </html>
Hint: hover over me.

Hello !

Watch as we build this app

Add Some Control

Data Binding

Data-binding is an automatic way of updating the view whenever the model changes, as well as updating the model whenever the view changes. This is awesome because it eliminates DOM manipulation from the list of things you have to worry about.

Controller

Controllers are the behavior behind the DOM elements. AngularJS lets you express the behavior in a clean readable form without the usual boilerplate of updating the DOM, registering callbacks or watching model changes.

Plain JavaScript

Unlike other frameworks, there is no need to inherit from proprietary types in order to wrap the model in accessors methods. AngularJS models are plain old JavaScript objects. This makes your code easy to test, maintain, reuse, and again free from boilerplate. 

  1. <!doctype html>
  2. <html ng-app="todoApp">
  3.   <head>
  4.     <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
  5.     <script src="todo.js"></script>
  6.     <link rel="stylesheet" href="todo.css">
  7.   </head>
  8.   <body>
  9.     <h2>Todo</h2>
  10.     <div ng-controller="TodoListController as todoList">
  11.       <span>{{todoList.remaining()}} of {{todoList.todos.length}} remaining</span>
  12.       [ <a href="" ng-click="todoList.archive()">archive</a> ]
  13.       <ul class="unstyled">
  14.         <li ng-repeat="todo in todoList.todos">
  15.           <label class="checkbox">
  16.             <input type="checkbox" ng-model="todo.done">
  17.             <span class="done-{{todo.done}}">{{todo.text}}</span>
  18.           </label>
  19.         </li>
  20.       </ul>
  21.       <form ng-submit="todoList.addTodo()">
  22.         <input type="text" ng-model="todoList.todoText"  size="30"
  23.                placeholder="add new todo here">
  24.         <input class="btn-primary" type="submit" value="add">
  25.       </form>
  26.     </div>
  27.   </body>
  28. </html>
  1. angular.module('todoApp', [])
  2.   .controller('TodoListController', function() {
  3.     var todoList = this;
  4.     todoList.todos = [
  5.       {text:'learn AngularJS', done:true},
  6.       {text:'build an AngularJS app', done:false}];
  7.  
  8.     todoList.addTodo = function() {
  9.       todoList.todos.push({text:todoList.todoText, done:false});
  10.       todoList.todoText = '';
  11.     };
  12.  
  13.     todoList.remaining = function() {
  14.       var count = 0;
  15.       angular.forEach(todoList.todos, function(todo) {
  16.         count += todo.done ? 0 : 1;
  17.       });
  18.       return count;
  19.     };
  20.  
  21.     todoList.archive = function() {
  22.       var oldTodos = todoList.todos;
  23.       todoList.todos = [];
  24.       angular.forEach(oldTodos, function(todo) {
  25.         if (!todo.done) todoList.todos.push(todo);
  26.       });
  27.     };
  28.   });
  1. .done-true {
  2.   text-decoration: line-through;
  3.   color: grey;
  4. }
Hint: hover over me.

Todo

1 of 2 remaining [ archive ]

Watch as we build this app

Create Components

Directives

Directives are a unique and powerful feature available in AngularJS. Directives let you invent new HTML syntax, specific to your application.

Reusable Components

We use directives to create reusable components. A component allows you to hide complex DOM structure, CSS, and behavior. This lets you focus either on what the application does or how the application looks separately.

Localization

An important part of serious apps is localization. AngularJS's locale aware filters and stemming directives give you building blocks to make your application available in all locales. 

  1. <!doctype html>
  2. <html ng-app="app">
  3.   <head>
  4.     <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
  5.     <script src="components.js"></script>
  6.     <script src="app.js"></script>
  7.   </head>
  8.   <body>
  9.     <tabs>
  10.       <pane title="Localization">
  11.         <span>Date: {{ '2012-04-01' | date:'fullDate' }}</span><br>
  12.         <span>Currency: {{ 123456 | currency }}</span><br>
  13.         <span>Number: {{ 98765.4321 | number }}</span><br>
  14.       </pane>
  15.       <pane title="Pluralization">
  16.         <div ng-controller="BeerCounter">
  17.           <div ng-repeat="beerCount in beers">
  18.             <ng-pluralize count="beerCount" when="beerForms"></ng-pluralize>
  19.           </div>
  20.         </div>
  21.       </pane>
  22.     </tabs>
  23.   </body>
  24. </html>
  1. angular.module('components', [])
  2.  
  3.   .directive('tabs', function() {
  4.     return {
  5.       restrict: 'E',
  6.       transclude: true,
  7.       scope: {},
  8.       controller: function($scope, $element) {
  9.         var panes = $scope.panes = [];
  10.  
  11.         $scope.select = function(pane) {
  12.           angular.forEach(panes, function(pane) {
  13.             pane.selected = false;
  14.           });
  15.           pane.selected = true;
  16.         }
  17.  
  18.         this.addPane = function(pane) {
  19.           if (panes.length == 0) $scope.select(pane);
  20.           panes.push(pane);
  21.         }
  22.       },
  23.       template:
  24.         '<div class="tabbable">' +
  25.           '<ul class="nav nav-tabs">' +
  26.             '<li ng-repeat="pane in panes" ng-class="{active:pane.selected}">'+
  27.               '<a href="" ng-click="select(pane)">{{pane.title}}</a>' +
  28.             '</li>' +
  29.           '</ul>' +
  30.           '<div class="tab-content" ng-transclude></div>' +
  31.         '</div>',
  32.       replace: true
  33.     };
  34.   })
  35.  
  36.   .directive('pane', function() {
  37.     return {
  38.       require: '^tabs',
  39.       restrict: 'E',
  40.       transclude: true,
  41.       scope: { title: '@' },
  42.       link: function(scope, element, attrs, tabsController) {
  43.         tabsController.addPane(scope);
  44.       },
  45.       template:
  46.         '<div class="tab-pane" ng-class="{active: selected}" ng-transclude>' +
  47.         '</div>',
  48.       replace: true
  49.     };
  50.   })
  1. angular.module('app', ['components'])
  2.  
  3. .controller('BeerCounter', function($scope, $locale) {
  4.   $scope.beers = [0, 1, 2, 3, 4, 5, 6];
  5.   if ($locale.id == 'en-us') {
  6.     $scope.beerForms = {
  7.       0: 'no beers',
  8.       one: '{} beer',
  9.       other: '{} beers'
  10.     };
  11.   } else {
  12.     $scope.beerForms = {
  13.       0: 'žiadne pivo',
  14.       one: '{} pivo',
  15.       few: '{} pivá',
  16.       other: '{} pív'
  17.     };
  18.   }
  19. });
Hint: hover over me.

Locale: US

Date: Sunday, April 1, 2012
Currency: $123,456.00
Number: 98,765.432
no beers
1 beer
2 beers
3 beers
4 beers
5 beers
6 beers

Locale: SK

Date: nedeľa, 1. apríla 2012
Currency: 123 456,00 €
Number: 98 765,432
žiadne pivo
1 pivo
2 pivá
3 pivá
4 pivá
5 pív
6 pív

Navigation, Forms and Backends

Deep Linking

A deep link reflects where the user is in the app. This is useful so users can bookmark and email links to locations within the app. Round trip apps get this automatically, but AJAX apps by their nature do not. AngularJS combines the benefits of deep linking with desktop app-like behavior.

Form Validation

Client-side form validation is an important part of a great user experience. AngularJS lets you declare the validation rules of the form without having to write JavaScript code. Write less code, go have beer sooner.

Server Communication

AngularJS provides built-in services on top of XHR as well as various other backends using third party libraries. Promises further simplify your code by handling asynchronous return of data.

Testability Built-in

Injectable

The dependency injection in AngularJS allows you to declaratively describe how your application is wired. This means that your application needs no main() method which is usually an unmaintainable mess. Dependency injection is also a core to AngularJS. This means that any component which does not fit your needs can easily be replaced.

Testable

AngularJS was designed from ground up to be testable. It encourages behavior-view separation, comes pre-bundled with mocks, and takes full advantage of dependency injection. It also comes with end-to-end scenario runner which eliminates test flakiness by understanding the inner workings of AngularJS.