Dive into AngularJS and directives
0 likes1,312 views
AngularJS is a JavaScript framework that uses MVC architecture and directives to extend HTML. Directives allow behaviors and transformations to DOM elements. Common directives include ng-app to define the root element, ng-controller for application logic, ng-model for two-way data binding, and ng-repeat for listing elements. AngularJS makes applications faster, more interactive and testable through features like data binding, dependency injection and reusable components.
![Applications, Modules, Controllers...
AngularJS modules define AngularJS application
var app = angular.module('myApplication', []);
AngularJS controllers control applications
app.controller('myController', function
($scope) {
$scope.title = "Harry Potter";
$scope.author = "J.K. Rowling";
});
Module - container of different parts of the application such as
controllers, services, filter etc.
Scope is the object that links Controller to the View. Controller
should initialize the scope with data that View needs to display.
Controllers are regular JavaScript object.](https://image.slidesharecdn.com/angularjsdirectives3-150408150426-conversion-gate01/85/Dive-into-AngularJS-and-directives-8-320.jpg)
![ng-app
● Defines the root element of an AngularJS
application
● Used for automatic initialization of the
application when the web page is loaded
● Typically placed in the root element of the page
e.g. <body>
● This directive can include the module that
defines the AngularJS application
<head>
<script>
var app = angular.module('myApplication', []);
</script>
</head>
<body ng-app="myApplication">
<div>
</div>
</body>](https://image.slidesharecdn.com/angularjsdirectives3-150408150426-conversion-gate01/85/Dive-into-AngularJS-and-directives-13-320.jpg)
![ng-controller
● Defines the application controller
● Key aspect to support the MVC pattern
● Controllers contains business logic to decorate
the scope with functions and attributes
● Can be defined in external files
<div ng-app="myApp" ng-controller="bookCTRL">
Title: <input type="text">{{ title }}<br>
Author: <input type="text">{{ author }}<br>
<br>
Full Name: {{fullName()}}
</div>
<script>
var app = angular.module('myApp', []);
app.controller('bookCtrl', function($scope) {
$scope.title = "John";
$scope.author = "Doe";
$scope.fullName = function() {
return $scope.title + " - " + $scope.author;
}
});
</script>](https://image.slidesharecdn.com/angularjsdirectives3-150408150426-conversion-gate01/85/Dive-into-AngularJS-and-directives-14-320.jpg)
![ng-init
● Alternative of using controllers
● Initializes an AngularJS Application data
● Not commonly used
● Use only when aliasing special properties of ng-
repeat
<div ng-app="" ng-init="books=[{title:'Harry Potter',author:'J.K. Rowling'},
{title:'Game of Thrones',author:'G. Margin'}]">
...
</div>](https://image.slidesharecdn.com/angularjsdirectives3-150408150426-conversion-gate01/85/Dive-into-AngularJS-and-directives-15-320.jpg)
![ng-repeat
● Repeats and HTML element for every item in
the collection
● Each element instance has its own scope and
the given loop variable is set to the current
collection item
<div ng-app="" ng-init="names=[
{name:'Jani',country:'Norway'},
{name:'Hege',country:'Sweden'},
{name:'Kai',country:'Denmark'}]">
<ul>
<li ng-repeat="x in names">
{{ x.name + ', ' + x.country }}
</li>
</ul>
</div>
Looping with objects:
● Jani, Norway
● Hege, Sweden
● Kai, Denmark
Examples from w3scools.
com](https://image.slidesharecdn.com/angularjsdirectives3-150408150426-conversion-gate01/85/Dive-into-AngularJS-and-directives-17-320.jpg)
Dive into AngularJS and directives
- 1. Tricode BV De Schutterij 12 -18 3905 PL Veenendaal The Netherlands tel: 0318 - 559210 www.tricode.nl [email protected] DIVE INTO ANGULAR JS AND DIRECTIVES Andrej Gasteovski 08.04.2015
- 2. Agenda • What is AngularJS? • Main concepts of AngularJS • Directives overview *
- 3. What is AngularJS? AngularJS in general and benefits of using it
- 4. What is AngularJS? “Superheroic JavaScript framework” - angularjs.org “Angular is what HTML would have been, had it been designed for applications.” - angularjs.org "AngularJS extends HTML with new attributes. AngularJS is perfect for Single Page Applications (SPAs). AngularJS is easy to learn.” - w3schools.com
- 5. Web app that fits on a single web page No need for reloading the whole page HTML page contains fragments that can be loaded in the background Extremely good for responsive sites Result: Faster, native and more interactive UI Examples: Voyager, Google Maps, Google Calendar, Facebook Groups... Why Single Page Application?
- 6. Other AngularJS features Complete client-side solution Implements client-side MVC pattern Uses dependency injection Implements two-way data binding No direct DOM manipulation, less code Unit testable Support for all major browsers Supported by Google Large and fast growing community Open source, completely free
- 7. Main concepts of AngularJS Overview of the core features in AngularJS such as data- binding, scope, controller, directives...
- 8. Applications, Modules, Controllers... AngularJS modules define AngularJS application var app = angular.module('myApplication', []); AngularJS controllers control applications app.controller('myController', function ($scope) { $scope.title = "Harry Potter"; $scope.author = "J.K. Rowling"; }); Module - container of different parts of the application such as controllers, services, filter etc. Scope is the object that links Controller to the View. Controller should initialize the scope with data that View needs to display. Controllers are regular JavaScript object.
- 9. Data binding in AngularJS Data binding - automatic synchronization of data between Model and View. AngularJS supports Two-Way Data Binding The template (HTML with additional resources) is compiled in the browser. This step produces a live view. Any change in the model is propagated to the view and any change in the view is reflected in the model. angularjs.org
- 10. Expressions Used to bind data to HTML Written inside double braces: {{ }} Can contain literals, operators and variables Similar to JavaScript expressions <div> <p>This is an expression: {{ 5 + 10 }}</p> </div> <div ng-app="" ng-init="quantity=1;cost=5"> <p> Total in dollar: {{ quantity * cost }} </p> </div> <div ng-app="" ng-init="firstName='John'; lastName='Doe'"> <p>The name is {{ firstName + " " + lastName }}</p> </div> <div ng-app="" ng-init="person={firstName:'John', lastName:'Doe'}"> <p>The name is {{ person.lastName }}</p> </div> *ng-init is a directive that defines initial values for an AngularJS application Examples from w3scools. com
- 11. Directives
- 12. What are directives? Attributes used to extend the standard HTML starting with the ng- prefix. The main purpose of Directives is to tell Angular to attach a specified behavior of a DOM element or even transform a DOM element and his children. Most used directives: ng-app, ng-init, ng-model, ng-repeat, ng-bind, ng-list, ng-value...
- 13. ng-app ● Defines the root element of an AngularJS application ● Used for automatic initialization of the application when the web page is loaded ● Typically placed in the root element of the page e.g. <body> ● This directive can include the module that defines the AngularJS application <head> <script> var app = angular.module('myApplication', []); </script> </head> <body ng-app="myApplication"> <div> </div> </body>
- 14. ng-controller ● Defines the application controller ● Key aspect to support the MVC pattern ● Controllers contains business logic to decorate the scope with functions and attributes ● Can be defined in external files <div ng-app="myApp" ng-controller="bookCTRL"> Title: <input type="text">{{ title }}<br> Author: <input type="text">{{ author }}<br> <br> Full Name: {{fullName()}} </div> <script> var app = angular.module('myApp', []); app.controller('bookCtrl', function($scope) { $scope.title = "John"; $scope.author = "Doe"; $scope.fullName = function() { return $scope.title + " - " + $scope.author; } }); </script>
- 15. ng-init ● Alternative of using controllers ● Initializes an AngularJS Application data ● Not commonly used ● Use only when aliasing special properties of ng- repeat <div ng-app="" ng-init="books=[{title:'Harry Potter',author:'J.K. Rowling'}, {title:'Game of Thrones',author:'G. Margin'}]"> ... </div>
- 16. ng-model ● Binds the value of an HTML controls to the application data ● Provide type validation for application data ● Provide CSS classes for HTML elements ● Bind HTML elements to HTML forms ● Keep the state of the HTML element <div ng-app="" ng-init="quantity=1;price=5"> Quantity: <input type="number” ng-model="quantity"> Costs: <input type="number" ng-model="price"> Total in dollar: {{ quantity * price }} </div>
- 17. ng-repeat ● Repeats and HTML element for every item in the collection ● Each element instance has its own scope and the given loop variable is set to the current collection item <div ng-app="" ng-init="names=[ {name:'Jani',country:'Norway'}, {name:'Hege',country:'Sweden'}, {name:'Kai',country:'Denmark'}]"> <ul> <li ng-repeat="x in names"> {{ x.name + ', ' + x.country }} </li> </ul> </div> Looping with objects: ● Jani, Norway ● Hege, Sweden ● Kai, Denmark Examples from w3scools. com
- 18. Summary AngularJS is a powerful JavaScript framework for client-side applications based on the standard MVC pattern. The most powerful part of Angular are its directives that allows extension of the standard HTML. Applications built with AngularJS are easy for testing, maintainable, contain reusable components and well architectured. More information about AngularJS: w3school AngularJS tutorial Official AngularJS API Docs Interactive tutorial about AngularJS