Introduction to angular js

INTRODUCTION TO
HTML enhanced for web apps!
by /Marco Vito Moscaritolo @mavimo

{ { name } }-> Marco Vito Moscaritolo
{ { role } }-> Developer
{ { company | link } }->
{ { twitter | link } }->
Agavee
@mavimo

HEADS UP
Starting from template...
...adding controllers...
...and filters...
...using routing...
...manage resources...
...and fun :)

TEMPLATES (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.
The directives can be placed in element names, attributes,
class names, as well as comments.
<span ng-repeat="exp"></span>
<span class="ng-repeat: exp;"></span>
<ng-repeat></ng-repeat>

<!doctype html>
<html ng-app>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.6/angula
</head>
<body>
<div>
<input type="text" ng-model="sample" placeholder="Enter text">
<hr>
<h1>!</h1>
</div>
</body>
</html>

<!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"> have members</li>
</ul>
</body>
</html>

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

AND ALSO
ng-show
ng-switch
ng-class
...

CONTROLLERS
<!doctype html>
<html ng-app>
<head>
</head>
<body>
<ul ng-controller="getTweets">
<li ng-repeat="tweet in tweets"></li>
</ul>
</body>
</html>

METHODS IN CONTROLLER
function getTweets($scope, $http) {
// ...
$scope.getMore = function () {
// ...
}
// ...
return $scope;
}]);
<ul ng-controller="getTweets">
<li ng-repeat="tweet in tweets"></li>
<li ng-click="getMore()">Get more</li>
</ul>

CONTROLLER IN MODULE
var gdgApp = angular.module('gdgApp', []);
gdgApp.controller('getTweets', ['$scope', '$http', function($scope, $http) {
var search = 'gdg';
var url = 'http://search.twitter.com/search.json?q=' + search;
$http({ method: 'GET', url: url }).
success(function(data, status, headers, config) {
$scope.tweets = data.results;
}).
error(function(data, status, headers, config) {
console.log('Error: fetch tweets');
$scope.tweets = {};
});
return $scope;
}]);

DEPENDENCY INJECTION
Dependency Injection (DI) is a software design pattern that
deals with how code gets hold of its dependencies.

SERVICES
Angular services are singletons that carry out specific tasks.
Eg. $http service that provides low level access to the
browser's XMLHttpRequest object.

gdgApp.controller('getTweets', ['$scope', '$http', function($scope, $http) {
// ...
return $scope;
}]);
angular.module('gdgModuleAlarm', []).
factory('alarm', function($window) {
return {
alarm: function(text) {
$window.alert(text);
}
};
}
);

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'];

FILTERS
Filters perform data transformation.
They follow the spirit of UNIX filters and use similar syntax |
(pipe).

<!doctype html>
<html ng-app>
<head>
</head>
<body>
<a href="" ng-click="predicate = 'members'; reverse=!reverse"<Sort</a>
<ul ng-controller="getGdgList">
<li ng-repeat="gdg in gdgs | orderBy:predicate:reverse "> have members
</ul>
</body>
</html>

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
Sort

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;
};
});

MODEL
The model is the data which is merged
with the template to produce the view.

CONFIGURATION
angular.module('gdgApp', [])
.constant('gdg', {
'url' : 'http://localhost:3000',
'token': 'e9adf82fd1cb716548ef1d4621a5935dcf869817'
})
// Configure $http
.config(['$httpProvider', 'gdg',
function ($httpProvider, gdg) {
$httpProvider.defaults.headers.common['X-gdg-API-Key'] = gdg.token;
}
]);

ROUTING
angular.module('gdgApp', [])
// Configure services
.config(['$routeProvider', function ($routeProvider) {
$routeProvider.when('/projects', {
templateUrl: 'views/projects.html',
controller: 'ProjectsCtrl'
});
$routeProvider.when('/projects/:project', {
templateUrl: 'views/project.html',
controller: 'ProjectCtrl'
});
$routeProvider.otherwise({redirectTo: '/projects'});
}]);

RESOURCE
angular.module('resources.project', ['ngResource'])
.factory('Project', ['$http', '$resource', 'gdg', function ($http, gdg) {
return $resource(gdg.url + '/project/:projectId', {projectId:'@id'}, {
query : { method : 'GET', isArray:true},
create : { method : 'POST' },
save : { method : 'PUT' },
delete : { method : 'DELETE' }
});
}]);
// ...
var p = new Project();
p.name = 'GDG Milan';
p.$save();

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 (r
project.id = response.data.id;
return project;
});
};
// an instance method to pudate create a new Project
Project.prototype.update = function () {
var project = this;
return $http.put(gdg.url + '/projects/' + project.id + '.json', project
return project;
});
};

TESTING
Karma - a test runner that fits all our needs.
Jasmine - Jasmine is a behavior-driven development
framework for testing JavaScript code.

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);
});
it('GDG item must have members up to 0', function () {
angular.forEach(scope.gdgs,function (key, gdg) {
expect(gdg.members).toBeGreaterThan(0);
}
});
it('GDG item must have name and members', function () {
angular.forEach(scope.gdgs,function (key, gdg) {
expect(gdg.name).toBeDefined();
expect(gdg.members).toBeDefined();

THE END
MARCO VITO MOSCARITOLO / @MAVIMO

Introduction to angular js

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Was ist angesagt?

Was ist angesagt? (20)

Ähnlich wie Introduction to angular js

Ähnlich wie Introduction to angular js (20)

Mehr von Marco Vito Moscaritolo

Mehr von Marco Vito Moscaritolo (9)

Introduction to angular js