AngularJS

AngularJS - Simply known as Angular - is an open- source framework from Google, which supports the creation of browser- based single -page applications with a MVC model to simplify the software development and testing components corresponding applications.

Structure

Controller

In Angular a ViewModel is defined together with the logic in a controller. Controllers are then combined into a single module. The modules are integrated using an integrated dependency injection container. The view is connected to the ViewModel. Thereby a bi-directional data link between the view and the logic is made possible.

Directives

Angular allows your own HTML elements and attributes in the form of directives to define.

Predefined directives are recognized by the ng namespace in the prefix. The type of the prefix to be used is dependent on the Validator.

To select items from AngularJS jQuery Light ( jqLite ) is used, a reduced version of jQuery. If jQuery included in the HTML DOM, this will take jQuery Light used.

Double curly syntax interpolation

Angular also offers a double- curly syntax interpolation. This JavaScript expression in double curly braces. Here, however, no jump instructions are supported. Similar filter supports Unix filters | Instead, with the pipe operator.

Alternatively, ng -bind can be used. The < / span > command has the same result as { {name } } < / span >, but with the difference that the browser does not display anything before the corresponding data has been loaded.

Services

Services include business logic, and connect external resources - about REST web services - a. Services thus correspond to the model in the MVC model. Services are instantiated as a singleton.

To perform AJAX requests are in the $ AngularJS http object and the $ resource - object. Both internal access to the XMLHttpRequest object, and differ in the degree of abstraction. While $ http arbitrary HTTP requests can perform, $ resource specializes in REST services.

In addition, there are specialized services from third parties.

Communication

This controller can communicate with other controllers or services will be provided by $ scope or $ from $ rootScope object emitted and $ broadcast methods. This serves to emit $ to send messages to all parent scopes, while $ broadcast serves to send messages to child scopes.

In order for a controller or service can respond to a message, it must or it register for the message using the $ on method for the message type ( publish-subscribe method ).

Routes in single-page applications

In order to define routes in single-page application (SPA) is provided by the AngularJS ngRoute module. About this routes can be defined. The ngRoute module can dynamically reload views in an element with the ng -view directive.

However, a single -view ng directive per page, it is only possible to specify. Remedied UI router AngularUI project.

In addition, the $ location object allows direct processing of the browser URL to simulate a page navigation.

Hello world program

Below is a small hello world program is shown in AngularJS.

