This document provides an introduction to HTML enhanced for web apps using AngularJS. It discusses key AngularJS concepts like templates (directives), controllers, dependency injection, services, filters, models, configuration, routing, resources and testing. Directives allow HTML to be extended with new attributes and elements. Controllers contain business logic. Dependency injection provides dependencies to controllers and services. Filters transform displayed data. Models represent application data. Configuration sets up modules. Routing maps URLs to templates. Resources interact with RESTful APIs. Testing ensures code works as expected.
Presentation made for Google Developer Day Vietnam. It is an quick and advanced overview of AngularJS modern JavaScript MVC framework. Learn some of the main features as well as other concepts around Angular.JS like SEO, Tooling, Best Practices.
Presentation made for Google Developer Day Vietnam. It is an quick and advanced overview of AngularJS modern JavaScript MVC framework. Learn some of the main features as well as other concepts around Angular.JS like SEO, Tooling, Best Practices.
A presentation made for the NG-CONF Israel that took place in jun 2014 at Google TLV Campus (http://ng-conf.gdg.co.il/)
its an overview of how to use ngRoute and UI-Router in your app this slideshow contain a link for a working demo
Upgrading from Angular 1.x to Angular 2.xEyal Vardi
Having an existing Angular 1 application doesn't mean that we can't begin enjoying everything Angular 2 has to offer. That's because Angular 2 comes with built-in tools for migrating Angular 1 projects over to the Angular 2 platform.
In this meetup Eyal Vardi will talk about Angular 2.0 architecture. The session will focus on the main parts of Angular 2.0:
Application Bootstrap
Angular Compiler
Hierarchical Injector
Component Lifecycle Hooks
Change Detector
Renderer
Dynamic component creation
Each part will be explained and analyzed. In some cases we will dive into Angular 2.0 source code. Our purpose is to list the Do's & Don’ts of Angular.
The session is mostly targeted for developers which already have some experience with Angular 2.0.
A presentation made for the NG-CONF Israel that took place in jun 2014 at Google TLV Campus (http://ng-conf.gdg.co.il/)
its an overview of how to use ngRoute and UI-Router in your app this slideshow contain a link for a working demo
Upgrading from Angular 1.x to Angular 2.xEyal Vardi
Having an existing Angular 1 application doesn't mean that we can't begin enjoying everything Angular 2 has to offer. That's because Angular 2 comes with built-in tools for migrating Angular 1 projects over to the Angular 2 platform.
In this meetup Eyal Vardi will talk about Angular 2.0 architecture. The session will focus on the main parts of Angular 2.0:
Application Bootstrap
Angular Compiler
Hierarchical Injector
Component Lifecycle Hooks
Change Detector
Renderer
Dynamic component creation
Each part will be explained and analyzed. In some cases we will dive into Angular 2.0 source code. Our purpose is to list the Do's & Don’ts of Angular.
The session is mostly targeted for developers which already have some experience with Angular 2.0.
A complete crash course with 7 pratical labs, to have a head start developing single page applications with Angular. It also contains advanced topics, like Transclusion, Directive to directive communication and UI Router.
High Quality presentation: https://goo.gl/3OwQXf
Download Labs: https://goo.gl/cVI6De
Chicago Coder Conference 2015
Speaker Biography: Wei Ru
Wei Ru has over 15 years of professional experience in design and development of Java enterprise applications across multiple industries. Currently he works as a technical architect at STA Group, LLC. He received a M.S. degree in Computer Science from Loyola University Chicago. As a software developer with an emphasis on Java, he strongly believes in software re-usability, open standards, and various best practices. He has successfully delivered many products using open source platforms and frameworks during his IT consultancies.
Speaker Biography: Vincent Lau
Vincent Lau has been Senior Architect at STA Group in Chicago for the last two years. He received a B.S. degree in Accounting and Finance from the University of Illinois at Chicago and worked on M.S. of Computer Science at DePaul University. He has over 15 years of software design, development, testing and project management experience on large enterprise distributed computing platforms. Most recently, he has worked on web based applications using Java, Spring, JavaScript, Angular.js, jQuery and web services. He previously had Senior Software Engineer and Lead positions in Royal Caribbean Cruises, Wells Fargo Bank, Cap Gemini America and Trans Union Corp.
Presentation: Practical AngularJS
AngularJS has been seen gaining momentum recently. Whether you want to develop a modern single-page application or to spice up only the view enabled by a traditional MVC web framework, AngularJS allows you to write cleaner, shorter code. AngularJS’ two-way data binding feature allows a declarative approach on views and controllers, and ultimately code modulization. With this strategic change and many features offered by AngularJS, learning AngularJS can be challenging. In this session, we will share some of the experiences we had in Angular UI development, we will cover:
AngularJS modules and common project setup
Communicating to a Restful service
Commonly used Angular functions, directives
UI Bootstrap, grid views and forms in AngularJS
Custom Angular directives
Asynchronous functions and event processing
This talk represents the combined experience from several web development teams who have been using Symfony2 since months already to create high profile production applications. The aim is to give the audience real world advice on how to best leverage Symfony2, the current rough spots and how to work around them. Aside from covering how to implement functionality in Symfony2, this talk will also cover topics such as how to best integrate 3rd party bundles and where to find them as well as how to deploy the code and integrate into the entire server setup.
AngularJS 101 - Everything you need to know to get startedStéphane Bégaudeau
In this presentation, you will find everything need to get started with AngularJS.
For more details, have a look at my blog (http://stephanebegaudeau.tumblr.com) or follow me on twitter (@sbegaudeau)
Opencast Admin UI - Introduction to developing using AngularJSbuttyx
This presentation is intended to help developers anticipating using and potentially extending the new Admin UI get a hands-on introduction into the Angular JS portion of the software. It has been presented in the form of a workshop and therefore the last slides (starting with the 22) could seem a bit abstract.
AngularJs Superheroic JavaScript MVW Framework Services by Miracle StudiosLearnimtactics
AngularJs is next big thing. Have a read for making strong your skills in AngularJs. We are sharing with you basic model of angularjs, How it is work and what are his basics. Enjoy the information.
09 - express nodes on the right angle - vitaliy basyuk - it event 2013 (5)Igor Bronovskyy
09 - Express Nodes on the right Angle - Vitaliy Basyuk - IT Event 2013 (5)
60 вузлів під правильним кутом - миттєва розробка програмних додатків використовуючи Node.js + Express + MongoDB + AngularJS.
Коли ми беремось за новий продукт, передусім ми думаємо про пристрасть, яка необхідна йому, щоб зробити користувача задоволеним і відданим нашому баченню. А що допомагає нам здобути прихильність користувачів? Очевидно, що окрім самої ідеї, також важлими будуть: зручний користувацький інтерфейс, взаємодія в реальному часі та прозора робота з даними. Ці три властивості ми можемо здобути використовучи ті чи інші засоби, проте, коли все лиш починається, набагато зручніше, якщо інструменти допомагають втілити бажане, а не відволікають від головної мети.
Ми розглянемо процес розробки, використовуючи Node.js, Express, MongoDB та AngularJS як найбільш корисного поєднання для отримання вагомої переваги вже на старті вашого продукту.
Віталій Басюк
http://itevent.if.ua/lecture/express-nodes-right-angle-rapid-application-development-using-nodejs-express-mongodb-angular
AngularJS training - Day 1 - Basics: Why, What and basic features of AngularJSmurtazahaveliwala
First part of AngularJS Training.
Covers details of AngularJs community and answers
- Why AngularJS ?
- What is AngularJS ?
- Getting started
- Basic Application layout and anatomies
- Data-binding, Existing Directives, Filters, Controllers
- Hosting on local (NodeJS) HTTPServer
Code samples available at
https://github.com/murtazahaveliwala/technext-angularjs-demo/tree/master/demos/static/angular-apps
Con la versione 7 di Drupal è stato introdotto il concetto di Entity, poi evoluto con la versione 8, utilizzato come base di buona parte degli elementi core (nodi, tassonomie, utenti, ...), ma - soprattutto - è stata data la possibilità di costruire entity custom. L'utilizzo di queste apre le possibilità di personalizzazione dello strumento ad un livello superiore velocizzando notevolmente lo sviluppo.
Verranno mostrate le potenzialità nell'uso delle Entity custom e le integrazioni possibili.
Se chiedete ad uno sviluppatore backend "Scrivi codice senza test?" la risposta non può che essere, ovviamente NO! Quando rifacciamo la stessa domanda ad uno sviluppatore frontend, questa risposta cambia.. testare il frontend, sopratutto l'aspetto grafico viene considerato troppo difficile o poco utile.
Vedremo rapidamente come sfatare questo mito con poco sforzo, rendendo la vita dei poveri frontend-dev più piacevole.
Come possiamo rendere la user interaction delle nostre web application ottimale? Perfezionando tutto quello che riguarda l'interazione che il client ha con le risorse disponibili in remoto. Vedremo quali sono i principali aspetti da prendere in considerazione, le ottimizzazioni attuabili e come queste possono essere messe in atto sfruttando ciò che i principali cloud providers ci mettono a disposizione, ma sopratutto i principali limiti di queste soluzioni ed i workaround che possiamo mettere in atto per ovviarvi.
In tutti i progetti, indipendentemente dallo strumento e dalla dimensione dello stesso, un fattore fondamentale è l'organizzazione e la gestione del processo di realizzazione ed il mantenimento successivo.
In questa sessione ci focalizzeremo su come approcciare la gestione di un progetto basato su Drupal, partendo dalla fase di analisi e definizione delle specifiche iniziali, per poi passare alla gestione delle attività e la loro consequenzialità nella fase di sviluppo.
Verranno illustrati alcuni degli strumenti che possono essere utilizzati e come questi possono aiutare nel raggiungere l'obiettivo nei tempi e modalità previste.
Introduzione alle tecnologie client & server side che possono essere utilizzate epr la realizzazione di applicazioni mobile crossplatform usando HTML5 e Javascript
Ormai tutti i browser mettono a disposizione strumenti per l'interfacciamento tramite plugin scritti sempre più spesso usando le classiche tecnologie web, quali Javascript e HTML.
In questa sessione verrà effettuata una prima presentazione della struttura di un plugin per Google Chrome e le funzionalità a cui è possibile accedere attraverso questo; verranno poi analizzate alcune funzioni specifiche fornite dalle API, infine vedremo la procedura di pubblicazione dell'applicazione
2. <!-- DIRECTIVE: NG-MAVIMO -->
{ { name } }-> Marco Vito Moscaritolo
{ { role } }-> Developer
{ { company | link } }->
{ { twitter | link } }->
Agavee
@mavimo
3. HEADS UP
Starting from template...
...adding controllers...
...and filters...
...using routing...
...manage resources...
...and fun :)
4. 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>
<!-- directive: ng-repeat exp -->
8. 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. SERVICES
Angular services are singletons that carry out specific tasks.
Eg. $http service that provides low level access to the
browser's XMLHttpRequest object.
17. 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'];
18. FILTERS
Filters perform data transformation.
They follow the spirit of UNIX filters and use similar syntax |
(pipe).
20. 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
21. 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;
};
});
22. MODEL
The model is the data which is merged
with the template to produce the view.
27. 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;
});
};
28. TESTING
Karma - a test runner that fits all our needs.
Jasmine - Jasmine is a behavior-driven development
framework for testing JavaScript code.
29. 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();