19
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
| Date post: | 16-Jul-2015 |
| Category: |
Technology |
| Upload: | tricode |
| View: | 396 times |
| Download: | 1 times |
Tricode BVDe Schutterij 12 -18
3905 PL VeenendaalThe Netherlands
tel: 0318 - 559210 [email protected]
DIVE INTO ANGULAR JS
AND DIRECTIVES
Andrej Gasteovski
08.04.2015
Agenda
• What is AngularJS?
• Main concepts of AngularJS
• Directives overview
*
What is AngularJS?AngularJS in general and benefits of using it
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
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?
Other AngularJS features
Complete client-side solutionImplements client-side MVC patternUses dependency injectionImplements two-way data bindingNo direct DOM manipulation, less codeUnit testableSupport for all major browsersSupported by GoogleLarge and fast growing communityOpen source, completely free
Main concepts of AngularJS
Overview of the core features in AngularJS such as data-binding, scope, controller, directives...
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.
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
Expressions
Used to bind data to HTMLWritten inside double braces: {{ }}Can contain literals, operators and variablesSimilar 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
Directives
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...
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>
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>
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>
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>
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
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 tutorialOfficial AngularJS API DocsInteractive tutorial about AngularJS
Follow us:tricode.nlfacebook.com/tricodelinkedin.com/company/tricodeslideshare.net/tricodetwitter.com/tricode
![AngularJS Projects, Forms and Servicesiproduct.org/wp-content/uploads/2016/07/AngularJS... · AngularJS and TypeScript SPA Development Sources: AngularJS [ ], ... Designing front-end](https://static.documents.pub/doc/80x56/5ee35669ad6a402d666d455f/angularjs-projects-forms-and-angularjs-and-typescript-spa-development-sources.jpg)
