AngularJS - a framework for dynamic web applications from Google

AngularJS was created for those developers who believe that a declarative style is better for creating a UI, and an imperative one is for writing business logic.

Zen Angular


  • It’s good to separate the DOM manipulation from the application logic. This greatly improves code testability.
  • It’s good to think that automated application testing is just as important as writing the application itself. Testability is very dependent on how the code is structured.
  • It is good to separate the development of the client from the server. This allows for parallel development and improves reuse on both sides.
  • It’s good when the framework leads the developer throughout the entire development cycle of the application: from designing the UI through writing business logic to testing.
  • It is good when common tasks become trivial, and complex ones become simpler.


AngularJS is a comprehensive framework. In the standard delivery, it provides the following features:
  • All you need to create CRUD applications: data-binding, basic template directives, form validation, routing, deep linking, component reuse, dependency injection, tools for interacting with server (RESTful) data sources.
  • All you need for testing: tools for unit testing, end-to-end testing, mock.
  • A typical application template that includes a directory structure and test scripts.


AngularJS is developed by Google employees and is used in at least one Google service - DoubleClick .



Examples


A simple todo-cabinet
<div ng-app>
  <h2>Todo</h2>
  <div ng-controller="TodoCtrl">
    <span>{{remaining()}} of {{todos.length}} remaining</span>
    [ <a href="" ng-click="archive()">archive</a> ]
    <ul class="unstyled">
      <li ng-repeat="todo in todos">
        <input type="checkbox" ng-model="todo.done">
        <span class="done-{{todo.done}}">{{todo.text}}</span>
      </li>
    </ul>
    <form ng-submit="addTodo()">
      <input type="text" ng-model="todoText"  size="30" placeholder="add new todo here">
      <input class="btn-primary" type="submit" value="add">
    </form>
  </div>
</div>
​

function TodoCtrl($scope) {
  $scope.todos = [
    {text:'learn angular', done:true},
    {text:'build an angular app', done:false}];

  $scope.addTodo = function() {
    $scope.todos.push({text:$scope.todoText, done:false});
    $scope.todoText = '';
  };

  $scope.remaining = function() {
    var count = 0;
    angular.forEach($scope.todos, function(todo) {
      count += todo.done ? 0 : 1;
    });
    return count;
  };

  $scope.archive = function() {
    var oldTodos = $scope.todos;
    $scope.todos = [];
    angular.forEach(oldTodos, function(todo) {
      if (!todo.done) $scope.todos.push(todo);
    });
  };
}

In action, you can see the angularjs.org homepage . A number of examples are also presented there:
  • “The Basics” is a simple illustration of databinding.
  • “Add Some Control” is a todo-cabinet, the code of which I have given here.
  • “Wire up a Backend” is a simple application for creating / storing / editing records with routing and data storage in mongolab .
  • “Create Components” - creating reusable components.

More examples:
  • todo ( demo , code ) from todomvc - at the same time, you can compare it with other frameworks;
  • builtwith.angularjs.org : 18 (at the time of writing the post) applications, for most of which the source code is available;
  • AngularUI - various filters and directives (in many ways UI ones) from third-party developers.


AngularJS Concepts


Directives

Almost the entire declarative part of AngularJS is based on directives. They are used to enrich the HTML syntax. During the compilation of the DOM, directives are taken from HTML and executed. Directives may add some new behavior and / or modify the DOM. The standard package includes a fairly large number of directives for building web applications. But a key feature is the ability to develop their own directives, whereby HTML can be turned into DSL.

Directives are named using lowerCamelCase, for example, ngBind. When using directive must call in lowercase using as a separator of one of the special characters : , - or _ . Optionally, you can use the x- or prefixes to obtain valid code data- . Examples: ng:bind , ng-bind , ng_bind , x-ng-bind and data-ng-bind .

Directives can be used as element ( <my-directive></my-directive> ), attribute (), in class () or in comment (). It depends on how a particular directive was developed.

Read more about directives in the developer's guide .

Scopes

Scope is an object related to the model in the application. It is the execution context for expressions. Scopes are arranged in a hierarchical structure similar to the DOM. At the same time, they inherit properties from their parent scope.

Scopes are like glue between the controller and the view. During the execution of the template binding phase, the directives set the observation ( $watch ) for expressions within the scope. $watch gives directives the ability to respond to changes to display updated values ​​or any other actions. Both controllers and directives have a reference to scope, but do not have references to each other. So controllers are isolated from directives and from the DOM. Due to this, the ability to test the application increases.

Read more about scope in the developer's guide .

Services

Services are singleton s that perform a specific task that is common to all or to a specific web application. For example, the $ http service , which is a wrapper over XMLHttpRequest. A few examples of other services (see the documentation for a complete list ):
  • $ compile - compilation of an HTML string or part of the DOM into a template, linking the template to a specific scope;
  • $ cookies - provides read / write access to cookies.
  • $ location - work with the address bar
  • $ resource - a factory for creating resource objects intended for interaction with server (RESTful) data sources;


To use a service, you must specify it as a dependency for the controller, another service, directive, etc. AngularJS takes care of the rest - creating, resolving dependencies, etc.

Read more about services in the developer's guide .

Filters

Filters are designed to format data before displaying it to the user, as well as filtering items in collections. Examples of filters (a full list can be found in the documentation ): currency , date , orderBy , uppercase . Using filters is quite traditional:
More about filters in the developer's guide .

Modules

Applications in AngularJS do not have a main executable method. Instead, the module serves as a declarative description of how the application should be downloaded. Due to this, for example, when writing test scripts, you can load additional modules that will override some settings, thereby facilitating complex (end-to-end) testing.

Read more about the modules in the developer's guide .

Testing

As the developers write, they did a lot for testing in AngularJS, so nothing can excuse you if you do not test your application :)
An example of a test e2e script:
describe('Buzz Client', function() {
it('should filter results', function() {
  input('user').enter('jacksparrow');
  element(':button').click();
  expect(repeater('ul li').count()).toEqual(10);
  input('filterText').enter('Bees');
  expect(repeater('ul li').count()).toEqual(1);
});
});


Read more about unit testing and e2e testing in the developer's guide.

AngularJS Batarang


This is an extension for Chrome that makes debugging AngularJS applications easier. It allows you to work with the hierarchy of scopes, makes it possible to profile an application, visualizes dependencies between services, displays the contents of scopes on the page of elements, allows you to display and change values ​​in scope from the console. Good text description on the page on github . Good video on youtube .

What else to read