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
Beyond AngularJS: Best practices and moreAri Lerner
Given at the Intuit front-end conference, Ari Lerner demonstrates best-practices for AngularJS applications and demonstrates how to best build your web application.
Slides from my latest talk (and videos) about Angular dependency
injection, You can find related videos here: https://www.youtube.com/playlist?list=PLfZsWIHsTcftJl7WlidsXSBAHBXQBR4j2
Discover why unit testing is such an important practice in software development and learn about Test Driven Development, mocking and other code testing practices in .Net
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
Beyond AngularJS: Best practices and moreAri Lerner
Given at the Intuit front-end conference, Ari Lerner demonstrates best-practices for AngularJS applications and demonstrates how to best build your web application.
Slides from my latest talk (and videos) about Angular dependency
injection, You can find related videos here: https://www.youtube.com/playlist?list=PLfZsWIHsTcftJl7WlidsXSBAHBXQBR4j2
Discover why unit testing is such an important practice in software development and learn about Test Driven Development, mocking and other code testing practices in .Net
Dependency Injection pattern in AngularAlexe Bogdan
Inversion of control paradigm and dependency injection pattern in Angular.
Full slides:
https://slides.com/alexebogdan/dependency-injection-pattern-in-angular
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)
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
AngularJS is a popular JavaScript framework. It is intended to make the implementation of RIA (Rich Internet Applications) easier and convenient. AngularJS is created and maintained by Google. It is relatively, a new JavaScript framework, which is designed to make the front-end development as simple as possible. AngularJS is a useful tool for standardizing the web application structure and it provides a future template to ensure that the client-side applications are developed much effectively.
This document by RapidValue is written by Gourav Ajmani, Technical Lead, who has been working on AngularJS for a while, and has read many tutorials and blogs on it. According to Gourav, he could never find any article which gives a clear, concise and step-by-step guide to create the project structure and execute the project. So, he has written this document which will help you to create the Project structure and then execute it in a simple manner.
"Angular 2: core concepts" by Fabio Biondi, Matteo Ronchi.
Angular 2 risolve problematiche e lacune della precedente versione, prestando particolare attenzione alle performance, al supporto mobile e alla qualità e leggibilità del codice prodotto. In questo talk verranno illustrate le funzionalità più significative tra cui: - nuova architettura totalmente orientata ai componenti - rimozione di $scope e del dirty checking ($digest) - adozione di un flow unidirezionale - utilizzo di Typescript, ES6 o ES5 - completa rivisitazione del motore di Dependency Injection - nuove procedure per il bootstrap dell’applicazione.
Tech Webinar: Angular 2, Introduction to a new frameworkCodemotion
Fabio Biondi e Matteo Ronchi ci presentano AngularJS 2, analizzando la nuova sintassi per la creazione di componenti che ora assumono un ruolo fondamentale all’interno del framework.
Iscriviti qui per partecipare ad altri Tech Webinar: http://goo.gl/iW81VD
Scrivici a training@codemotion.it
Tw: @codemotionTR
AngularJS is an open source web application framework. It was originally developed in 2009 by Misko Hevery and Adam Abrons. It is now maintained by Google. Its latest version is 1.4.4 .
Dependency Injection pattern in AngularAlexe Bogdan
Inversion of control paradigm and dependency injection pattern in Angular.
Full slides:
https://slides.com/alexebogdan/dependency-injection-pattern-in-angular
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)
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
AngularJS is a popular JavaScript framework. It is intended to make the implementation of RIA (Rich Internet Applications) easier and convenient. AngularJS is created and maintained by Google. It is relatively, a new JavaScript framework, which is designed to make the front-end development as simple as possible. AngularJS is a useful tool for standardizing the web application structure and it provides a future template to ensure that the client-side applications are developed much effectively.
This document by RapidValue is written by Gourav Ajmani, Technical Lead, who has been working on AngularJS for a while, and has read many tutorials and blogs on it. According to Gourav, he could never find any article which gives a clear, concise and step-by-step guide to create the project structure and execute the project. So, he has written this document which will help you to create the Project structure and then execute it in a simple manner.
"Angular 2: core concepts" by Fabio Biondi, Matteo Ronchi.
Angular 2 risolve problematiche e lacune della precedente versione, prestando particolare attenzione alle performance, al supporto mobile e alla qualità e leggibilità del codice prodotto. In questo talk verranno illustrate le funzionalità più significative tra cui: - nuova architettura totalmente orientata ai componenti - rimozione di $scope e del dirty checking ($digest) - adozione di un flow unidirezionale - utilizzo di Typescript, ES6 o ES5 - completa rivisitazione del motore di Dependency Injection - nuove procedure per il bootstrap dell’applicazione.
Tech Webinar: Angular 2, Introduction to a new frameworkCodemotion
Fabio Biondi e Matteo Ronchi ci presentano AngularJS 2, analizzando la nuova sintassi per la creazione di componenti che ora assumono un ruolo fondamentale all’interno del framework.
Iscriviti qui per partecipare ad altri Tech Webinar: http://goo.gl/iW81VD
Scrivici a training@codemotion.it
Tw: @codemotionTR
AngularJS is an open source web application framework. It was originally developed in 2009 by Misko Hevery and Adam Abrons. It is now maintained by Google. Its latest version is 1.4.4 .
Лекция для студентов НТУ ХПИ. Рассматривает основы работы с полями (nodes) в Drupal 7 - рассмотрен вопрос использования существующих поелй, их настройка, программная работа с полями,
Practical advices how to achieve persistence in Redis. Detailed overview of all cons and pros of RDB snapshots and AOF logging. Tips and tricks for proper persistence configuration with Redis pools and master/slave replication.
Дизайн REST API для высокопроизводительных систем / Александр Лебедев (Новые ...Ontico
Доклад осветит вопросы устройства REST API для веб-приложений и мобильных клиентов, от которых требуется высокая производительность.
Проектирование высокопроизводительных REST API.
- Кто должен участвовать в проектировании.
- Как узнать, что оптимизировать.
- Как измерять производительность REST API.
Паттерны и антипаттерны.
- Почему pagination - это плохо, и на что лучше заменить.
- Проблема N+1 и как с ней бороться.
- Бесполезные данные - как обнаружить и уничтожить.
- Как не ломать кэширование на клиенте.
- Эффективная работа с интерфейсами "мастер-детали".
Кэширование.
- Три слоя кэширования.
- Самый быстрый запрос - тот, которого не было. Как увеличить их количество.
- Экономия трафика.
- Исключение ненужных вычислений.
- Подходы к инвалидации кэша.
Приемы оптимизации работы с API на клиенте.
- Параллельные запросы.
- Эффективный разбор данных.
- In-memory DB на клиенте.
- Стратегии кэширования на клиенте.
Микросервисы: опыт использования в нагруженном проекте / Вадим Мадисон (М-Тех)Ontico
Мы прошли довольно большой путь в разработке через микросервисы.
Начинали разработку, когда это за рубежом только входило в тренд. По сути, не было никакой информации о том, как это делать правильно и, вообще, стоит ли это делать. Не было понятно, имеем ли мы дело с очередной модной штукой, или парадигма действительно решает часть проблем, характерных для больших нагруженных проектов.
Мы прошли путь от того, когда 100 микросервисов казалось много ... Сейчас цифры в 1000, 2000 кажутся чем-то обыденным.
В ходе доклада я постараюсь сделать упор на эксплуатацию системы, работающей на микросервисах. Расскажу, какой инструментарий показал себя хорошо на больших объемах, а от какого пришлось отказаться. Покажу на примерах, как эволюционировала наша система управления конфигурацией системы в целом и отдельными сервисами. Расскажу, как корректно предоставлять API сервиса и правильно поставлять его клиентские библиотеки, чтобы избегать внутренних и искусственных зависимостей. Покажу, как мы работаем с распределенными сервисами и обеспечиваем отказоустойчивость.
This presentation has been prepared by Oleksii Prohonnyi for internal Angular.js training to improve skills of newbies in JS/Angular.
Part 2 (Architecture): http://www.slideshare.net/oprohonnyi/dive-into-angular-part-2-architecture
Part 3 (Performance): http://www.slideshare.net/oprohonnyi/dive-into-angular-part-3-performance
Part 4 (Angular 2.0): http://www.slideshare.net/oprohonnyi/dive-into-angular-part-4-angular-20
Part 5 (Experience): https://www.slideshare.net/oprohonnyi/dive-into-angular-part-5-experience
Angular 6 Training with project in hyderabad indiaphp2ranjan
ngularJS is one of the JavaScript open-source web application frameworks which is generally used to add an HTML page along with a tag. The major aim of AngularJS is to simplify the application development and testing performance by providing a framework called MVC (Model View Controller) Architecture. It enables the application to change from bulk amount of programming code into a simple code.
Angular js interview question answer for fresherRavi Bhadauria
AngularJS is a structural framework for dynamic web apps. It lets you use HTML as your template language and lets you extend HTML's syntax to express your application's components clearly and succinctly. Angular's data binding and dependency injection eliminate much of the code you would otherwise have to write. And it all happens within the browser, making it an ideal partner with any server technology.
Angular js 1.3 presentation for fed nov 2014Sarah Hudson
AngularJS is an up-and-coming JavaScript framework supported and maintained by Google. Over the past year, usage for the framework has exploded, giving many developers reason to believe it's the next big thing. In this presentation by Angular developer Sarah Hudson, you will learn the basics of what Angular is and what it can do for your projects, as well as breaking down the components of Angular, what makes it unique, and how it gives developers more control over custom templates and elements.
Sections include:
• Core structure and components of Angular, such as custom directives, factories for sharing data, two-way binding, and modules
• Companion libraries to Angular, such as the popular AngularUI suite which includes UI-Bootstrap
• A brief overview of routing options from Angular's native routing to UI Router, and how it offers flexibility for your apps
1> IMPORTANT PARTS OF ANGULARJS
2> Angular Js FEATURES
3> ADVANTAGES / DISADVANTAGES OF ANGULARJS
4> THE ANGULARJS COMPONENTS
5> MVC
6> STEPS TO CREATE ANGULARJS APP
Agenda:
1- Introduction: basic description and overview about what is angular and why we should use it.
2- AngularJS Core Features: key features of angularJS.
3- Guides and help: API and documentation references, in addition of online courses.
Angular Js Get Started - Complete CourseEPAM Systems
Angular Js Advantages.Developed by Google - Most Popular, SPA (Single Page Appplications), Data Binding, Easy to Test.
Complete guide for Angular Js. Covers Basics of Angular - Module, Controllers, Filters, and Advanced topics Routing, Services, UI-Routing
Angular-Js is a JavaScript-based open-source front-end web application framework mainly maintained by Google and by a community of individuals and corporations to address many of the challenges encountered in developing single-page applications.
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.
AngularJS is a structural framework for dynamic web applications. It lets you use HTML as your template language and lets you extend HTML's syntax to express your application components clearly and succinctly.
Its data binding and dependency injection eliminate much of the code you currently have to write. And it all happens within the browser, making it an ideal partner with any server technology.
How can you be confident that your code is well-tested? For me, the criteria are straightforward: you feel comfortable deploying it automatically to production on a Friday evening, and the release pipeline stays as green as an evergreen tree. In this talk, I'll share some approaches that I am following to hit both targets for Node.js apps (APIs BFFs, etc)
Node.js BFFs - our way to the better/micro frontendsEugene Fidelin
To be able to implement new features in as little time as possible, we migrated our
monolithic Java-based frontends towards smaller Node.js BFFs (backend-for-frontend, BFF
pattern - create separate backend services to be consumed by specific frontend
applications).
Now we are close to the next step in our journey and adopt Micro-frontends architecture to
build our web apps as a composition of even smaller features which are owned by
independent teams
The burden of maintenance, keeping things consistent, secure and up-to-date grows with the number of services and libs owned by the teams.
At Marktplaats/Adevinta Benelux we work hard on improving developer experience of our frontend platform so less time is spent on housekeeping and developers can focus all their efforts on product development and nothing else.
Node.js BFFs: our way to better/micro frontendsEugene Fidelin
About 2 years ago Marktplaats.nl started to build a new platform. We migrated from huge Java-based frontends towards smaller Node.js BFFs (backend-for-frontends). We are close to the next step and adapt a micro-frontends approach.
Here I would like to share the outcomes of this quest: what architecture solutions are made, how does Marktplaats.nl run and scale so many BFFs in production, how we grew as a team, educated frontend-developers to write backend code and what were our biggest challenges.
Фичи н-н-нада? Или почему стоит использовать модуль Features.Eugene Fidelin
Presentation about using Features module for Drupal.
Made for DrupalCamp Donetsk 2011
Video: http://www.youtube.com/watch?feature=player_embedded&v=3nLlrEYFwgA
Search and Society: Reimagining Information Access for Radical FuturesBhaskar Mitra
The field of Information retrieval (IR) is currently undergoing a transformative shift, at least partly due to the emerging applications of generative AI to information access. In this talk, we will deliberate on the sociotechnical implications of generative AI for information access. We will argue that there is both a critical necessity and an exciting opportunity for the IR community to re-center our research agendas on societal needs while dismantling the artificial separation between the work on fairness, accountability, transparency, and ethics in IR and the rest of IR research. Instead of adopting a reactionary strategy of trying to mitigate potential social harms from emerging technologies, the community should aim to proactively set the research agenda for the kinds of systems we should build inspired by diverse explicitly stated sociotechnical imaginaries. The sociotechnical imaginaries that underpin the design and development of information access technologies needs to be explicitly articulated, and we need to develop theories of change in context of these diverse perspectives. Our guiding future imaginaries must be informed by other academic fields, such as democratic theory and critical theory, and should be co-developed with social science scholars, legal scholars, civil rights and social justice activists, and artists, among others.
Software Delivery At the Speed of AI: Inflectra Invests In AI-Powered QualityInflectra
In this insightful webinar, Inflectra explores how artificial intelligence (AI) is transforming software development and testing. Discover how AI-powered tools are revolutionizing every stage of the software development lifecycle (SDLC), from design and prototyping to testing, deployment, and monitoring.
Learn about:
• The Future of Testing: How AI is shifting testing towards verification, analysis, and higher-level skills, while reducing repetitive tasks.
• Test Automation: How AI-powered test case generation, optimization, and self-healing tests are making testing more efficient and effective.
• Visual Testing: Explore the emerging capabilities of AI in visual testing and how it's set to revolutionize UI verification.
• Inflectra's AI Solutions: See demonstrations of Inflectra's cutting-edge AI tools like the ChatGPT plugin and Azure Open AI platform, designed to streamline your testing process.
Whether you're a developer, tester, or QA professional, this webinar will give you valuable insights into how AI is shaping the future of software delivery.
Transcript: Selling digital books in 2024: Insights from industry leaders - T...BookNet Canada
The publishing industry has been selling digital audiobooks and ebooks for over a decade and has found its groove. What’s changed? What has stayed the same? Where do we go from here? Join a group of leading sales peers from across the industry for a conversation about the lessons learned since the popularization of digital books, best practices, digital book supply chain management, and more.
Link to video recording: https://bnctechforum.ca/sessions/selling-digital-books-in-2024-insights-from-industry-leaders/
Presented by BookNet Canada on May 28, 2024, with support from the Department of Canadian Heritage.
Neuro-symbolic is not enough, we need neuro-*semantic*Frank van Harmelen
Neuro-symbolic (NeSy) AI is on the rise. However, simply machine learning on just any symbolic structure is not sufficient to really harvest the gains of NeSy. These will only be gained when the symbolic structures have an actual semantics. I give an operational definition of semantics as “predictable inference”.
All of this illustrated with link prediction over knowledge graphs, but the argument is general.
"Impact of front-end architecture on development cost", Viktor TurskyiFwdays
I have heard many times that architecture is not important for the front-end. Also, many times I have seen how developers implement features on the front-end just following the standard rules for a framework and think that this is enough to successfully launch the project, and then the project fails. How to prevent this and what approach to choose? I have launched dozens of complex projects and during the talk we will analyze which approaches have worked for me and which have not.
Essentials of Automations: Optimizing FME Workflows with ParametersSafe Software
Are you looking to streamline your workflows and boost your projects’ efficiency? Do you find yourself searching for ways to add flexibility and control over your FME workflows? If so, you’re in the right place.
Join us for an insightful dive into the world of FME parameters, a critical element in optimizing workflow efficiency. This webinar marks the beginning of our three-part “Essentials of Automation” series. This first webinar is designed to equip you with the knowledge and skills to utilize parameters effectively: enhancing the flexibility, maintainability, and user control of your FME projects.
Here’s what you’ll gain:
- Essentials of FME Parameters: Understand the pivotal role of parameters, including Reader/Writer, Transformer, User, and FME Flow categories. Discover how they are the key to unlocking automation and optimization within your workflows.
- Practical Applications in FME Form: Delve into key user parameter types including choice, connections, and file URLs. Allow users to control how a workflow runs, making your workflows more reusable. Learn to import values and deliver the best user experience for your workflows while enhancing accuracy.
- Optimization Strategies in FME Flow: Explore the creation and strategic deployment of parameters in FME Flow, including the use of deployment and geometry parameters, to maximize workflow efficiency.
- Pro Tips for Success: Gain insights on parameterizing connections and leveraging new features like Conditional Visibility for clarity and simplicity.
We’ll wrap up with a glimpse into future webinars, followed by a Q&A session to address your specific questions surrounding this topic.
Don’t miss this opportunity to elevate your FME expertise and drive your projects to new heights of efficiency.
Smart TV Buyer Insights Survey 2024 by 91mobiles.pdf91mobiles
91mobiles recently conducted a Smart TV Buyer Insights Survey in which we asked over 3,000 respondents about the TV they own, aspects they look at on a new TV, and their TV buying preferences.
DevOps and Testing slides at DASA ConnectKari Kakkonen
My and Rik Marselis slides at 30.5.2024 DASA Connect conference. We discuss about what is testing, then what is agile testing and finally what is Testing in DevOps. Finally we had lovely workshop with the participants trying to find out different ways to think about quality and testing in different parts of the DevOps infinity loop.
UiPath Test Automation using UiPath Test Suite series, part 3DianaGray10
Welcome to UiPath Test Automation using UiPath Test Suite series part 3. In this session, we will cover desktop automation along with UI automation.
Topics covered:
UI automation Introduction,
UI automation Sample
Desktop automation flow
Pradeep Chinnala, Senior Consultant Automation Developer @WonderBotz and UiPath MVP
Deepak Rai, Automation Practice Lead, Boundaryless Group and UiPath MVP
PHP Frameworks: I want to break free (IPC Berlin 2024)Ralf Eggert
In this presentation, we examine the challenges and limitations of relying too heavily on PHP frameworks in web development. We discuss the history of PHP and its frameworks to understand how this dependence has evolved. The focus will be on providing concrete tips and strategies to reduce reliance on these frameworks, based on real-world examples and practical considerations. The goal is to equip developers with the skills and knowledge to create more flexible and future-proof web applications. We'll explore the importance of maintaining autonomy in a rapidly changing tech landscape and how to make informed decisions in PHP development.
This talk is aimed at encouraging a more independent approach to using PHP frameworks, moving towards a more flexible and future-proof approach to PHP development.
3. Module
The highest-level Angular
object. Modules are how Angular
packages its code.
An Angular app as specified by
the ng-app directive always
corresponds to a module.
Other objects are always created
as children of modules.
http://paislee.io/a-conceptual-introduction-to-angularjs
Directive
Filter
4. Config/Routes
Basically a container for app
setup.
Within config it's typical to
see routes configured. Routing
is a pairing a view with a
controller.
http://paislee.io/a-conceptual-introduction-to-angularjs
Directive
Filter
5. Controller
Manages a special object called
a scope that is accessible by
the view that knows about that
controller.
The controller is the gateway
between the information that the
view sees, and the logic that
creates and works on that
information.
http://paislee.io/a-conceptual-introduction-to-angularjs
Directive
Filter
6. Factory/Service/Provider
Places where data processing
should happen.
Each one is an Angular construct
that simply wraps a different
JavaScript approach to creating
objects.
With factory any other construct
could be created.
http://paislee.io/a-conceptual-introduction-to-angularjs
Directive
Filter
7. Directive
The only place (besides the
view) where DOM manipulations
could be done.
Any time you find yourself
repeating chunks of HTML, or
referring to DOM nodes in
JavaScript code, create a
directive to encapsulate the
output.
http://paislee.io/a-conceptual-introduction-to-angularjs
Directive
Filter
8. Filter
Let you package the
transformation of data in a way
that's usable with the | syntax
in the view.
For example, the expression
1408471200898 | date runs a
timestamp through the built-in
Angular date filter, outputting
Aug 19, 2014.
http://paislee.io/a-conceptual-introduction-to-angularjs
Directive
Filter
9. View
Is the Angular-flavored HTML.
$scope lives between the view
and controller, and Angular is
making sure both ends of the app
have the latest version of it.
http://paislee.io/a-conceptual-introduction-to-angularjs
Directive
Filter
12. Dependency injection
Each component explicitly
defined its dependencies.
Angular inject the requested
dependency by the function
argument names.
Once requested Angular’s
injector instantiates the
dependency and inject it.
angular.module('app', ['externalModule']);
angular.module('app')
.controller('MyController', function
($window, someOtherService) {
// ...
});
13. Bad practices I swear never to ...
Make code more
complicated, less reusable
and much harder to test.
14. Access or modify DOM in the controller
DOM should be changed only within the view (template) or
directive.
15. Use in the controller scope variables defined in the view
These variables (usually it is either form or form element)
should be explicitly passed to the controller methods.
16. Have business logic in the view
Views should have only render logic.
The rest should be either in the controller, filter or
directive (if you need to use more than 1 time).
Expression in view should be as simple as possible.
17. Use jQuery
If you are using jQuery to manipulate DOM - you don’t need
it. Angular has angular.element methods to manipulate the
DOM in the directive code.
Any other functionality of jQuery has appropriate
alternatives in Angular core or additional modules.
18. Perform HTTP requests in the controller
Controller should only use the services which encapsulate
HTTP requests and provides methods to use them.
19. Put any logic in the application module run method
If you need something that is global for the whole
application - create the service.
20. Use callbacks instead of promises
Promises are much easier to maintain and test - use them.
All asynchronous methods in Angular are returning promises,
so you are already using them.
21. Use a scalar variable within an isolated scope
Isolated scopes are created by multiple directives.Updates
from outside scopes won't appear inside after scalar
variable is changed inside.
Example: http://embed.plnkr.co/qRhLfw/preview
Note: using ControllerAs syntax solves the issue.
22. Good practices I’ll try my best to ...
Just make your life easier
and application more
reliable
23. Separate the Angular and backend templates
Use as less as possible Angular directives in the backend
templates.
ng-app and ng-controller to bootstrap Angular application
and and ng-include to inject the Angular views.
24. Use ng-bind instead of {{}}
The {{}} are much slower.
ng-bind is a directive and it will only apply, when the
passed value does actually change.
The brackets on the other hand will be dirty checked and
refreshed in every $digest, even if it's not necessary.
Also, unrendered brackets are visible to the user, what
required to use ng-cloak to hide them.
25. Use bind-once functionality
Angular allows to bind the value of an expression/attribute
once (will be bound when != ’undefined’). This is useful,
when value won’t be changed.
Place "::" before the binding to enable bind-once:
<p ng-bind=’::value’> or {{ ::value }}
26. Use ConrollerAs syntax
Controllers are more of a class
based - all variables are
assigned to this instead of
$scope.
Controllers are namespaced in
the views.
In details: Digging into
Angular’s “Controller as” syntax
app.controller('MainCtrl', function () {
this.title = 'Some title';
});
<div ng-controller="MainCtrl as main">
{{ main.title }}
</div>
27. Build tools
Grunt is our task runner,
let’s see what plugins are
used.
Help to write less code
and keep it clean,
automate the process.
28. grunt-contrib-jshint
Detects errors and potential problems in JavaScript code.
It is very flexible and can be easily adjusted to particular
coding guidelines and the environment where the code will be
executed
29. grunt-contrib-concat
Concatenates multiple JavaScript files into one to speed up
its downloading and page rendering.
Also allows to wrap code in the Immediately-Invoked Function
Expression (IIFE) that prevents you code from leaking into
the global scope.
30. grunt-ng-annotate
Adds and removes AngularJS dependency injection annotations.
It is non-intrusive so the source code stays exactly the
same otherwise.
Annotations are useful because with them it is possible to
minify the source code.
32. grunt-ng-constant
Separates code and configuration by dynamically generating
Angular constant modules from the json and yaml
configuration files.
33. grunt-contrib-uglify
Minifies and compress JavaScript files to minimize the size
of files that must be downloaded and improve page
performance.
Note: Angular dependency injection annotations should be
added before uglifying.
34. Testing A developer is known by
the tests he writes.
Angular is written with
testability in mind, but
it still requires that you
do the right thing.
35. Main tools
Karma is a JavaScript command line tool that can be used to
spawn a web server which loads your application's source
code and executes your tests.
Jasmine is a behavior driven development framework for
JavaScript. Provides functions to help with structuring
tests, making assertions and creating stubs (spies).
angular-mocks provides mocking for the tests. One of the
most useful parts is $httpBackend, which allows to mock XHR
requests in tests, and return sample data instead.
36. Unit tests
Angular comes with dependency injection built-in, which makes
testing much easier, because you can pass in a component's
dependencies and stub or mock them as you wish.
Test every controller, service or model in isolated
environment by mocking all non-core dependencies
(see Mocking Dependencies in AngularJS Tests)
37. Integration tests
Protractor is an end-to-end test framework for AngularJS
applications. Protractor runs tests against your application
running in a real browser, interacting with it as a user
would.
38. ● Guide to AngularJS
Documentation
● AngularJS wiki
● A Conceptual Introduction
to AngularJS
● Sane, scalable Angular
apps are tricky, but not
impossible. Lessons
learned from PayPal
Checkout.
● Mocking Dependencies in
AngularJS Tests
Image by lifehack.org