Workshop: EmberJS - In Depth
- Ember Data - Adapters & Serializers
- Routing and Navigation
- Templates
- Services
- Components
- Integration with 3rd party libraries
Presentado por ingenieros: Mario García y Marc Torrent
Workshop Isomorphic Web Apps with ReactJS:
- Universal web apps - Isomorphic
- Server Side Rendering (SSR) with ReactJS
- Server Side Rendering with Redux
- Server Side Rendering with React Router
- Server Side Rendering: server.js - Main Entry Point
- Server Side Rendering: server.js - HTML Template
- Client main entry point: client.js
- Webpack bundles
- Avoiding FOUC - Webpack ExtractTextPlugin
- Webpack code splitting
- React Router - Configuration with Plain Routes
- React Router - Dynamic Routing & WebPack
- Dynamic Routing with new Reducers
- Combining new Reducers - ReducerRegistry
- Data fetching before rendering
- React Router + Redux + Redial: Server Side
- React Router + Redux + Redial: provideHooks
- React Router + Redux + Redial: Client Side
- SEO friendly universal web apps - React-Helmet
- React-Helmet - Server Side Rendering
Presentado por ingeniero: Marc Torrent
Workshop: EmberJS - In Depth
- Ember Data - Adapters & Serializers
- Routing and Navigation
- Templates
- Services
- Components
- Integration with 3rd party libraries
Presentado por ingenieros: Mario García y Marc Torrent
Workshop Isomorphic Web Apps with ReactJS:
- Universal web apps - Isomorphic
- Server Side Rendering (SSR) with ReactJS
- Server Side Rendering with Redux
- Server Side Rendering with React Router
- Server Side Rendering: server.js - Main Entry Point
- Server Side Rendering: server.js - HTML Template
- Client main entry point: client.js
- Webpack bundles
- Avoiding FOUC - Webpack ExtractTextPlugin
- Webpack code splitting
- React Router - Configuration with Plain Routes
- React Router - Dynamic Routing & WebPack
- Dynamic Routing with new Reducers
- Combining new Reducers - ReducerRegistry
- Data fetching before rendering
- React Router + Redux + Redial: Server Side
- React Router + Redux + Redial: provideHooks
- React Router + Redux + Redial: Client Side
- SEO friendly universal web apps - React-Helmet
- React-Helmet - Server Side Rendering
Presentado por ingeniero: Marc Torrent
Building scalable applications with angular jsAndrew Alpert
AngularJS today is one of the most powerful, user-friendly and popular JS frameworks to work on web applications. Surprisingly, one of the main weaknesses of this framework is poorly structured documentation and the lack of ready-made solutions. In this report, we will try to work out the best approach to the organization of large and very large applications. We will also speak about the tools that will be useful at every stage of the application development and tools and practicesthat will help you to work in the continuous delivery mode.
Workshop Apps with ReactNative I:
- What is React Native?
- Native Components
- Asynchronous execution
- Debugging
- Live Reload/Hot reload
- Flexbox and styling
- It’s just a JS framework!
- Native Components
- Native APIs
- Native modules
- Some Thoughts on Production Development
Presentado por ingeniero Jordi Serra
How Angular2 Can Improve Your AngularJS Apps Today!Nir Kaufman
Are you ready to migrate your Angular1 project to Angular2? through this slides you will discover some tips that can make your current application better and ready for future migration. A link for reference project can be found inside.
An introduction to the AngularJS JavaScript MVC framework from Google. Tailored for Java developers. Presented at the Orange County Java Users Group on 10/09/2014
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
Workshop Apps with ReactNative III:
- React Native short Recap
- The Native Side
- Building Native Modules (iOS & Android)
- Building Native Components (iOS & Android)
Presentado por ingenieros Alberto Irurueta y Enrique Oriol
Workshop Apps with ReactNative II:
- React Native short Recap
- Navigation in React Native Apps
- Tabs & Other Architectural Components
- Lists & Other Presentational Components
- OpenSource Important Components
Presentado por ingenieros Raúl Delgado y Marc Torrent
«От экспериментов с инфраструктурой до внедрения в продакшен»FDConf
В процессе разработки инструментов для инфраструктурных нужд получилось изучить технологии, которые легли в основу нового стека фронтенд разработки для мобильной версии «Одноклассников».
В результате удалось решить следующие задачи:
— улучшение качества продукта за счёт юнит тестирования и методологии TDD;
— снижение порога входа для новых фронтенд разработчиков;
— автоматизация процессов разработки, сборки и тестирования.
В докладе рассматривается использование следующих технологий: karma, jasmine, webpack, bower и gulp.
For years i wanted a robust solution to organize code:
Eliminate messy code
Organize structure
Set strict rules for apps
Write simple tests that cover exactly what i need
Write Less, Think Less - Do More
I just wanted a simple hands-on philosophy in my code.
Then came NgRx/store.
This is an intro to ngrx/store and its echo-system with a usecase of Echoes Player (ng2) open source player developed with angular 2 and ngrx/store.
A presentation made for the AngularJS-IL meetup group that took place in oct 2014 at Google TLV Campus (http://www.meetup.com/AngularJS-IL/events/207559572/)
its an overview of how to use services in your app. this slideshow contain a link for a reference code on github.
(link in the last slide)
An introduction to the complex single page web application framework known as AngularJs. An attempt to overview the high-level aspects of the framework, and to supply references for further exploration.
Universal JavaScript Web Applications with React - Luciano Mammino - Codemoti...Codemotion
Since we started to see JS on the server side, the dream of developers has been to reduce the gap and the cost of switch between frontend/backend. Today with Node.js, React and a whole ecosystem of tools, this dream is becoming true! In this talk I am going to discuss about Universal (a.k.a. Isomorphic) JS and present some practical example regarding the major patterns related to routing, data retrieval and rendering. I will use Node, React, Webpack, Babel and React Router and give you a series of example to get you started easily with this new technology trend.
Building scalable applications with angular jsAndrew Alpert
AngularJS today is one of the most powerful, user-friendly and popular JS frameworks to work on web applications. Surprisingly, one of the main weaknesses of this framework is poorly structured documentation and the lack of ready-made solutions. In this report, we will try to work out the best approach to the organization of large and very large applications. We will also speak about the tools that will be useful at every stage of the application development and tools and practicesthat will help you to work in the continuous delivery mode.
Workshop Apps with ReactNative I:
- What is React Native?
- Native Components
- Asynchronous execution
- Debugging
- Live Reload/Hot reload
- Flexbox and styling
- It’s just a JS framework!
- Native Components
- Native APIs
- Native modules
- Some Thoughts on Production Development
Presentado por ingeniero Jordi Serra
How Angular2 Can Improve Your AngularJS Apps Today!Nir Kaufman
Are you ready to migrate your Angular1 project to Angular2? through this slides you will discover some tips that can make your current application better and ready for future migration. A link for reference project can be found inside.
An introduction to the AngularJS JavaScript MVC framework from Google. Tailored for Java developers. Presented at the Orange County Java Users Group on 10/09/2014
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
Workshop Apps with ReactNative III:
- React Native short Recap
- The Native Side
- Building Native Modules (iOS & Android)
- Building Native Components (iOS & Android)
Presentado por ingenieros Alberto Irurueta y Enrique Oriol
Workshop Apps with ReactNative II:
- React Native short Recap
- Navigation in React Native Apps
- Tabs & Other Architectural Components
- Lists & Other Presentational Components
- OpenSource Important Components
Presentado por ingenieros Raúl Delgado y Marc Torrent
«От экспериментов с инфраструктурой до внедрения в продакшен»FDConf
В процессе разработки инструментов для инфраструктурных нужд получилось изучить технологии, которые легли в основу нового стека фронтенд разработки для мобильной версии «Одноклассников».
В результате удалось решить следующие задачи:
— улучшение качества продукта за счёт юнит тестирования и методологии TDD;
— снижение порога входа для новых фронтенд разработчиков;
— автоматизация процессов разработки, сборки и тестирования.
В докладе рассматривается использование следующих технологий: karma, jasmine, webpack, bower и gulp.
For years i wanted a robust solution to organize code:
Eliminate messy code
Organize structure
Set strict rules for apps
Write simple tests that cover exactly what i need
Write Less, Think Less - Do More
I just wanted a simple hands-on philosophy in my code.
Then came NgRx/store.
This is an intro to ngrx/store and its echo-system with a usecase of Echoes Player (ng2) open source player developed with angular 2 and ngrx/store.
A presentation made for the AngularJS-IL meetup group that took place in oct 2014 at Google TLV Campus (http://www.meetup.com/AngularJS-IL/events/207559572/)
its an overview of how to use services in your app. this slideshow contain a link for a reference code on github.
(link in the last slide)
An introduction to the complex single page web application framework known as AngularJs. An attempt to overview the high-level aspects of the framework, and to supply references for further exploration.
Universal JavaScript Web Applications with React - Luciano Mammino - Codemoti...Codemotion
Since we started to see JS on the server side, the dream of developers has been to reduce the gap and the cost of switch between frontend/backend. Today with Node.js, React and a whole ecosystem of tools, this dream is becoming true! In this talk I am going to discuss about Universal (a.k.a. Isomorphic) JS and present some practical example regarding the major patterns related to routing, data retrieval and rendering. I will use Node, React, Webpack, Babel and React Router and give you a series of example to get you started easily with this new technology trend.
Slide del corso di AngularJs Intermediate tenuto da LinkMe. Si affronteranno argomenti come l’estensione dell’html tramite direttive, la gestione di chiamate a un server API, crud e non solo, gestione di errori del server, validazione di form e alcuni principi del testing automatico.
What is AngularJS
AngularJS main components
View / Controller / Module / Scope
Scope Inheritance.
Two way data binding
$watch / $digest / $apply
Dirty Checking
DI - Dependence Injection
$provider vs $factory vs $service
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
Introduction to Angular JS by SolTech's Technical Architect, Carlos Muentes.
To learn more about SolTech's custom software and recruiting solution services, visit http://www.soltech.net.
This is a presentation that was presented at Tech Next meetup group (http://www.meetup.com/TechNext/events/168164922/), to introduce the audience to AngularJs (http://angularjs.org/).
It covers major ideas that AngularJS thrives on - data-binding, directives, services, dependency-injections, form validations, overall application architecture, Angular's view of MVC etc.
The content was prepared with the recent experience I gained which working for a short stint on a project earlier and is as per best of my knowledge.
We Will learn about:
What is AngularJs?
Key Points
Core Features of AngularJS
How is it works?
AngularJs Terminologies
AngularJs directives
How we start work on AngularJs?
AngularJs Tags
How we use Yeoman?
Advantages and Disadvantages
Introduction to AngularJS
مقدمة عن AngularJS
Follow us on Egyptian NodeJs Community on google+
https://plus.google.com/u/0/communities/110403046378899425503
AngularJS 1.3 is by far the best version of Angular available today. It was just released a few weeks ago. It's chock full of bug fixes, feature enhancements and performance improvements.
YouTube link: - https://youtu.be/bghVyCbxj6g
http://www.visual-engin.com/blog/testing-protocolos-y-extensiones-ios-workshop/
Workshop Testing, protocolos y extensiones:
- Objetivos
- Requisitios
- Protocols
- Configurar proyecto en xcode
- Tests unitarios
- Integración continua
- Material de interés
Presentado por ingenieros Alberto Irurueta y Alejandro García
Workshop fundamentos de Swift:
- Language Basics
- Playgrounds
- Variables
- Functions
- Optionals
- Control Flow
Presentado por nuestros ingenieros Alberto Irurueta y Pia Muñoz.
Workshop JavaScript Testing. Frameworks. Client vs Server Testing. Jasmine. Chai. Nock. Sinon. Spec Runners: Karma. TDD. Code coverage. Building a testable JS app.
Presentado por ing: Raúl Delgado y Mario García
Experience our free, in-depth three-part Tendenci Platform Corporate Membership Management workshop series! In Session 1 on May 14th, 2024, we began with an Introduction and Setup, mastering the configuration of your Corporate Membership Module settings to establish membership types, applications, and more. Then, on May 16th, 2024, in Session 2, we focused on binding individual members to a Corporate Membership and Corporate Reps, teaching you how to add individual members and assign Corporate Representatives to manage dues, renewals, and associated members. Finally, on May 28th, 2024, in Session 3, we covered questions and concerns, addressing any queries or issues you may have.
For more Tendenci AMS events, check out www.tendenci.com/events
Developing Distributed High-performance Computing Capabilities of an Open Sci...Globus
COVID-19 had an unprecedented impact on scientific collaboration. The pandemic and its broad response from the scientific community has forged new relationships among public health practitioners, mathematical modelers, and scientific computing specialists, while revealing critical gaps in exploiting advanced computing systems to support urgent decision making. Informed by our team’s work in applying high-performance computing in support of public health decision makers during the COVID-19 pandemic, we present how Globus technologies are enabling the development of an open science platform for robust epidemic analysis, with the goal of collaborative, secure, distributed, on-demand, and fast time-to-solution analyses to support public health.
Innovating Inference - Remote Triggering of Large Language Models on HPC Clus...Globus
Large Language Models (LLMs) are currently the center of attention in the tech world, particularly for their potential to advance research. In this presentation, we'll explore a straightforward and effective method for quickly initiating inference runs on supercomputers using the vLLM tool with Globus Compute, specifically on the Polaris system at ALCF. We'll begin by briefly discussing the popularity and applications of LLMs in various fields. Following this, we will introduce the vLLM tool, and explain how it integrates with Globus Compute to efficiently manage LLM operations on Polaris. Attendees will learn the practical aspects of setting up and remotely triggering LLMs from local machines, focusing on ease of use and efficiency. This talk is ideal for researchers and practitioners looking to leverage the power of LLMs in their work, offering a clear guide to harnessing supercomputing resources for quick and effective LLM inference.
Designing for Privacy in Amazon Web ServicesKrzysztofKkol1
Data privacy is one of the most critical issues that businesses face. This presentation shares insights on the principles and best practices for ensuring the resilience and security of your workload.
Drawing on a real-life project from the HR industry, the various challenges will be demonstrated: data protection, self-healing, business continuity, security, and transparency of data processing. This systematized approach allowed to create a secure AWS cloud infrastructure that not only met strict compliance rules but also exceeded the client's expectations.
SOCRadar Research Team: Latest Activities of IntelBrokerSOCRadar
The European Union Agency for Law Enforcement Cooperation (Europol) has suffered an alleged data breach after a notorious threat actor claimed to have exfiltrated data from its systems. Infamous data leaker IntelBroker posted on the even more infamous BreachForums hacking forum, saying that Europol suffered a data breach this month.
The alleged breach affected Europol agencies CCSE, EC3, Europol Platform for Experts, Law Enforcement Forum, and SIRIUS. Infiltration of these entities can disrupt ongoing investigations and compromise sensitive intelligence shared among international law enforcement agencies.
However, this is neither the first nor the last activity of IntekBroker. We have compiled for you what happened in the last few days. To track such hacker activities on dark web sources like hacker forums, private Telegram channels, and other hidden platforms where cyber threats often originate, you can check SOCRadar’s Dark Web News.
Stay Informed on Threat Actors’ Activity on the Dark Web with SOCRadar!
Accelerate Enterprise Software Engineering with PlatformlessWSO2
Key takeaways:
Challenges of building platforms and the benefits of platformless.
Key principles of platformless, including API-first, cloud-native middleware, platform engineering, and developer experience.
How Choreo enables the platformless experience.
How key concepts like application architecture, domain-driven design, zero trust, and cell-based architecture are inherently a part of Choreo.
Demo of an end-to-end app built and deployed on Choreo.
Climate Science Flows: Enabling Petabyte-Scale Climate Analysis with the Eart...Globus
The Earth System Grid Federation (ESGF) is a global network of data servers that archives and distributes the planet’s largest collection of Earth system model output for thousands of climate and environmental scientists worldwide. Many of these petabyte-scale data archives are located in proximity to large high-performance computing (HPC) or cloud computing resources, but the primary workflow for data users consists of transferring data, and applying computations on a different system. As a part of the ESGF 2.0 US project (funded by the United States Department of Energy Office of Science), we developed pre-defined data workflows, which can be run on-demand, capable of applying many data reduction and data analysis to the large ESGF data archives, transferring only the resultant analysis (ex. visualizations, smaller data files). In this talk, we will showcase a few of these workflows, highlighting how Globus Flows can be used for petabyte-scale climate analysis.
Multiple Your Crypto Portfolio with the Innovative Features of Advanced Crypt...Hivelance Technology
Cryptocurrency trading bots are computer programs designed to automate buying, selling, and managing cryptocurrency transactions. These bots utilize advanced algorithms and machine learning techniques to analyze market data, identify trading opportunities, and execute trades on behalf of their users. By automating the decision-making process, crypto trading bots can react to market changes faster than human traders
Hivelance, a leading provider of cryptocurrency trading bot development services, stands out as the premier choice for crypto traders and developers. Hivelance boasts a team of seasoned cryptocurrency experts and software engineers who deeply understand the crypto market and the latest trends in automated trading, Hivelance leverages the latest technologies and tools in the industry, including advanced AI and machine learning algorithms, to create highly efficient and adaptable crypto trading bots
Paketo Buildpacks : la meilleure façon de construire des images OCI? DevopsDa...Anthony Dahanne
Les Buildpacks existent depuis plus de 10 ans ! D’abord, ils étaient utilisés pour détecter et construire une application avant de la déployer sur certains PaaS. Ensuite, nous avons pu créer des images Docker (OCI) avec leur dernière génération, les Cloud Native Buildpacks (CNCF en incubation). Sont-ils une bonne alternative au Dockerfile ? Que sont les buildpacks Paketo ? Quelles communautés les soutiennent et comment ?
Venez le découvrir lors de cette session ignite
How Recreation Management Software Can Streamline Your Operations.pptxwottaspaceseo
Recreation management software streamlines operations by automating key tasks such as scheduling, registration, and payment processing, reducing manual workload and errors. It provides centralized management of facilities, classes, and events, ensuring efficient resource allocation and facility usage. The software offers user-friendly online portals for easy access to bookings and program information, enhancing customer experience. Real-time reporting and data analytics deliver insights into attendance and preferences, aiding in strategic decision-making. Additionally, effective communication tools keep participants and staff informed with timely updates. Overall, recreation management software enhances efficiency, improves service delivery, and boosts customer satisfaction.
How Does XfilesPro Ensure Security While Sharing Documents in Salesforce?XfilesPro
Worried about document security while sharing them in Salesforce? Fret no more! Here are the top-notch security standards XfilesPro upholds to ensure strong security for your Salesforce documents while sharing with internal or external people.
To learn more, read the blog: https://www.xfilespro.com/how-does-xfilespro-make-document-sharing-secure-and-seamless-in-salesforce/
Modern design is crucial in today's digital environment, and this is especially true for SharePoint intranets. The design of these digital hubs is critical to user engagement and productivity enhancement. They are the cornerstone of internal collaboration and interaction within enterprises.
In 2015, I used to write extensions for Joomla, WordPress, phpBB3, etc and I ...Juraj Vysvader
In 2015, I used to write extensions for Joomla, WordPress, phpBB3, etc and I didn't get rich from it but it did have 63K downloads (powered possible tens of thousands of websites).
Understanding Globus Data Transfers with NetSageGlobus
NetSage is an open privacy-aware network measurement, analysis, and visualization service designed to help end-users visualize and reason about large data transfers. NetSage traditionally has used a combination of passive measurements, including SNMP and flow data, as well as active measurements, mainly perfSONAR, to provide longitudinal network performance data visualization. It has been deployed by dozens of networks world wide, and is supported domestically by the Engagement and Performance Operations Center (EPOC), NSF #2328479. We have recently expanded the NetSage data sources to include logs for Globus data transfers, following the same privacy-preserving approach as for Flow data. Using the logs for the Texas Advanced Computing Center (TACC) as an example, this talk will walk through several different example use cases that NetSage can answer, including: Who is using Globus to share data with my institution, and what kind of performance are they able to achieve? How many transfers has Globus supported for us? Which sites are we sharing the most data with, and how is that changing over time? How is my site using Globus to move data internally, and what kind of performance do we see for those transfers? What percentage of data transfers at my institution used Globus, and how did the overall data transfer performance compare to the Globus users?
Software Engineering, Software Consulting, Tech Lead.
Spring Boot, Spring Cloud, Spring Core, Spring JDBC, Spring Security,
Spring Transaction, Spring MVC,
Log4j, REST/SOAP WEB-SERVICES.
Globus Compute wth IRI Workflows - GlobusWorld 2024Globus
As part of the DOE Integrated Research Infrastructure (IRI) program, NERSC at Lawrence Berkeley National Lab and ALCF at Argonne National Lab are working closely with General Atomics on accelerating the computing requirements of the DIII-D experiment. As part of the work the team is investigating ways to speedup the time to solution for many different parts of the DIII-D workflow including how they run jobs on HPC systems. One of these routes is looking at Globus Compute as a way to replace the current method for managing tasks and we describe a brief proof of concept showing how Globus Compute could help to schedule jobs and be a tool to connect compute at different facilities.
How to Position Your Globus Data Portal for Success Ten Good PracticesGlobus
Science gateways allow science and engineering communities to access shared data, software, computing services, and instruments. Science gateways have gained a lot of traction in the last twenty years, as evidenced by projects such as the Science Gateways Community Institute (SGCI) and the Center of Excellence on Science Gateways (SGX3) in the US, The Australian Research Data Commons (ARDC) and its platforms in Australia, and the projects around Virtual Research Environments in Europe. A few mature frameworks have evolved with their different strengths and foci and have been taken up by a larger community such as the Globus Data Portal, Hubzero, Tapis, and Galaxy. However, even when gateways are built on successful frameworks, they continue to face the challenges of ongoing maintenance costs and how to meet the ever-expanding needs of the community they serve with enhanced features. It is not uncommon that gateways with compelling use cases are nonetheless unable to get past the prototype phase and become a full production service, or if they do, they don't survive more than a couple of years. While there is no guaranteed pathway to success, it seems likely that for any gateway there is a need for a strong community and/or solid funding streams to create and sustain its success. With over twenty years of examples to draw from, this presentation goes into detail for ten factors common to successful and enduring gateways that effectively serve as best practices for any new or developing gateway.
1. Front End Workshops
XII. AngularJS - Part 3
Juan Luís Marí
jlmari@visual-engin.com
Pablo Balduz
pbalduz@visual-engin.com
Héctor Canto
hcanto@visual-engin.com
6. Scope functions
Watch, apply and digest are $scope functions used to monitor and process
binded data in terms of the digest cycle.
There are used very scarcely but it is good to know in order to understand bad
updates, performance issues and digest loop errors.
http://tutorials.jenkov.com/angularjs/watch-digest-apply.html
7. Scope functions - watch
Data binding creates ‘watchers’ internally. Every digest cycle will check
watched variables for changes and react accordingly.
Variables are watched implicitly when we use double curly brackets:
{{myVar}}
and explicitly:
$scope.watch(‘myVar’, function(){...});
As 1st parameter we can call a function, also.
The 2nd function is called a ‘listener’.
http://tutorials.jenkov.com/angularjs/watch-digest-apply.html
8. Scope functions - apply
Through the digest cycle, watched variables will be monitored.
But sometimes we don’t have a variable to watch and we are waiting for an
async event.
Some directives and services already use apply for us internally.
● ng-click
● $timeout
● $http
and explicitly:
http://jimhoskins.com/2012/12/17/angularjs-and-apply.html
9. Scope functions - apply
function Ctrl($scope) {
$scope.message = "Waiting 2000ms for update";
setTimeout(function () {
$scope.$apply(function () {
$scope.message = "Timeout called!";
});
}, 2000);
}
Note: Instead, you could use $timeout.
10. Scope functions - apply
When to use apply:
● Very rarely ( or better NEVER ). Two well-know cases:
○ dealing with sockets
○ wrapping non-Angular code
○ when you know a variable is initialized outside the digest cycle
How to use apply:
● with a function preferably:
$scope.apply( function() {});
● Tip: Use $timeout without delay (but it will be defered).
http://stackoverflow.com/questions/23070822/angular-scope-apply-vs-timeout-as-a-safe-apply
11. Scope functions - digest
$scope.digest triggers a digest cycle, but we should never call it directly.
● digest is triggered internally
● after the execution of $scope.apply, at the end of its execution
We use apply (and therefore digest) when we don’t have a variable to watch
and we are waiting for an async event.
http://jimhoskins.com/2012/12/17/angularjs-and-apply.html
13. Known patterns
Angular is already build as a collection of patterns
● Services are singletons.
● Factories are factories.
● Data-binding and $scope.watch implements a watcher pattern.
● Controller and Template.
● Dependency injections: everywhere.
http://blog.mgechev.com/2014/05/08/angularjs-in-patterns-part-1-overview-of-angularjs/
14. Observer (publish-subscribe)
Observers are similar to watchers, but instead of permanently watch a fuction
they subscribe to events.
To subscribe:
$scope.on(‘event-name’, function handler() {
//your code here
}
And to launch the event:
function ExampleCtrl($scope) {
$scope.$emit('event-name', { foo: 'bar' }); //upwards on the scope hierarchy
$scope.$broadcast('event-name', { foo: 'bar' }); //downwards to all child
$rootScope.$broadcast('event-name', { foo: 'bar' }); //to everybody
}
http://blog.mgechev.com/2014/07/05/angularjs-in-patterns-part-3/
15. Event listener (View observer)
Multiple build-in directives are event listeners:
● ng-click, ng-dbl-click
● ng-mouse…
● ng-keydown, ng-keyup
● ng-change
You can add your own event listeners. Let see an example:
http://tutorials.jenkov.com/angularjs/events.html
16. Event listener example
angular.module('myApp', [])
.directive('myDirective', function myDirective () {
return {
restrict: 'AE',
link: myDirectiveLink
} });
function myDirectiveLink (scope, element, attrs) {
var domElement = element[0]; // Get the native JS element
domElement.addEventListener("dragstart", myEventListener, false); // You can use ngDraggable but it uses jQuery
}
function myEventListener () {
// Handle event here
}
17. Other patterns
Proxy
● a service using $http or $resource (Restful http) internally.
Data Mapper
● a service returning Model instances calling $http or $resource.
19. AngularJS takes well care of testing:
● Well supported by Karma (test runner)
● Can use Mocha, Sinon, Chai ...
● Protractor and ngMock specially build for testing Angular.
● KEY: inject dependencies and mock key elements
Testing in AngularJS
https://www.smashingmagazine.com/2014/10/introduction-to-unit-testing-in-angularjs/
https://quickleft.com/blog/angularjs-unit-testing-for-real-though/
20. E2E framework based on Jasmine and Selenium’s WebDriver
Ability to simulate user interaction
Simulation in selenium and most browsers
Usually, we will run tests in Selenium (without UI) and all target browsers.
We can automate this with Gulp
Protractor
21. Provides several services to mock Angular behaviour:
● $timeout,
● $controller : inject controllers
● $httpBackend: patch or mock $http calls
● module() and inject():
○ resolve dependencies on tests
○ patch methods
○ mock scope
ngMock
http://www.bradoncode.com/blog/2015/05/27/ngmock-fundamentals-angularjs-testing-inject/
22. Unit Testing
● Testing individual, small units of code → Need of isolated code
○ Note: Bad isolated code may force the app to create related pieces as server’s
requests or new DOM elements → Affect other tests and produce errors
● Solutions: Dependency Injection and Mocking Services
○ DOM elements abstracted → never directly modified
○ XHR requests and petitions → simulated (by dependency injection of $httpBackend)
■ All we really need is to verify whether a certain request has been sent or not, or
alternatively just let the application make requests, respond with pre-trained
responses and assert that the end result is what we expect it to be.
23. Dependency Injection
● AngularJS built-in. Allows to pass in a
component's dependencies and stub or mock
them as you wish.
● Does not modify any global variable, so it does
not affect other tests
angular.module('app', [])
.controller(ExampleCtrl, function ExampleCtrl($scope) {
...
});
describe('ExampleCtrl tests', function() {
beforeEach(module('app'));
var $controller;
beforeEach(inject(function(_$controller_){
// The injector unwraps the underscores (_) from around the
parameter names when matching
$controller = _$controller_;
}));
describe('block to be tested', function() {
it('test1', function() {
// create a scope object for us to use.
var $scope = {};
// now run that scope through the controller function, injecting any
services or other injectables we need.
// **NOTE**: this is the only time the controller function will be
run, so anything that occurs inside of that will already be done before
the first spec.
var controller = $controller('ExampleController', { $scope: $scope
}); }; }); });
24. $httpBackend
● angular-mocks module allows to inject and mock the AngularJS services, so they can be extended
and used synchronously → $httpBackend is one of them
● Service in module ngMock
● Fake HTTP backend implementation suitable for unit testing applications that use the $http service.
● Allows not using external dependencies, so the requests to URLs are mocked.
● With dependency injection, it is easy to inject $httpBackend mock and use it to verify the requests
and respond with some testing data without sending a request to a real server.
● $httpBackend.flush() allows to flush pending requests, so the test will run synchronous but
preserving the async of the backend API
26. There are 3 types of functions, by order of execution:
○ compile, controller and link
● Compile happens once, before the template is compiled.
● The rest of functions is run once for each time the directive is used
■ For example in a ng-repeat of 4 elements, 4 loops
○ Controller initialize the scope.
○ Link happens when the linking is being made, by default after.
○ We can divide link into two, pre-link and post-link
■ Pre-link happens before the element is linked to the scope
■ Post-link happens just after, when the element affected is on the DOM.
● This is the most usual and potentially safest
Custom directives: functions
http://www.undefinednull.com/2014/07/07/practical-guide-to-prelink-postlink-and-controller-methods-of-angular-directives/
27. compile: function CompilingFunction($templateElement, $templateAttributes) {
…}
link: function LinkingFunction($scope, $element, $attributes) { ... }
…}
link: {
pre: function PreLinkingFunction($scope, $element, $attributes) { ... },
post: function PostLinkingFunction($scope, $element, $attributes) { ... },
}
Custom directives: functions
http://plnkr.co/edit/qrDMJBlnwdNlfBqEEXL2?p=preview
https://github.com/angular/angular.js/wiki/Understanding-Directives
28. Custom directives: link, prelink, postlink
● There are 4 arguments available for these functions (in this order)
○ scope, elements, attributes and controllers
● You can access the DOM, you have the element.
● By default use link directly, which is equivalent to post-link alone.
● Remember, if possible provide values as soon as you can.
○ Don’t wait to post-link, do it in the controller or in compile
● [post-]link is the View part where you have everything in place and you do
the last adjustments and decisions regarding the DOM.
29. Custom directives: link, prelink, postlink
var app = angular.module('app', []);
app.directive('dad', function () {
return {
restrict: 'EA',
template: '<div class="dad">{{greeting}}{{name}}'+
'<son></son>'+
'</div>',
link: {
pre: function(scope,elem,attr){
scope.name = 'Paul';
scope.greeting = 'Hey, I am ';
}
}
};
})
app.directive('son', function () {
return {
restrict: 'EA',
template: '<div class="son">{{sonSays}}</div>',
link: function(scope,elem,attr){
scope.sonSays = 'Hey, I am David, and my dad is
'+ scope.name;
}
};
});
<div ng-app="app">
<dad></dad>
</div>
Hey, I am Paul
Hey, I am David, and my dad is Paul
30. Custom directives: post-link,
● It is safe to manipulate the DOM in post-link as the element is already in
the DOM.
● It is possible to access the scope
● All child directives are linked so it’s safe to access them
○ their scope and the elements they affect.
● It is safe to attach events handlers to elements.
31. Custom directives: pre-link,
● Use of pre-link is scarce,
○ A child needs data from its parent
● Safe to attach an event to the DOM element
○ Not safe to access DOM elements from child directives
● The scope is not linked yet.
32. Custom directives: compile
● In this phase AngularJS manipulates the DOM of the HTML template
● Each directive has a chance to do some processing for all and each DOM
nodes it appears in.
● The scope is not attached yet.
● The template is still bare, without binding nor substitutions.
35. ng-model
● Binds inputs to scope properties
● If property does not exist, it is created and added to the scope
● Watches model by reference Important!
● Allows animation and validation
<script>
angular.module("module", [])
.controller("controller", ['$scope', function($scope) {
$scope.value = "Luis";
}]);
</script>
<div ng-controller="controller">
Name: <input ng-model="value"/>
</div>
36. ng-src
● src leads to problems when evaluating expressions
● Prevents browser from loading resources before an expression is
evaluated
Buggy way
Correct way
<img src="http://www.gravatar.com/avatar/{{hash}}" alt="Description"/>
<img ng-src="http://www.gravatar.com/avatar/{{hash}}" alt="Description" />
37. ng-class
● Allows to dynamically set CSS classes on an HTML
● Ways of operating (syntax):
○ String
○ Key-value pair object
○ Array of strings (type 1) or objects (type 2)
○ Ternary operator
● Usage options: class and attribute
39. ng-class
Ternary operator
Specific numbers
ngClass as a class
ngClass as an attribute (every example shown except the last one)
ng-class="variableToEvaluate ? 'class-if-true' : 'class-if-false'">
<ul><li ng-class="{ 'text-success': $first }" ng-repeat="item in items">{{ item.name }}</li></ul>
<div class="item ng-class:type;">Stuff</div>
<div class="item ng-class:[styleOne, styleTwo];">Stuff</div>
<div class="item ng-class:{ 'text-error': wrong };">Stuff</div>
40. ng-style
● Allows setting style on an HTML conditionally
● Interpolates javascript object into style attribute, not css class
Following directive will be translated to style=”color:red”
Following directive will be translated to class=”color”
For interpolation, instead of doing this:
do this:
ng-style="{color: 'red'}"
ng-class="{color: colorClass}"
style="width: {{progress}}"
ng-style="{width: progress}"
41. ng-click
● Specify custom behavior when an element is clicked
<button ng-click="count = 0">
Reset
</button>
<button ng-click="reset()">
Reset
</button>
42. ng-show
● Shows / hides HTML element based on an expression
● Adds / removes ng-hide class
● Animations
Element visible when $scope.value is truthy
Element hidden when $scope.value is falsy
<div ng-show="value"></div>
<div ng-show="value" class="ng-hide"></div>
43. ng-if
● Removes / recreates part of the DOM
● scope is removed and recreated
● ng-model with ng-if issues
● Animations
Similar usage to ngShow / ngHide
<div ng-if="value"></div>
45. ngAnimate
CSS based animations
● No need of JavaScript code at all
● CSS class referenced between HTML and CSS
● 2 css classes added depending on the animation event
<div ng-if="bool" class="fade">
Fade me in out
</div>
<button ng-click="bool=true">Fade In!</button>
<button ng-click="bool=false">Fade Out!</button>
.fade.ng-enter {
transition:0.5s linear all;
opacity:0;
}
.fade.ng-enter.ng-enter-active {
opacity:1;
}
49. ng-include
● Add HTML code from external file to the current one
○ Fetches, compiles and includes an external HTML fragment
● Create new scope for the included template
● The included HTML files can also contain AngularJS code
<div ng-include="'myFile.html'"></div>
50. ng-include
● Cross-domain:
○ By default, the ng-include directive does not allow you to include
files from other domains.
○ To include files from another domain, you can add a whitelist of
legal files and/or domains in the config function of your application:
var app = angular.module('myApp', [])
app.config(function($sceDelegateProvider) {
$sceDelegateProvider.resourceUrlWhitelist([
'http://www.refsnesdata.no/**'
]);
});
51. ng-repeat
● Instantiates a template once per item from a collection
<div ng-repeat="item in collection"> ... </div>
● Each template instance gets its own scope
● It is also possible to get ngRepeat to iterate over the properties of an object
○ Note: The built-in filters orderBy and filter do not work with objects
<div ng-repeat="(key, value) in myObj"> ... </div>
53. ng-repeat
● Continuously watching if changes in the collection happens
○ Automatically changing DOM (when adding, removing or reordering items)
○ “Keep track” items with their DOM elements → Avoids re-render them if not needed
● Default tracking function (changeable with track-by)
○ Tracks by identity of item
○ Does not allows duplicated items
● ng-repeat in more than one parent element of the HTML
○ ng-repeat-start
○ ng-repeat-end
range of the repeater