2. Agenda
• What is AngularJS
• AngularJS Features
• Directives、Filters and Data Binding
• Views、Controllers and Scope
• Modules and Factories
3. 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.
4. AngularJS
• AngularJS is one core library.
• AngularJS is a structural framework for dynamic web apps
• AngularJS is a full-featured SPA framework
6. 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.
7. 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.
9. 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" />
10. 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.
11. 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]
12. 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>
15. Understanding Angular Filters
• Format Conver Data Filter
• currency custom filter
• number limiTo
• date orderBy
• lowercase
• uppercase
• json
16. View, Controllers and Scope
View $scope Controller
$scope is the "glue"(ViewModel) between a controller and a view
17. 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.
18. 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>
Access $scope
<script>
Basic controller
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
19. Create a Controller in a Module
Module that demoApp
depends on
var demoApp = angular.module('demoApp', []);
demoApp.controller('SimpleController', function($scope) {
$scope.customers = [
{name : 'Dave Jones', city:'Phoenix'},
{name : 'Jamie Riley', city:'Atlanta'},
{name : 'Heedy Wahlin', city:'Chandler'},
{name : 'Thomas Winter', city:'Seattle'}
];
});
20. Create a Controller in a Module
var demoApp = angular.module('demoApp', []);
demoApp.controller('SimpleController', ['$scope', function(scope){
scope.customers = [
{name : 'Dave Jones', city:'Phoenix'},
{name : 'Jamie Riley', city:'Atlanta'},
{name : 'Heedy Wahlin', city:'Chandler'},
{name : 'Thomas Winter', city:'Seattle'}
];
}]);
21. Create Multi Controller in a Module
var demoApp = angular.module('demoApp', []);
var controllers = {};
controllers.SimpleController = function($scope) {
……
};
controllers.SimpleController2 = function($scope) {
……
};
demoApp.controller(controllers);
22. 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
24. $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'];
25. 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 fromnew ProviderFunction().$get()
26. $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
