Geekly Articles each Day
⬆️ ⬇️

AngularJS - a framework for dynamic web applications from Google

AngularJS is created for those developers who believe that the declarative style is better suited for creating a UI, and imperative - for writing business logic.



Zen Angular







AngularJS is a comprehensive framework. In the standard package it provides the following options:



')

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







Examples



Simple todo-shka 

<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 on the main page of angularjs.org . There are also a number of examples:



More examples:





AngularJS concepts



Directives


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



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



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



Read more about directives in the developer’s guide .



Scopes


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



Scope s are like a “glue” between the controller and the view. During the execution of the template binding phase, the directives set an observation ( $watch ) for the expressions within the scope. $watch gives directives the ability to react to changes to display the updated value or some other action. Both controllers and directives have a reference to scope, but no reference to each other. So controllers are isolated from directives and from DOM. Due to this, the possibilities for testing the application increase.



Learn more about scope in the developer’s guide .



Services


Services are singletones that perform a specific task that is common to all or a particular web application. For example, a $ http service that wraps XMLHttpRequest. Some examples of other services (see the complete list in the documentation ):





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



Read more about the services in the developer’s guide .



Filters


Filters are designed to format data before displaying it to the user, as well as filter items in collections. Examples of filters (a complete list can be found in the documentation ): currency , date , orderBy , uppercase . Using filters is quite traditional: {{ expression | filter1 | filter2 }} {{ expression | filter1 | filter2 }}



Learn 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 loaded. Due to this, for example, when writing test scripts, additional modules can be loaded, which will override some settings, thus facilitating end-to-end testing.



Learn more about the modules in the developer’s guide .



Testing


As the developers write, for testing they did a lot in AngularJS, so nothing can excuse you if you don’t test your application :)



Sample 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); }); });




Learn more about unit testing and e2e testing in the developer’s guide.



Angularjs batarang



This is an extension for Chrome that makes it easy to debug AngularJS applications. Allows you to work with the hierarchy of the scope-s, allows you to profile the application, visualizes the dependencies between services, displays the contents of the scope-s on the item page, allows you to display and change values ​​in the scope from the console. A good text description on a page in github . Good youtube video.



What else to read



Source: https://habr.com/ru/post/149060/

More articles:



All Articles