4. Heads Up
Starting from directives...
...adding controllers...
...and filters...
...using routing...
...manage resources...
...and fun :)
5. Directives
Directives are a way to teach HTML new tricks. During DOM
compilation directives are matched against the HTML and
executed. This allows directives to register behavior, or
transform the DOM.
<span ng-repeat="exp"></span>
<span class="ng-repeat: exp;"></span>
<ng-repeat></ng-repeat>
<!-- directive: ng-repeat exp -->
The directives can be placed in element names, attributes,
class names, as well as comments.
8. <!doctype html>
<html ng-app>
<head>
<script src="js/angular.min.js" ></script>
<script src="js/demo.js" ></script>
</head>
<body>
<ul ng-controller="getGdgList">
<li ng-repeat="gdg in gdgs">{ {gdg.name} } have { {gdg.members} } members
</ul>
</body>
</html>
9. GDG Milan have 92 members
GDG Barcelona have 228 members
GDG Silicon Valley have 171 members
GDG Stockholm have 119 members
GDG Herzeliya have 140 members
GDG Ahmedabad have 78 members
GDG Lagos have 115 members
GDG Bangalore have 109 members
GDG Lima have 175 members
GDG L-Ab have 77 members
15. Dependency Injection
(also know as Inversion of Control)
Dependency Injection (DI) is a software design pattern that
deals with how code gets hold of its dependencies.
16. Services
Angular services are singletons that carry out specific tasks.
Eg. $http service that provides low level access to the
browser's XMLHttpRequest object.
18. Injectors
// New injector created from the previus declared module.
var injector = angular.injector(['gdgModuleAlarm', 'ng']);
// Request any dependency from the injector
var a = injector.get('alarm');
// We can also force injecting using
var alarmFactory = function (my$window) {};
alarmFactory.$inject = ['$window'];
19. Filters
Filters perform data transformation.
They follow the spirit of UNIX filters and use similar syntax |
(pipe).
21. Sort
GDG MILAN have 92 members
GDG BARCELONA have 228 members
GDG SILICON VALLEY have 171 members
GDG STOCKHOLM have 119 members
GDG HERZELIYA have 140 members
GDG AHMEDABAD have 78 members
GDG LAGOS have 115 members
GDG BANGALORE have 109 members
GDG LIMA have 175 members
GDG L-AB have 77 members
22. Creating custom filters
angular.module('agaveeApp', [])
.filter('orderByVersion', function() {
return function(modules, version) {
var parseVersionString = function (str) { /* .. */ };
var vMinMet = function(vmin, vcurrent) { /* .. */ };
var result = [];
for (var i = 0; i < modules.length; i++) {
if (vMinMet(modules[i].version_added, version)) {
result[result.length] = modules[i];
}
}
return result;
};
});
23. Model
The model is the data which is merged
with the template to produce the view.
28. angular.module('resources.project', ['ngResource'])
.factory('Project', ['$http', 'gdg', function ($http, gdg) {
var Project = function (data) {
angular.extend(this, data);
};
// a static method to retrieve Project by ID
Project.get = function (id) {
return $http.get(gdg.url + '/projects/' + id).then(function (response) {
return new Project(response.data);
});
};
// an instance method to create a new Project
Project.prototype.create = function () {
var project = this;
return $http.post(gdg.url + '/projects.json', project).then(function (response)
project.id = response.data.id;
29. Testing
Karma - a test runner that fits all our needs.
Jasmine - Jasmine is a behavior-driven development
framework for testing JavaScript code.
30. describe('Controller: getGdgList', function () {
// load the controller's module
beforeEach(module('gdgApp'));
var getGdgList, scope;
// Initialize the controller and a mock scope
beforeEach(inject(function ($controller) {
scope = {};
getGdgList = $controller('getGdgList', {
$scope: scope
});
}));
it('GDG List must display defined number of items', function () {
expect(scope.gdgs.length).toBe(10);
});
