TAZIO MIRANDOLA Web Applications Developer

• http://angular-ui.github.io/bootstrap/
• http://angular-ui.github.io/

To jQuery, your web page is a DOM to be manipulated. To AngularJS, your HTML is code to be compiled.

AngularJS reads in your whole web page and literally compiles ng- directives it into a new web page using it's built in compiler. AngularJS is treating your HTML as code(a DSL). A designer with no coding skill can read your AngularJS template and understand what it is doing. In AngularJS, meaning lives in the model, the HTML is for display only.

In jQuery, the idea is to use imperative aproach to maipulate the DOM and use DOM as a database.

offers:

• DOM manipulation using jqLite (or jQuery if loaded)
• Routing
• Publisher/subscriber pattern using $broadcast, $emit and $on
• Dependency loading/injection and Mocking (for testing purposes)
• Asynchronous HTTP calls using XHR with $http and promises ($q)
• Integration with RESTful webservices using $resource

Data binding

where the model updates when the view is changed and vice versa. This methodology requires that no further DOM manipulations are present.

• in AngularJS: you listen do data changes
• in jQuery: we respond to events and then update content. Something like:

problema: altre interazioni eliminano/modificano i dati.

AngularJS:

// log is the Model
$http( '/myEndpoint.json' ).then( function ( response ) {
    $scope.log.push( { msg: 'Data Received!' } );
});

<ul class="messages">
    <li ng-repeat="entry in log">{{ entry.msg }}</li>
</ul>

the data binding is two-way. So those log messages could also be editable in the view just by doing this:

<input ng-model="entry.msg" />

directives: Plugins vs. Directives

Widgets (eg. Dojo dijit) are manipulating the DOM to initiate the widgets. To make these widgets work with AngularJS you will have to wrap them inside small components called AngularJS directives.

In AngularJS, a directive is a function which returns a JSON object. This object tells AngularJS what DOM elements to look for, and what changes to make to them. Directives are hooked in to the template using either attributes or elements, which you invent. The idea is to extend the capabilities of HTML with new attributes and elements.

For example, if you want a carousel on your page, you might define an unordered list of figures, perhaps wrapped in a nav element, you then write some jQuery to find the list on the page and restyle it as a gallery with timeouts to do the sliding animation.

If you want a carousel, just use a element, then define a directive to pull in a template, and make that sucker work.

collections of directives:

• IgniteUI