Angular

AngularJSJason

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

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 ExpressionDirective

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 a View 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 demoAppdepends 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 Directiveangular.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'];

Value VS. Service VS. Factory VS. 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_May2013.pdf

• AngularJS

• https://angularjs.org/

http://fastandfluid.com/publicdownloads/AngularJSIn60MinutesIsh_DanWahlin_May2013.pdf

https://angularjs.org/

Angular

Documents

Transcript of Angular