AngularJS is a JavaScript framework for building complex client-side web applications. It provides modules, controllers, directives, services and other core features out of the box. Modules allow separating an application into logical domains and define dependencies. Controllers contain business logic and retrieve data from services. Directives extend HTML attributes and elements. Services provide reusable behavior across the application. AngularJS uses dependency injection for testability and supports unit and end-to-end testing.
Single-page applications (SPAs) take user interaction with web applications to a new level. This means that more logic will be moved to the web browser and we have to become more familiar with JavaScript. AngularJS is one of the leading JavaScript frameworks when talking about SPAs. In this workshop I will present AngularJS in terms of problems it addresses and how it does this. Together we will develop a single-page application and we will go through how traditional concepts of web applications (data and state management, authentication) can be solved using the framework. Furthermore, we will dive into typical pitfalls when developing applications using AngularJS and will see how we can avoid them.
Building Custom AngularJS Directives - A Step-by-Step Guide - Dan Wahlin | Fa...FalafelSoftware
AngularJS provides many built-in directives that can be used to manipulate the DOM, handle events, and more but there will be times when you need to write custom directives. How do you get started? Are directives really as scary as they look at first glance?
In this session Dan Wahlin will provide a step-by-step look at creating custom AngularJS directives and show how to use templates, controllers, the link function, and many other features. You'll also see how custom directives can be used along with other AngularJS features such as $http interceptors and validation. By the end of the session you'll realize that directives aren't quite as scary as they first appear.
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
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.
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
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
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.
A talk i had about the solid principles at AngularJS-IL meetup #15. AngularJS is a great framework, it give you the tools you need to build robust single page web applications. Nut a good design and architecture are framework agnostic. By applying some well known object oriented principles to our angular application we can achieve more clean and modular code base.
Single-page applications (SPAs) take user interaction with web applications to a new level. This means that more logic will be moved to the web browser and we have to become more familiar with JavaScript. AngularJS is one of the leading JavaScript frameworks when talking about SPAs. In this workshop I will present AngularJS in terms of problems it addresses and how it does this. Together we will develop a single-page application and we will go through how traditional concepts of web applications (data and state management, authentication) can be solved using the framework. Furthermore, we will dive into typical pitfalls when developing applications using AngularJS and will see how we can avoid them.
Building Custom AngularJS Directives - A Step-by-Step Guide - Dan Wahlin | Fa...FalafelSoftware
AngularJS provides many built-in directives that can be used to manipulate the DOM, handle events, and more but there will be times when you need to write custom directives. How do you get started? Are directives really as scary as they look at first glance?
In this session Dan Wahlin will provide a step-by-step look at creating custom AngularJS directives and show how to use templates, controllers, the link function, and many other features. You'll also see how custom directives can be used along with other AngularJS features such as $http interceptors and validation. By the end of the session you'll realize that directives aren't quite as scary as they first appear.
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
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.
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
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
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.
A talk i had about the solid principles at AngularJS-IL meetup #15. AngularJS is a great framework, it give you the tools you need to build robust single page web applications. Nut a good design and architecture are framework agnostic. By applying some well known object oriented principles to our angular application we can achieve more clean and modular code base.
Lookalike audiences let you reach new people who are likely to be interested in your business because they are similar to a customer list you care about.
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)
This is a talk I gave the at the AngleBrackets/DevIntersection conference in April of 2014 that covers the AngularJS JavaScript framework (one of my favorite frameworks out there!). In this talk I discussed the challenges with Single Page Applications (SPA) and how AngularJS helps solve those challenges with built-in support for two-way data binding, directives and filters, controllers and more. I also discuss the relationship of modules to controllers, factories and services, and more.
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.
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
A directive is a custom HTML element that is used to extend the power of HTML. Angular 2 has the following directives that get called as part of the BrowserModule module.
ngif
ngFor
If you view the app.module.ts file, you will see the following code and the BrowserModule module defined. By defining this module, you will have access to the 2 directives.
Key Trends Shaping the Future of Infrastructure.pdfCheryl Hung
Keynote at DIGIT West Expo, Glasgow on 29 May 2024.
Cheryl Hung, ochery.com
Sr Director, Infrastructure Ecosystem, Arm.
The key trends across hardware, cloud and open-source; exploring how these areas are likely to mature and develop over the short and long-term, and then considering how organisations can position themselves to adapt and thrive.
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.
LF Energy Webinar: Electrical Grid Modelling and Simulation Through PowSyBl -...DanBrown980551
Do you want to learn how to model and simulate an electrical network from scratch in under an hour?
Then welcome to this PowSyBl workshop, hosted by Rte, the French Transmission System Operator (TSO)!
During the webinar, you will discover the PowSyBl ecosystem as well as handle and study an electrical network through an interactive Python notebook.
PowSyBl is an open source project hosted by LF Energy, which offers a comprehensive set of features for electrical grid modelling and simulation. Among other advanced features, PowSyBl provides:
- A fully editable and extendable library for grid component modelling;
- Visualization tools to display your network;
- Grid simulation tools, such as power flows, security analyses (with or without remedial actions) and sensitivity analyses;
The framework is mostly written in Java, with a Python binding so that Python developers can access PowSyBl functionalities as well.
What you will learn during the webinar:
- For beginners: discover PowSyBl's functionalities through a quick general presentation and the notebook, without needing any expert coding skills;
- For advanced developers: master the skills to efficiently apply PowSyBl functionalities to your real-world scenarios.
Dev Dives: Train smarter, not harder – active learning and UiPath LLMs for do...UiPathCommunity
💥 Speed, accuracy, and scaling – discover the superpowers of GenAI in action with UiPath Document Understanding and Communications Mining™:
See how to accelerate model training and optimize model performance with active learning
Learn about the latest enhancements to out-of-the-box document processing – with little to no training required
Get an exclusive demo of the new family of UiPath LLMs – GenAI models specialized for processing different types of documents and messages
This is a hands-on session specifically designed for automation developers and AI enthusiasts seeking to enhance their knowledge in leveraging the latest intelligent document processing capabilities offered by UiPath.
Speakers:
👨🏫 Andras Palfi, Senior Product Manager, UiPath
👩🏫 Lenka Dulovicova, Product Program Manager, UiPath
Slack (or Teams) Automation for Bonterra Impact Management (fka Social Soluti...Jeffrey Haguewood
Sidekick Solutions uses Bonterra Impact Management (fka Social Solutions Apricot) and automation solutions to integrate data for business workflows.
We believe integration and automation are essential to user experience and the promise of efficient work through technology. Automation is the critical ingredient to realizing that full vision. We develop integration products and services for Bonterra Case Management software to support the deployment of automations for a variety of use cases.
This video focuses on the notifications, alerts, and approval requests using Slack for Bonterra Impact Management. The solutions covered in this webinar can also be deployed for Microsoft Teams.
Interested in deploying notification automations for Bonterra Impact Management? Contact us at sales@sidekicksolutionsllc.com to discuss next steps.
Builder.ai Founder Sachin Dev Duggal's Strategic Approach to Create an Innova...Ramesh Iyer
In today's fast-changing business world, Companies that adapt and embrace new ideas often need help to keep up with the competition. However, fostering a culture of innovation takes much work. It takes vision, leadership and willingness to take risks in the right proportion. Sachin Dev Duggal, co-founder of Builder.ai, has perfected the art of this balance, creating a company culture where creativity and growth are nurtured at each stage.
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.
GDG Cloud Southlake #33: Boule & Rebala: Effective AppSec in SDLC using Deplo...James Anderson
Effective Application Security in Software Delivery lifecycle using Deployment Firewall and DBOM
The modern software delivery process (or the CI/CD process) includes many tools, distributed teams, open-source code, and cloud platforms. Constant focus on speed to release software to market, along with the traditional slow and manual security checks has caused gaps in continuous security as an important piece in the software supply chain. Today organizations feel more susceptible to external and internal cyber threats due to the vast attack surface in their applications supply chain and the lack of end-to-end governance and risk management.
The software team must secure its software delivery process to avoid vulnerability and security breaches. This needs to be achieved with existing tool chains and without extensive rework of the delivery processes. This talk will present strategies and techniques for providing visibility into the true risk of the existing vulnerabilities, preventing the introduction of security issues in the software, resolving vulnerabilities in production environments quickly, and capturing the deployment bill of materials (DBOM).
Speakers:
Bob Boule
Robert Boule is a technology enthusiast with PASSION for technology and making things work along with a knack for helping others understand how things work. He comes with around 20 years of solution engineering experience in application security, software continuous delivery, and SaaS platforms. He is known for his dynamic presentations in CI/CD and application security integrated in software delivery lifecycle.
Gopinath Rebala
Gopinath Rebala is the CTO of OpsMx, where he has overall responsibility for the machine learning and data processing architectures for Secure Software Delivery. Gopi also has a strong connection with our customers, leading design and architecture for strategic implementations. Gopi is a frequent speaker and well-known leader in continuous delivery and integrating security into software delivery.
GraphRAG is All You need? LLM & Knowledge GraphGuy Korland
Guy Korland, CEO and Co-founder of FalkorDB, will review two articles on the integration of language models with knowledge graphs.
1. Unifying Large Language Models and Knowledge Graphs: A Roadmap.
https://arxiv.org/abs/2306.08302
2. Microsoft Research's GraphRAG paper and a review paper on various uses of knowledge graphs:
https://www.microsoft.com/en-us/research/blog/graphrag-unlocking-llm-discovery-on-narrative-private-data/
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.
2. AngularJSoverview
• AngularJS is a JavaScript MVW
framework made by Google for
building complex client-side
applications.
• It provides everything for development
of SPA out of the box
4. AngularJSmodules
• Allows to separate application in logical domains
• Allows to minify dependencies and knowledge
sharing between modules
• Allows to introduce architecture limitations aka :
– main module knows about controllers
– main module knows about routing
– controllers know about repositories (services)
– main module knows nothing about repositories
– controllers know nothing about routing
5. AngularJSmodules
//declare module and its dependencies
angular.module('myApp', ['ngAnimate','ngCookies'])
//declaring controller in a module
.controller("MainController",mainController)
//running module configuration if needed
.config(moduleConfiguration);
6. AngularJScontrollers
• Attached to a DOM via ng-controller directive
• Use them to:
– Initiate and add behavior to the $scope
– Retrieve data from services
• Do not use for:
– DOM manipulation
– Data filtering
– Share state with other parts of the application
8. AngularJSDirectives
• Markers for the DOM element
• Use them to:
– Attach behavior to the DOM element
– Transform DOM
• At the high level those can be treated as
components which extend or change behavior of
the DOM elements
9. AngularJSDirectives
• Directives are declared as
module.directive
• Directives are invoked once so
definition object instead of function is
preferred
• In order to avoid naming collisions
prefix your directives and do not use
standard ng as a prefix
10. AngularJSDirectives
angular.module('app')
//in html can be used as lo-directive
//name expected to be in camel case in html each uppercase letter is prefixed with -
.directive('loDirective', function() {
return {
//identifies matching rule
// A-attribute, E – element, C - class name
restrict: 'AEC',
//isolating scope
scope: {
//equal for JS object
info: '=info',
// & for callback
callback: '&',
// @ for a value
value: '@value'
},
//replacing DOM element with own content
replace:true,
//if we need to wrap DOM element with some markup.
//Original DOM is placed using ng-transclud
transclude: false,
//here is the template that is used for rendering
templateUrl: 'my-customer-iso.html',
//and that function would be called each time I am attached to the DOM element
link:function(scope, element, attrs) {
}
//And by the way I can have my own controller, restrict access to specific
controllers and other cool stuff
};});
11. AngularJSScope
• object that refers to the application
model
• arranged in hierarchical structure
which mimic the DOM structure
(scopes inheritance is done though
prototype)
• Provides API to:
– Watch model mutations
– Propagate model changes
12. AngularJSScope
angular.module('app')
.controller("TestController", ['$scope', function($scope){
//I can set values and use them in the view
$scope.name = "Test";
$scope.count = 0;
//I can subscribe to events which can be $emit(notify parents)
//and $broadcast(notify children)
$scope.$on('CustomEvent', function(name) {
$scope.name = name;
});
//I can $watch the changes
//even in the collection through $watchCollection
$scope.$watch('name',function(newValue, oldValue){
$scope.count++;
});
//or I can apply changes if async operation is performed
setTimeout(function(){
$scope.$apply(function(){
$scope.name = "Hey ya!!!";
})},200);
}]);
13. AngularJS Templates
• Written in HTML
– Can contain directives
– Can contain filters
– Can contain form
– Can contain specific markup {{expression}}
• Can be loaded dynamically
• Can be injected into other templates
• Are loaded once per app
• Are compiled on 1st load
14. AngularJS Workingwith forms
• ng-model – bind element value to form
control (ng-model=“user.name”)
• Give form a name and mark it as
novalidate
• standard validation with
formName.fieldname.$error
• or use 3rd party libraries
15. AngularJS Templates
<!-- ngController directive -->
<body ng-controller="MyController as vm">
<!-- ngModel directive allows to bind to element values -->
<input ng-model="foo" ng-model="vm.name" type="email">
<!-- This is going to be replaced with datepicker directive -->
<datepicker ng-model="vm.date"></datepicker>
<!-- this will call $scope.change once clicked
and will have controller buttontext displayed inside -->
<button ng-click="change()">{{vm.buttonText}}</button>
<!-- or you can bind content with ngBind directive -->
<span ng-bind="vm.buttonText"></span>
<ul>
<!-- here is the way I can iterate through collection with ngRepeat -->
<!-- and change class depending on model value -->
<li ng-repeat="item in vm.items track by id" ng-class="{active: item.active}">
<!-- and I can have expressions in the layout as well -->
<button ng-click="item.active = !item.active">change state</button>
<!-- and have custom templates if needed -->
<div ng-include="item.templateUrl"></div>
</li>
</ul>
16. AngularJS Filters
• Used to filter output
• Used to format output
• Filter is applied by using | in markup
• Or can be injected in other object
• Should return a function that will be
evaluated
17. AngularJS Filters
<script type="text/javascript">
//here is the way we register filder
angular.module('myFilters', []).filter('checkmark', function() {
//in the return function let's change the output
return function(input) {
return input ? 'True' : 'False';
};
});
</script>
Search: <input ng-model="searchText">
<table>
<tr><th>Name</th><th>Visited date</th><th>Active</th></tr>
<!-- I can filter elements in array -->
<tr ng-repeat="customer in customers | filter:searchText">
<td>{{customer.name}}</td>
<!-- I can format output with standard filter -->
<td>{{customer.lastVisitedDate | date:'yyyy-MM-dd'}}</td>
<!-- or with custom -->
<td>{{customer.active | checkmark }}</td>
</tr>
</table>
18. AngularJS Services
• Used to share across application:
– Data
– Behavior
• Services are lazy instantiated
• Services are singletons
• Remove code duplication
• Can work with DOM if needed
19. AngularJS Services
angular.module('app').factory('SampleRESTService', function ($resource) {
//there we go let's use another service which provides full REST support
return $resource('/api/sample/:id', { id: '@id' });
})
//let's inject the service
.controller("TestController", ['$scope', 'SampleRESTService',
function($scope, SampleRESTService){
$scope.tasks = SampleRESTService.query();
}]);
20. AngularJSDependencyinjection
• Using the inline array annotation
(prefered) is doing the constructor
injection
• Using $inject
• Using naming convention (is not min
safe)
• Add ng-strict-di directive to avoid
usage of naming convention
22. AngularJS Testability
• Unit testing
• End 2 end testing == Automated
testing
• Middleware testing == white box
testing provides access to internal
angular objects (directives)
• Useful library angular-mocks
23. AngularJS Unit testing (controller)
describe('Home controller test', function () {
//loading module where controller is defined
beforeEach(module('app.home'));
//declaring variables that will be used in the tests
var controller, scope, deferred;
//creating items
beforeEach(inject(function ($rootScope, $controller, $q) {
deferred = $q.defer();
scope = $rootScope.$new();
//create the controller injecting the scope and the mocked service
controller = $controller('Home', {
$scope: scope,
DashboardService: {
getDashboard: function () {
return deferred.promise;
}
}
});
}));
//once result is not returned let's check that initial data state is correct
it('verifies NewMessagesCount is undefined', function () {
expect(controller.NewMessagesCount === undefined);
});
//Let's resolve value and see if it is correct
it('verifies NewMessagesCount is correct', function () {
deferred.resolve({ NewMessagesCount: 5 });
expect(controller.NewMessagesCount === 5);
});
it('verifies that scope contains go and it is a function', function () {
expect(scope.go === 'function');
});
});
24. AngularJS Unit testing (controller)
describe('Dashboard factory tests', function () {
//injecting module
beforeEach(module('app.services'));
//mocking dependcies
beforeEach(function () {
var Utility = {};
module(function ($provide) {
$provide.value('Utility', Utility);
});
});
var httpBackend, Factory;
//injecting httpBackend for testing of http
//injecting factory itself
beforeEach(inject(function ($httpBackend, Factory) {
httpBackend = $httpBackend;
Factory = Factory;
}));
it('checks that object is not modified by service and proper API method is called',
function () {
//setting method we expect to be called and method response
httpBackend.expectGET('api/Dashboard/').respond("Test");
var result = Factory.getDashboard();
//Verifying that all expected methods were called
httpBackend.flush();
//verifying that result is returned as expected
expect(result == "Test");
});
afterEach(function () {
httpBackend.verifyNoOutstandingExpectation();
httpBackend.verifyNoOutstandingRequest();
});
});
27. Sum Up
• Provides big amount of features
• Has everything for SPA development
• Limits usage of other frameworks
• Learning curve is being quite high