AngularJS Features and Directives

Agenda
• What is AngularJS
• AngularJS Features
• Directives、Filters and Data Binding
• Views、Controllers and Scope
• Modules and Factories

SPA
• Single Page Application
• In which we have a shell page and we can load multiple views into that.
• The Challenge with SPAs
• DOM Manipulation、Caching、Data Binding…etc.

AngularJS
• AngularJS is one core library.
• AngularJS is a structural framework for dynamic web apps
• AngularJS is a full-featured SPA framework

AngularJs
• Angular takes another approach.
• Data binding, as in {{}}.
• DOM control structures for repeating/hiding DOM fragments.
• Support for forms and form validation.
• Attaching code-behind to DOM elements.
• Grouping of HTML into reusable components.

Directives
• A directive is really a way to teach HTML new tricks.
• At a high level, directives are markers on a DOM element (such as an attribute,
element name, comment or CSS class) that tell AngularJS's HTML compiler ($compile)
to attach a specified behavior to that DOM element or even transform the DOM
element and its children.

Using Directives and DataBinding Syntax
<!DOCTYPE html>
<html ng-app>
<head>
<script src="angular.min.js"></script>
<title></title>
</head>
<body>
Name:<input type=“text” ng-model=“name” /> {{ name}}
<p ng-bind="name"></p>
</body>
</html>
Directive
Directive
Data Binding Expression
Directive

Matching Directives
• Any time you see ng- that is an Angular directive
• The normalization process is as follows:
• Strip 「x-」 and 「data-」 from the front of the element/attributes.
• Convert the「 :」 ,「 -」 , or「 _」 delimited name to camelCase.
• Example
• <input type="text" ng-model="name" />
• <input type="text" data-ng-model="name" />
• <input type="text" ng:model="name" />
• <input type="text" ng_model="name" />

Directives
• ng-app directive
• Use this directive to auto-bootstrap an AngularJS application.
• ng-bind directive
• The ngBind attribute tells Angular to replace the text content of the specified HTML
element with the value of a given expression, and to update the text content when the
value of that expression changes.
• ng-model directive
• The ngModel directive binds an input,select, textarea (or custom form control) to a
property on the scope using NgModelController, which is created and exposed by this
directive.

Angular Expressions
• Angular expressions are JavaScript-like code snippets that are usually
placed in bindings such as {{ expression }}.
• For example, these are valid expressions in Angular:
• 1+2
• a+b
• user.name
• Items[index]

Lterating with the ng-repeat Directive
<div data-ng-init="names=['John Smith', 'John Doe', 'Jane Doe']">
<ul>
<li data-ng-repeat="name in names">
{{name}}
</li>
</ul>
</div>

Using Filters
<input type="text" data-ng-model="nameText" />
<div data-ng-init="names=['John Smith', '1John Doe', 'Jane Doe']">
<ul>
<li data-ng-repeat="name in names | filter:nameText">
{{name | uppercase}}
</li>
</ul>
</div>

Understanding Angular Filters
{{ 99 * 99 | number}}
{{ 9999 + 1 | number:2 }}
{{ 99 * 99 | currency}}
{{ 99 * 99 | currency: 'NT$'}}
{{'Hello World' | uppercase}}
{{'Hello World' | lowercase}}
{{ 1393300831 | date: 'medium'}}
{{ 1393300831 | date: 'yyyy-MM-dd'}}
{{ obj | json}}

Understanding Angular Filters
• Format Conver Data Filter
• currency custom filter
• number limiTo
• date orderBy
• lowercase
• uppercase
• json

View, Controllers and Scope
View Controller$scope
$scope is the "glue"(ViewModel) between a controller and a view

Understanding Controllers
• In Angular, a Controller is a JavaScript constructor function that is used to
augment the Angular Scope
• When a Controller is attached to the DOM via the ng-controller directive, Angular
will instantiate a new Controller object, using the specified Controller's constructor
function.
• A new child scope will be available as an injectable parameter to the Controller's
constructor function as $scope.

Creating aView and Controller
<div class="container" data-ng-controller="SimpleController">
<h3>Adding a Simple Controller</h3>
<input type="text" data-ng-model="name" />
<ul>
<li data-ng-repeat="cust in customers">
{{ cust.name }} - {{ cust.city}}
</li>
</ul>
</div>
<script>
function SimpleController($scope)
{
$scope.customers = [
{name : 'Dave Jones', city:'Phoenix'},
{name : 'Jamie Riley', city:'Atlanta'},
{name : 'Heedy Wahlin', city:'Chandler'},
{name : 'Thomas Winter', city:'Seattle'},
];
}
</script>
So now we have two properties in the scope.The ng-model is going to add a property in the scope
called name, and we can actually get to that now in the controller by saying $scope.name
Access $scope
Basic controller

Create a Controller in a Module
Module that demoApp
depends on
var demoApp = angular.module('demoApp', []);
demoApp.controller('SimpleController', function($scope) {
$scope.customers = [
{name : 'Thomas Winter', city:'Seattle'}
];
});

Create a Controller in a Module
demoApp.controller('SimpleController', ['$scope', function(scope){
scope.customers = [
{name : 'Thomas Winter', city:'Seattle'}
];
}]);

Create Multi Controller in a Module
var controllers = {};
controllers.SimpleController = function($scope) {
……
};
controllers.SimpleController2 = function($scope) {
……
};
demoApp.controller(controllers);

The Role of Factories
var demoApp = angular.module('demoApp', [])
.factory('simpleFactory', function(){
var factory = {};
var customers = [………];
factory.getCustomers = function(){
return customers;
};
return factory;
}).controller('SimpleController', function($scope, simpleFactory)
{
$scope.customers = simpleFactory.getCustomers();
});
Factory injected into
controller at runtime

Create Custom Directive
angular.module('docsSimpleDirective', []).controller('Controller', function($scope) {
$scope.customer = {
name: 'Naomi',
address: '1600 Amphitheatre'
};
}).directive('myCustomer', function() {
return {
restrict: 'A',
template: 'Name: {{customer.name}} Address: {{customer.address}}'
};
});
<div ng-controller="Controller">
<div my-customer></div>
</div>

$inject
• If a function has an $inject property and its value is an array of strings, then
the strings represent names of services to be injected into the function.
var MyController = function(renamed$scope, renamedGreeter) {
...
}
MyController['$inject'] = ['$scope', 'greeter'];

ValueVS. ServiceVS. FactoryVS. Provider
• Value
• module.value('valueName', valueObj);
• Get value from valueObj
• Service
• module.service( 'serviceName', ServiceFunction );
• Get service from 'new ServiceFunction()'.
• Factory
• module.factory( 'factoryName', FactoryFunction );
• Get factory from the value that is returned by invoking the FactoryFunction.
• Provider
• module.provider( 'providerName', ProviderFunction);
• Get provider from new ProviderFunction().$get()

$watch
• $watch(watchExpression, listener, [objectEquality])
• Registers a listener callback to be executed whenever the watchExpression changes
• $watchCollection(watchExpression, listener)
• Shallow watches the properties of an object and fires whenever any of the properties
change

Reference
• AngularJS In 60 Minutes
• http://fastandfluid.com/publicdownloads/AngularJSIn60MinutesIsh_DanWahlin_May2
013.pdf
• AngularJS
• https://angularjs.org/

AngularJS Features and Directives

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Viewers also liked

Viewers also liked (19)

Similar to AngularJS Features and Directives

Similar to AngularJS Features and Directives (20)

More from LearningTech

More from LearningTech (20)

Recently uploaded

Recently uploaded (20)

AngularJS Features and Directives

Editor's Notes