Angular

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/

Angular

More Related Content

What's hot (20)

Viewers also liked (19)

Similar to Angular (20)

More from LearningTech (20)

Angular

Editor's Notes