AngularJS
| AngularJS
|
|
|---|---|
|
|
| Basic data
|
|
| Maintainer | Google Inc. |
| developer | Google Inc., online community |
| Publishing year | October 20, 2010 |
| Current version |
1.8.0 ( June 4, 2020 ) |
| programming language | TypeScript , JavaScript |
| category | Framework |
| License | MIT license |
| German speaking | No |
| www.angularjs.org | |
AngularJS (to distinguish from the successor Angular (version 2 and above) also AngularJS 1 or Angular one called) is a client-side JavaScript - web framework to create single-page Web applications for a Model-View-ViewModel pattern. The software development and component testing can be thus simplified. It is as open source - Framework from the US company Google Inc. developed.
In September 2016, the greatly improved, not backwards-compatible version Angular 2 was released. The term AngularJS is now used restricted to version 1, Angular without addition only for the higher versions.
concept
The philosophy of AngularJS is based on the assumption that declarative programming (in HTML ) should be used to design user interfaces and to connect software components with each other, while imperative programming (in JavaScript in the form of AngularJS) should be used for the implementation of program logic.
The structure of AngularJS is loosely based on the MVC pattern, in particular the MVVM pattern, according to which software is divided into models (data models), views (user interface) and view models (for changing the user interface after interaction with the data).
AngularJS extends the vocabulary of HTML with new tags and parameters, the directives , from which functionality is generated at runtime. This is done via so-called data bindings , through which individual elements of a web application are linked to a data record. If the user interacts with the application, the data records can be changed or displayed differently, for example by sorting a table according to a different criterion. In this way, functionality can be generated without resorting to DOM manipulation via jQuery or similar libraries .
The data models used are not defined in AngularJS itself, but adopted as they are. In particular, there is no client-side entity management, as in other single-page frameworks.
AngularJS applications are divided into different modules:
- Templates define the structure of the user interface .
- Controllers contain the program logic.
- Scopes manage the data that a program block can access.
- Filters sort the data dynamically according to specified criteria.
- Providers provide additional functionalities (usually including interaction with a backend ).
These modules are brought together by the so-called dependency injection container when the application is called by bootstrapping to form a loosely coupled program which consists of reusable subcomponents. This creates maintainable software in the sense of ISO / IEC 25010 . From a technical point of view, such an application is an event loop that intercepts, evaluates and gff. Updates in the presentation initiated. Non-changeable data can be bound once using a one- time binding and excluded from further updates.
A supplied mocking module allows standard functionalities, such as the component for executing HTTP requests, to be replaced by mock-ups and thus to implement isolated test cases without actually sending requests or changing data. This enables the individual modules to be tested in isolation.
structure
Controller
In AngularJS a client-side model (a ViewModel according to the Model-View-ViewModel pattern) is defined together with the logic in a controller. The controllers are then combined into a module. The modules are integrated into the application with the help of an integrated dependency injection container. The view is connected to the model. This data binding is bidirectional, which means that user inputs affect the model, but programmatic changes to the model also affect the user view.
Directives
AngularJS allows you to create custom HTML elements and attributes, so-called directives.
Predefined directives can be recognized by the ng namespace in the prefix. The type of prefix to be used depends on the validator .
| Validator | example |
|---|---|
| none |
ng-repeat="item in items"
|
| XML |
ng:repeat="item in items"
|
| HTML5 |
data-ng-repeat="item in items"
|
| xHTML |
x-ng-repeat="item in items"
|
To select elements, AngularJS uses a built-in jQuery Lite (jqLite) . This is a reduced version of jQuery , in which only the most important functionalities are integrated. If jQuery is integrated into the HTML DOM , it is used instead of jQuery Lite.
interpolation
With the help of double curly braces ( double-curly syntax ) JavaScript expressions can be embedded in the HTML code. However, no jump instructions are supported here. The pipe operator |can be used to add filters that affect the displayed result.
Alternatively can also be ng-bindused. The <span ng-bind="name"></span>and commands <span>{{name}}</span>both cause the value of the variable to namebe displayed. However ng-bind, with prevents the browser from displaying the template the first time it is loaded, if AngularJS did not load the data quickly enough and thus replace the template.
Services
Services contain the business logic and integrate external resources - such as REST web services. Services are instantiated as a singleton .
Services can be programmed in-house or taken over by third-party providers. The AngularJS framework already provides numerous services (recognizable by the $ prefix). These include, for example, $httpand $resource, which are used to carry out Ajax requests. Both access the XMLHttpRequest object internally and differ in their degree of abstraction. While it $httpcan carry out any HTTP requests, it $resourcespecializes in REST services.
Communication between scopes
Each controller has its own $scopeobject, which encapsulates the functions and data belonging to the controller . So that controllers can communicate with other controllers or services, the $scope- or the - $rootScopeobject $emitand - $broadcastmethods are made available. It is used $emitto send messages to all higher-level scopes, while $broadcastit is used to send messages to lower-level scopes.
In order for a controller or a service to be able to react to a message, it must register for the message using the $onmethod for the message type ( publish-subscribe method ).
Routes in single-page applications
In single-page applications, routes are used to define the assignment of URLs to specific views. AngularJS provides the ngRoutemodule for this purpose . This allows different views (HTML fragments) to be dynamically ng-viewloaded into an element with the directive within the global HTML template .
You can only ng-viewspecify a single directive per page. The alternative UI router of the AngularUI project, whose range of functions is much larger, as well as the module Angular Route Segment , which is lighter and only expands the interface of the existing AngularJS router, provides a remedy .
The $locationobject allows the browser URL to be processed directly, so that page navigation can be simulated.
Hello world program
The following shows a hello world program in AngularJS:
In Default.html:
<!DOCTYPE html>
<html>
<head>
<title>Hello World!</title>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.16/angular.min.js"></script>
<script src="controller.js"></script>
</head>
<body>
<div ng-app="helloWorldModule">
<div ng-controller="HelloWorldController">
Name: <input type="text" ng-model="name" required>
<hr>
<div>Hello {{name}}!</div>
</div>
</div>
</body>
</html>
In controller.js:
'use strict';
// definieren eines Moduls
var helloWorldModule = angular.module("helloWorldModule", []);
// hinzufügen eines Controllers zum Modul
helloWorldModule.controller("HelloWorldController", function ($scope) {
$scope.name = "World";
});
Angulard species
With Angulardart, a version for the Dart programming language is available. Angulardart is closely based on AngularJS, whereby the additional possibilities of Dart such as metadata, types and classes are used.
See also
JavaScript libraries
JavaScript MV * frameworks
literature
- Philipp Tarasiewicz, Robin Böhm: AngularJS: A practical introduction to the JavaScript framework . 1st edition. dpunkt.verlag, 2014, ISBN 978-3-86490-154-6 , p. 354 .
- Brad Green, Shyam Seshadri: AngularJS . 1st edition. O'Reilly Media, 2013, ISBN 978-1-4493-4485-6 , pp. 180 (English).
Web links
Individual evidence
- ↑ Release 1.8.0 . June 4, 2020 (accessed June 4, 2020).
- ^ AngularJS is No More - The Future of TypeScript and Angular 2?
- ↑ Golo Roden: Web applications with AngularJS. Heise Online, September 13, 2013, accessed on September 2, 2019 .
- ↑ API Reference / ngMock. In: angularjs.org. Retrieved September 2, 2019 .
- ↑ ngRoute. In: AngularJS Developer Documentation. Retrieved October 2, 2013 .
- ↑ ngView. In: AngularJS Developer Documentation. Retrieved October 2, 2013 .
- ^ AngularUI for AngularJS. Retrieved August 27, 2014 .
- ↑ UI router - JsWiki.de, the German wiki about JavaScript. (No longer available online.) Archived from the original on April 2, 2015 ; accessed on March 19, 2015 . Info: The archive link was inserted automatically and has not yet been checked. Please check the original and archive link according to the instructions and then remove this notice.
- ↑ Golo Roden: Nested views with AngularJS. In: Heise Developer. Verlag Heinz Heise , May 6, 2013, accessed on October 2, 2013 .
- ↑ angular-route-segment.com. Retrieved March 19, 2015 .
- ↑ Angular Route Segment - JsWiki.de, the German Wiki about JavaScript. (No longer available online.) Archived from the original on April 2, 2015 ; accessed on March 19, 2015 . Info: The archive link was inserted automatically and has not yet been checked. Please check the original and archive link according to the instructions and then remove this notice.
- ↑ Using $ location. In: AngularJS Developer Documentation. Retrieved October 2, 2013 .
- ↑ AngularDart - Superheroic WMD Framework for Darts
- ↑ ANGULARDART - AngularJS ported to darts . golem.de, November 6, 2013.