In Default.html:

           Hello World </ title>        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"> </ script>        <script type="text/javascript" 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> or easier, but not W3 - komform: </p> <p> <! DOCTYPE html> <html>     <head>        <title> Hello World </ title>        <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/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: </p> <p> ' use strict'; / / Define a module var hello world module = angular.module ( "hello world module", []);   / / Add a controller to the module helloWorldModule.controller ("Hello World Controller", function ($ scope) {     $ scope.name = "World"; }); Angulardart </p> <p> With Angulardart also a version for the programming language Dart is available. Angulardart closely follows AngularJS to, the additional possibilities of Darts as metadata types and classes should be used. </p> </section> <section> <h2>Pictures of AngularJS</h2> <div class="imagesHolder"> <a href="https://angularjs.org/img/AngularJS-large.png" target="_blank"> <img src="https://angularjs.org/img/AngularJS-large.png" title="AngularJS #" alt="AngularJS #" onerror="this.parentNode.removeChild(this);" /> </a> <a href="http://www.w3schools.com/angular/pic_angular.jpg" target="_blank"> <img src="http://www.w3schools.com/angular/pic_angular.jpg" title="AngularJS #" alt="AngularJS #" onerror="this.parentNode.removeChild(this);" /> </a> <a href="https://www.devbattles.com/images/upload/sand/2015-08/1438677279.jpg" target="_blank"> <img src="https://www.devbattles.com/images/upload/sand/2015-08/1438677279.jpg" title="AngularJS #" alt="AngularJS #" onerror="this.parentNode.removeChild(this);" /> </a> <a href="https://angular.io/resources/images/logos/angular2/shield-with-beta.png" target="_blank"> <img src="https://angular.io/resources/images/logos/angular2/shield-with-beta.png" title="AngularJS #" alt="AngularJS #" onerror="this.parentNode.removeChild(this);" /> </a> <a href="http://www.cheynewallace.com/wp-content/uploads/2013/12/AngularJS_Banner.jpg" target="_blank"> <img src="http://www.cheynewallace.com/wp-content/uploads/2013/12/AngularJS_Banner.jpg" title="AngularJS #" alt="AngularJS #" onerror="this.parentNode.removeChild(this);" /> </a> <a href="http://vojtajina.github.io/html5la/2012-05-30-boston/images/AngularShieldLogo.png" target="_blank"> <img src="http://vojtajina.github.io/html5la/2012-05-30-boston/images/AngularShieldLogo.png" title="AngularJS #" alt="AngularJS #" onerror="this.parentNode.removeChild(this);" /> </a> <a href="https://s3.amazonaws.com/media-p.slid.es/uploads/111197/images/1331659/angular-logo.svg" target="_blank"> <img src="https://s3.amazonaws.com/media-p.slid.es/uploads/111197/images/1331659/angular-logo.svg" title="AngularJS #" alt="AngularJS #" onerror="this.parentNode.removeChild(this);" /> </a> <a href="http://pascalprecht.github.io/slides/angularjs-insights/img/angularjs-logo.png" target="_blank"> <img src="http://pascalprecht.github.io/slides/angularjs-insights/img/angularjs-logo.png" title="AngularJS #" alt="AngularJS #" onerror="this.parentNode.removeChild(this);" /> </a> <a href="http://www.bacancytechnology.com/wp-content/uploads/2015/02/AngularJS-Flat-Icon-Vector.png" target="_blank"> <img src="http://www.bacancytechnology.com/wp-content/uploads/2015/02/AngularJS-Flat-Icon-Vector.png" title="AngularJS #" alt="AngularJS #" onerror="this.parentNode.removeChild(this);" /> </a> <a href="http://tutorialedge.net/uploads/articles/angularjs.png" target="_blank"> <img src="http://tutorialedge.net/uploads/articles/angularjs.png" title="AngularJS #" alt="AngularJS #" onerror="this.parentNode.removeChild(this);" /> </a> </div> </section> <section class="relLinks"> <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> <!-- memim 1 wide adaptive --> <ins class="adsbygoogle" style="display:block;clear:both;" data-ad-client="ca-pub-8545452838648870" data-ad-slot="6796476374" data-ad-format="auto"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> <a href="/software-maintainer.html">Software maintainer</a> <a href="/software-framework.html">Software framework</a> <a href="/unit-testing.html">Unit testing</a> <a href="/model-view-viewmodel.html">Model View ViewModel</a> <a href="/filter-software.html">Filter (software)</a> <a href="/representational-state-transfer.html">Representational State Transfer</a> <a href="/singleton-pattern.html">Singleton pattern</a> <a href="/backbone.js.html">Backbone.js</a> </section> <div class="comments"> </div> <section> <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> <ins class="adsbygoogle" style="display:block" data-ad-format="autorelaxed" data-ad-client="ca-pub-8545452838648870" data-ad-slot="9697283175"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </section> <span style="font-size:.5em">65287</span> <div class="share_buttons"> <div class="addthis_sharing_toolbox"></div> </div> </main> </div> </td></tr><tr><td id="footer"> <div class="aligner"> <footer class="mainHolder" style="text-align:center;"> <!--LiveInternet counter--><script type="text/javascript"><!-- document.write("<a href='http://www.liveinternet.ru/click' "+ "target=_blank rel=nofollow><img src='//counter.yadro.ru/hit?t18.5;r"+ escape(document.referrer)+((typeof(screen)=="undefined")?"": ";s"+screen.width+"*"+screen.height+"*"+(screen.colorDepth? screen.colorDepth:screen.pixelDepth))+";u"+escape(document.URL)+ ";"+Math.random()+ "' alt='' title='LiveInternet' "+ "border='0' width='88' height='31'><\/a>") //--></script><!--/LiveInternet--> <br /> memim.com 2024<br /> All rights reserved<br /> <span style='font-size:0.5em'>Page generated in 0.0021<br /></span> <script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#pubid=ra-5093bb6e1c1ddca0"></script> <script> function jr(ready){ if(window.jQuery){ //ready(); }else{ setTimeout(jr,100,ready); } } jr(function() { $(".imagesHolder img").each(function () { var i=$(this); console.log(i.attr('src')+' '+i.width()+' '+i.readyState); //$(this).remove(); }); }); </script> </footer> </div> </td></tr></table> <span style="font-size:.3em">de</span> </body> </html>