AngularJS training provides an overview of key AngularJS concepts and best practices for building Angular applications. The document introduces the trainer, Lauri Svan, and discusses AngularJS fundamentals like two-way data binding, dependency injection, templates, controllers and directives. It also outlines the typical structure of an Angular app, including modules, services and routing. Form validation, custom directives and asynchronous validation with ngModelOptions are also covered to demonstrate common Angular patterns and techniques.
WCF Data Services (formerly known as "ADO.NET Data Services") is a component of the .NET Framework that enables you to create services that use the Open Data Protocol (OData) to expose and consume data over the Web or intranet by using the semantics of representational state transfer (REST). OData exposes data as resources that are addressable by URIs. Data is accessed and changed by using standard HTTP verbs of GET, PUT, POST, and DELETE. OData uses the entity-relationship conventions of the Entity Data Model to expose resources as sets of entities that are related by associations.
WCF Data Services (formerly known as "ADO.NET Data Services") is a component of the .NET Framework that enables you to create services that use the Open Data Protocol (OData) to expose and consume data over the Web or intranet by using the semantics of representational state transfer (REST). OData exposes data as resources that are addressable by URIs. Data is accessed and changed by using standard HTTP verbs of GET, PUT, POST, and DELETE. OData uses the entity-relationship conventions of the Entity Data Model to expose resources as sets of entities that are related by associations.
Server side data sync for mobile apps with silexMichele Orselli
oday mobile apps are everywhere. These apps cannot count on a reliable and constant internet connection: working in offline mode is becoming a common pattern. This is quite easy for read-only apps but it becomes rapidly tricky for apps that create data in offline mode. This talk is a case study about a possible architecture for enabling data synchronization in these situations. Some of the topics touched will be:
- id generation
- hierarchical data
- managing differente data types
- sync algorithm
Implementing data sync apis for mibile apps @cloudconfMichele Orselli
Today mobile apps are everywhere. These apps cannot count on a reliable and constant internet connection: working in offline mode is becoming a common pattern. This is quite easy for read-only apps but it becomes rapidly tricky for apps that create data in offline mode. This talk is a case study about a possible architecture for enabling data synchronization in these situations. Some of the topics touched will be:
- id generation
- hierarchical data
- managing differente data types
- sync algorithm
Implementing Server Side Data Synchronization for Mobile AppsMichele Orselli
Today mobile apps are everywhere. These apps cannot count on a reliable and constant internet connection: working in offline mode is becoming a common pattern. This is quite easy for read-only apps but it becomes rapidly tricky for apps that create data in offline mode. This talk is a case study about a possible architecture for enabling data synchronization in these situations
"Inside The AngularJS Directive Compiler" by Tero ParviainenFwdays
Directives are Angular's most powerful and unique feature. They are also Angular's most underused feature and notoriously difficult to learn. A lot of this has to do with the convoluted directive API and the various ways in which you can use and misuse it.
However, behind the scenes of the directive API there is a relatively simple core, which takes your web page's DOM and transforms it to a living, breathing JavaScript application. This talk goes behind the scenes of Angular's directive compiler and shows what it actually does. You will come out of the talk with a renewed understanding of Angular's inner mechanics, which will help you use it more effectively.
Google has officially released its first stable version of Angular 2, but it might as well be called by an entirely different name as most of everything has changed. No more controllers/factories/providers, promises, or a confusing routing system: you’ll now be getting used to components, new templating, observables, and TypeScript. Learn about the nuts and bolts of the new framework and how those are changing app architecture for the better. And not to fear, ng1 developers: there is a migration path planned!
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.
Everybody knows : Web is the platform of the future. Developing for the browser unfortunately requires us to learn and write JavaScript. Not only that but we also have to integrate the JavaScript client code with the server side, which often runs on the JVM (i.e. is written in Java). So we have to work in two different languages with completely different tools and APIs, and cannot share code between the client and the server.
The Google Web Toolkit (GWT) provides a way to write your client side web application entirely in Java and have it automatically translated to fast and compact JavaScript. It allows you to access all the browser functionality through a statically typed API. You only have to learn and use one language and you can use your code on the client as well as on the server.
The downside : Java is a bad match for the asynchronous programming model required on the browser and generally forces us to write and read a lot of boilerplate code.
In this session you'll see how programming GWT applications with Eclipse Xtend provides the best of both worlds:
Static typing with advanced IDE support meets a powerful and expressive language - right at your finger tips.
Learn how to focus on creating a great user experience and forget complex infrastructure. Instantly add a powerful core, push notifications, and analytics to your app with Parse. We will take a deep dive at Parse's native SDKs for Android and see how to build an app that scales to millions of users.
Auto-GWT : Better GWT Programming with XtendSven Efftinge
Presentation from GWT.create 2015 EU
Auto-GWT (auto-gwt.org) is a library for the Google Web Toolkit, that frees your code from unneccessary and complicated boilerplate and at the same time pushes the IDE capabilities to a new level. Auto-GWT is based on Xtend (xtendlang.org).
Xtend is a modern programming language that is 100% compatibly with existing Java libraries and even translates to readable Java source code. With it's slick syntax and powerful features such as lambdas, operator overloading and compile-time macros you can turn any verbose piece of Java code into a small and elegant piece of expressive Xtend code.
In this session we will show how Xtend can be used to program GWT applications and how well the typical GWT idioms are supported by the language.
Server side data sync for mobile apps with silexMichele Orselli
oday mobile apps are everywhere. These apps cannot count on a reliable and constant internet connection: working in offline mode is becoming a common pattern. This is quite easy for read-only apps but it becomes rapidly tricky for apps that create data in offline mode. This talk is a case study about a possible architecture for enabling data synchronization in these situations. Some of the topics touched will be:
- id generation
- hierarchical data
- managing differente data types
- sync algorithm
Implementing data sync apis for mibile apps @cloudconfMichele Orselli
Today mobile apps are everywhere. These apps cannot count on a reliable and constant internet connection: working in offline mode is becoming a common pattern. This is quite easy for read-only apps but it becomes rapidly tricky for apps that create data in offline mode. This talk is a case study about a possible architecture for enabling data synchronization in these situations. Some of the topics touched will be:
- id generation
- hierarchical data
- managing differente data types
- sync algorithm
Implementing Server Side Data Synchronization for Mobile AppsMichele Orselli
Today mobile apps are everywhere. These apps cannot count on a reliable and constant internet connection: working in offline mode is becoming a common pattern. This is quite easy for read-only apps but it becomes rapidly tricky for apps that create data in offline mode. This talk is a case study about a possible architecture for enabling data synchronization in these situations
"Inside The AngularJS Directive Compiler" by Tero ParviainenFwdays
Directives are Angular's most powerful and unique feature. They are also Angular's most underused feature and notoriously difficult to learn. A lot of this has to do with the convoluted directive API and the various ways in which you can use and misuse it.
However, behind the scenes of the directive API there is a relatively simple core, which takes your web page's DOM and transforms it to a living, breathing JavaScript application. This talk goes behind the scenes of Angular's directive compiler and shows what it actually does. You will come out of the talk with a renewed understanding of Angular's inner mechanics, which will help you use it more effectively.
Google has officially released its first stable version of Angular 2, but it might as well be called by an entirely different name as most of everything has changed. No more controllers/factories/providers, promises, or a confusing routing system: you’ll now be getting used to components, new templating, observables, and TypeScript. Learn about the nuts and bolts of the new framework and how those are changing app architecture for the better. And not to fear, ng1 developers: there is a migration path planned!
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.
Everybody knows : Web is the platform of the future. Developing for the browser unfortunately requires us to learn and write JavaScript. Not only that but we also have to integrate the JavaScript client code with the server side, which often runs on the JVM (i.e. is written in Java). So we have to work in two different languages with completely different tools and APIs, and cannot share code between the client and the server.
The Google Web Toolkit (GWT) provides a way to write your client side web application entirely in Java and have it automatically translated to fast and compact JavaScript. It allows you to access all the browser functionality through a statically typed API. You only have to learn and use one language and you can use your code on the client as well as on the server.
The downside : Java is a bad match for the asynchronous programming model required on the browser and generally forces us to write and read a lot of boilerplate code.
In this session you'll see how programming GWT applications with Eclipse Xtend provides the best of both worlds:
Static typing with advanced IDE support meets a powerful and expressive language - right at your finger tips.
Learn how to focus on creating a great user experience and forget complex infrastructure. Instantly add a powerful core, push notifications, and analytics to your app with Parse. We will take a deep dive at Parse's native SDKs for Android and see how to build an app that scales to millions of users.
Auto-GWT : Better GWT Programming with XtendSven Efftinge
Presentation from GWT.create 2015 EU
Auto-GWT (auto-gwt.org) is a library for the Google Web Toolkit, that frees your code from unneccessary and complicated boilerplate and at the same time pushes the IDE capabilities to a new level. Auto-GWT is based on Xtend (xtendlang.org).
Xtend is a modern programming language that is 100% compatibly with existing Java libraries and even translates to readable Java source code. With it's slick syntax and powerful features such as lambdas, operator overloading and compile-time macros you can turn any verbose piece of Java code into a small and elegant piece of expressive Xtend code.
In this session we will show how Xtend can be used to program GWT applications and how well the typical GWT idioms are supported by the language.
While application security will always be an application space problem that's ultimately up to programmers to solve, new techniques in modern browsers can help mitigate vulnerability surface area when bugs enter the playing field unnoticed. Besides the obvious transport level security provided by HTTPS, CSP and Sandboxed Iframes provide solid mechanisms for setting rules to help the browser help you.
AngularJS with TypeScript and Windows Azure Mobile ServicesRainer Stropek
In the coming two weeks I will do a series of talks at various conferences in Austria and Germany. I will speak about AngularJS, TypeScript, and Windows Azure Mobile Services. In this blog post I publish the slides and the sample code.
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.
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
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
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.
Modular Test-driven SPAs with Spring and AngularJSGunnar Hillert
Single-page Applications (SPA) are all the rage these days and with them there is an avalanche of new tools, libraries and frameworks we need to know. But what does this mean for us as Spring developers? In this session we will give you an overview of the current landscape and illustrate the choices the Spring XD team has made for its user interface. What do I use to write SPA applications? How do I integrate them into existing Spring-based backends? How do I build them? Can I integrate them into my existing Gradle or Maven build processes in order to achieve complete build automation? How do I integrate realtime messaging using Spring's SockJS/WebSocket support? In this talk we will answer these and many more questions. We will cover frameworks such as AngularJS, Bootstrap, RequireJS; tools like Bower, Grunt, Gulp; and also talk about testing using Karma and Protractor.
Similar to Angular.js Primer in Aalto University (20)
Transfer learning allows you to adapt pre-trained machine learning models to fit custom use cases. In this talk, we'll provide an overview of transfer learning, and demo transfer learning in practise using customvision.ai.
Miten design-muutosjohtaminen hyödyttää yrityksiä?SC5.io
Miten design-muutosjohtamisella voidaan tuoda suunnitteluajatus koko yrityksen toimintaan ja rakentaa menestyksekkäämpiä palvelumalleja?
SC5:n Head of Designin Juho Paasosen esitys ICTexpossa 23.4.2015.
Engineering HTML5 Applications for Better PerformanceSC5.io
One second page loads, 100ms UI response time and 60fps animations - even if today's browsers are super fast, meeting these performance goals can be tricky, particularly for mobile browsers.
This presentation outlines some tools & techniques to help to design web apps with performance in mind.
SC5 and A-Lehdet just launched a responsive and adaptive website for Tuulilasi, the Finnish media authority for tech reviews of cars and other gadgets. This website relies heavily on search engine traffic, so we needed to support server side rendering. On the other hand we really wanted to use a single page app, but we didn't want to duplicate efforts.
This talk shows why the ability to share code between the browser and the server is the best thing since sliced bread. We leveraged this possibility to develop a platform that allows us to run the same application in both environments, ultimately achieving a single page app that also caters to robots.
Engineering HTML5 Applications for Better Performance - a presentation held by Lauri Svan / SC5 at Goto Aarhus International Software Development Conference.
Traditional web services are considered to be slow. The new APIs introduced by HTML5 applications do not automatically perform any better, but provide means for writing them in the same way as native applications.
We suggest to engineer the HTML5 applications the same ways as your native applications. That is, measure them using the same performance metrics, and solving some of the performance bottlenecks in the same ways as you would do for a native app.
HTML5 DevConf 2013 talk by Lauri Svan / SC5
Writing single page applications that respect all web browsers and crawlers should be easy. Still, many end up rewriting their single page application with a server-side templating language, too and get trapped to maintaining two codebases.
With the emergence of server-side JavaScript, the “holy grail” of running the same app code on both ends seems attainable. Frameworks like Meteor, Derby and Yahoo Mojito have done it, and the efforts of AirBnB and Backbone LayoutManager bring it closer to Backbone developers, too. Still, the current approaches make such assumptions on the backend or enforce such constraints on the programming model that an old-fashioned Backbone.js developer cannot take them in use.
This talk compares the approaches for the “holy grail”, particularly from a Backbone application developer’s perspective. In addition, it presents a programming model by which pretty ordinary Backbone applications can run on both ends. The presented approach works for web crawlers and could have limited use for dumb browsers, too.
The talk is technical, with the primary audience being single page app developers planning to move their app server-side. The audience will benefit from previous knowledge of Backbone.js.
A Lecture given in Aalto University course "Design of WWW Services".
Single page app is already several years old web application paradigm that is now gaining traction due to the interest towards HTML5 and particularly cross-platform mobile (web) applications. The presentation overviews the single page application paradigm and compares it with other web app paradigms.
The presentation uses Backbone.js as the sample and gives practical tips on how to best structure Backbone.js applications. It contains an extensive set of tips and links in the notes section.
The reader is adviced to download the presentation for better readability of the notes.
Multi-cluster Kubernetes Networking- Patterns, Projects and GuidelinesSanjeev Rampal
Talk presented at Kubernetes Community Day, New York, May 2024.
Technical summary of Multi-Cluster Kubernetes Networking architectures with focus on 4 key topics.
1) Key patterns for Multi-cluster architectures
2) Architectural comparison of several OSS/ CNCF projects to address these patterns
3) Evolution trends for the APIs of these projects
4) Some design recommendations & guidelines for adopting/ deploying these solutions.
1.Wireless Communication System_Wireless communication is a broad term that i...JeyaPerumal1
Wireless communication involves the transmission of information over a distance without the help of wires, cables or any other forms of electrical conductors.
Wireless communication is a broad term that incorporates all procedures and forms of connecting and communicating between two or more devices using a wireless signal through wireless communication technologies and devices.
Features of Wireless Communication
The evolution of wireless technology has brought many advancements with its effective features.
The transmitted distance can be anywhere between a few meters (for example, a television's remote control) and thousands of kilometers (for example, radio communication).
Wireless communication can be used for cellular telephony, wireless access to the internet, wireless home networking, and so on.
ER(Entity Relationship) Diagram for online shopping - TAEHimani415946
https://bit.ly/3KACoyV
The ER diagram for the project is the foundation for the building of the database of the project. The properties, datatypes, and attributes are defined by the ER diagram.
This 7-second Brain Wave Ritual Attracts Money To You.!nirahealhty
Discover the power of a simple 7-second brain wave ritual that can attract wealth and abundance into your life. By tapping into specific brain frequencies, this technique helps you manifest financial success effortlessly. Ready to transform your financial future? Try this powerful ritual and start attracting money today!
2. Intro: About the Lecturer
● 15 year battle hardened veteran
● Head of Technology at SC5
● Helsinki Node.js co-founder
● In GitHub & Twitter
● “New school of engineering”
● Knows “why” & some “how” of
AngularJS
4. What is AngularJS
● Developed and maintained by Google
● Current version 1.5 (2.0 in Alpha)
● Good documentation and examples
● 3rd party libraries
● Insanely popular (see Bower, too)
● Easy to learn
● Get things done fast
● “Good enough”
6. Recipe for an Angular Application
App Logic:
● 1 Module (the app)
● 1-N Templates for each view
● 1-N Controllers for each view
● 1 Router to toggle between UI states
● 1-N Directives for widgets
● 0-N Resources for each REST API
endpoints
● 0-N Services for inter-app comms &
storing app state
What else?
● Style sheets for app visuals
● Hybrid packaging (optional)
7. Modules
// Create module without dependencies
angular.module(‘myModule’, [ ] );
// Module with dependency
var app = angular.module(‘myApp’, [ ‘myModule’ ] );
// Get module and define controller
var module = angular.module(‘myModule’);
module.controller( ‘myController’, function($scope) {
$scope.title = ‘myController’;
});
// Declare application in HTML
<div ng-app=”myApp”>
// Declare application to body in javascript
angular.bootstrap( document.body, [‘myApp’] );
9. Controllers
● Controllers allow to interact with a View and Model.
● Is where to hold your presentation logic.
● Controller purpose is to drive Model and View
changes.
● New instance is created for each invocation
10. Controllers + $scope
Context where the model is stored so that controllers, directives and
expressions can access it.
$scope is a clever Object which is automated bridge between Javascript and
DOM that holds synchronized data.
var app = angular.module(‘myApp’);
app.controller(‘myCtrl’, function( $scope ) {
$scope.title = “MyTitle”;
});
app.controller(‘MySubCtrl’, function( $scope ) {
$scope.content = “MyData”;
});
<div ng-controller=”myCtrl”>
<h1>{{ title }}</h1>
<div ng-controller=”MySubCtrl”>
<p>{{content }}</p>
<span>ref: {{ title }}</span>
</div>
<div>{{content }}</div>
</div>
11. ControllerAs
New way in 1.3, similar as will be in 2.0
Easier to identify which scope is variable belongs to.
var app = angular.module(‘myApp’);
app.controller(‘myCtrl’, function() {
this.title = “MyTitle”;
});
app.controller(‘MySubCtrl’, function() {
this.content = “MyData”;
});
<div ng-controller=”myCtrl as mainCtrl”>
<h1>{{ mainCtrl.title }}</h1>
<div ng-controller=”MySubCtrl as subCtrl”>
<p>{{ subCtrl.content }}</p>
<span>ref: {{ mainCtrl.title }}</span>
</div>
<div>{{ subCtrl.content }}</div>
</div>
12. $scope.$watch
Way to react View change in the controller
app.controller(‘myCtrl’, function($scope) {
this.value = ‘Initial value’;
var _this = this;
$scope.$watch(
// return variable to watch (reference)
function() {
return _this.value;
},
// Handler function
function( newValue, oldValue ) {
console.log( oldValue, ‘->’, newValue );
}
);
});
app.controller(‘myCtrl’, function($scope) {
$scope.value = ‘Initial value’;
$scope.$watch(
‘value’,
function( newValue, oldValue ) {
console.log( oldValue, ‘->’, newValue );
}
);
});
W
ithout ControllerAs (1.2.x)
13. Services
● Use to hold data that persist application lifecycle, as
controllers are discarded when they are removed
from view.
● All services are singletons.
● Controllers access services via dependency injection.
● Three ways of creating services: service, factory, provider
14. Service
Creates service which will be invoked with ‘new’ to create
instance. (singleton instance)
app.service( ‘MyService’, function() {
this.greet = function() { alert(‘Hello!’); };
this.getText = function() { return ‘Hello!’; };
});
app.controller(‘myCtrl’, function(MyService) {
this.text = MyService.getText();
this.sayHello = function() {
MyService.greet();
}
});
var ServiceClass = function() {
this.color = ‘green’;
}
ServiceClass.prototype.setColor = function(color) {
this.color = color;
}
app.service( ‘MyService’, ServiceClass );
app.controller(‘MyController’, function(MyService) {
this.color = MyService.color;
this.onClick= function(color) {
MyService.setColor(color);
}
});
15. Factory
Register service by returning service instance object.
Can take advantage of closures.
app.factory( ‘MyService’, function() {
var greetText = “Hello”;
return {
greet: function() { alert(greetText); },
setText: function(text) { greetText = text; }
};
});
// Probably most common way to use factory
app.factory(‘Articles’, function( $resource, Settings ) {
return $resource( Settings.ApiHost + ‘/api/article’ );
}
app.controller(‘myCtrl’, function(MyService) {
this.text = MyService.getText();
this.sayHello = function() {
MyService.greet();
}
});
16. Providers
Only service definition that can be passed to config()
function.
Use to customize service on configuration phase.
app.provider( ‘MyService’, function() {
this.host = ‘/’;
this.$get = function( $resource ) {
return $resource( this.host + ‘/api/myservice’ );
};
});
app.config( function( MyServiceProvider ) {
if( window.location.host !== ‘example.com‘ )
MyServiceProvider.host = ‘example.com‘;
});
app.controller(‘myCtrl’, function(MyService) {
this.data = MyService.get( {id: 1234} );
});
18. Filters
Filters are used for formatting data displayed to the
user.
Primarily used in expressions, but can be used in
controllers and services also.
{{ expression | filter1 | filter2 | ... }}
<span>{{ article.published | date:”yyyy-M-d” }}<span>
<span>{{ item.price | currency:”€” }}</span>
<label>{{ ‘ITEM_PRICE’ | translate }}</label>
<div ng-repeat=”person in persons | orderBy:’lastName’ | limitTo: 10”>{{ person.lastName}}</div>
// TIP: json filter is handy to check what object contains
<pre>{{ obj | json }}</pre>
19. Built-in filters
● currency - Format currency ( symbol, how many decimal numbers)
● number - To string, how many decimal numbers to use
● date - Format Date to string, use locale format as default
● json - Object to JSON string
● lowercase - Converts string to lowercase
● uppercase - Converts string to uppercase
● filter - select subset of array
● limitTo - creates new array with specified number of elements
● orderBy - Order array by the expression
21. Directives
A Directive can be anything, it can either provide powerful logic to an
existing specific element, or be an element itself and provide an injected
template with powerful logic inside.
Directives are markers on a DOM element (such as an attribute, element
name, comment or CSS class) that tell AngularJS's HTML compiler to attach
a specified behavior to that DOM element or even transform the DOM
element and its children.
Angular comes with a set of built-in directives:
ng-model, ng-repeat, ng-show/ng-hide, ng-if, ng-click, ng-disabled, ng-
mouseover, ng-blur, ng-src/ng-href, ng-class, ng-switch, ng-bind, ng-view ….
22. Custom directives 1
Directives can match attribute name, tag name,
comments or class name. Or restricted only to match
some of them
<my-dir></my-dir>
<span my-dir="exp"></span>
<!-- directive: my-dir exp -->
<span class="my-dir: exp;"></span>
Directives can emulate Shadow DOM behaviour with
option transclude
<my-element>
Hi there!
</my-element>
28. Forms
Form and controls provide validation services, so that
the user can be notified of invalid input.
This provides a better user experience, because the user
gets instant feedback on how to correct the error.
29. Forms
<form name=”myFrom” novalidate>
<label>Email:</label>
<input type=”email” name=”email” ng-model=”user.email” required />
<label>Password:</label>
<input type=”password” name=”password” ng-model=”user.password” required minlength=”8” />
<div ng-messages=”myForm.password.$error”>
<div ng-message=”required”>Password is required</div>
<div ng-message=”minlength”>Password is too short</div>
</div>
<button ng-disabled=”myForm.$invalid”>Submit</button>
</form>
30. Form CSS classes
● ng-valid: the model is valid
● ng-invalid: the model is invalid
● ng-valid-[key]: for each valid key added by $setValidity
● ng-invalid-[key]: for each invalid key added by $setValidity
● ng-pristine: the control hasn't been interacted with yet
● ng-dirty: the control has been interacted with
● ng-touched: the control has been blurred
● ng-untouched: the control hasn't been blurred
● ng-pending: any $asyncValidators are unfulfilled
31. Form CSS class example
<form name=”myFrom” novalidate>
<label>Email:</label>
<input
type=”email”
name=”email”
ng-model=”user.email”
required />
</form>
<style type="text/css">
form input.ng-invalid.ng-dirty {
outline-color: #FA787E;
}
</style>
32. Form validators
HTML5 input validators are built-in to Angular:
number, email, required, url, time, date, ..
Create own validators with directives:
<input name=”pwd”
type=”password
ng-model=”user.password”
required
minlength=”8”
validate-password-characters />
<div ng-messages=”myFrom.pwd.$error”>
<div ng-message=”required”>Password is required</div>
<div ng-message=”minlength”>Password is too short</div>
<div ng-message=”passwordCharacters”>Your password must contain a numeric, uppercase and ..
</div>
</div>
35. ngModelOptions
Validation and specially async validation may cause too
many calls for validation.
With ngModelOptions you can control when ngModel is
updated and validators are executed.
// Update when leaving input element
<input ng-model=”value” ng-model-options=”{ updateOn:’blur’ }” required />
// Update only when no changes in 500ms or immediately when leaving element
<input ng-model=”username” ng-model-options=”{ debounce: { default: 500, blur: 0 } }”
required validate-username-available />
36. Events
Angular scope have built-in event framework.
● $on - listen to event
● $emit - send event to upwards (self and parent
scopes)
● $broadcast - send event to downwards (self / child
scopes)
<div ng-controller="EventCtrl as parentCtrl" ng-scope>
<div ng-controller="EventCtrl as childCtrl1" ng-scope>
<div ng-controller="EventCtrl as subChildCtrl" ng-scope></div>
</div>
<div ng-controller="EventCtrl as childCtrl2" ng-scope>
</div>
</div>
$broadcast $send
37. Angular extension modules
● ngRoute - Routing and deeplinking
● ngResource - RESTful services
● ngAnimate - Support for JS, CSS transitions and
animations hooks
● ngSanitize - Bind HTML content safe way
● ngTouch - Touch events
● ngMessages - Enhanced support to show messages
38. ngRoute
To create routing for your Angular application include
ngRoute module and defined routes in config()-function.
angular.module(´myApp´, [´ngRoute´]).config(
function( $routeProvider, $locationProvider ) {
$routeProvider
.when('/', {
templateUrl: 'main.html',
controller: ´mainController´
}).
.when('/page1', {
templateUrl: page1.html',
controller: ´page1Controller´
}).
.otherwise({ redirectTo: ´/´ });
$locationProvider.html5Mode(true);
});
index.html:
<body>
<div ng-view> Route content will be here </div>
main.html:
<h1>main page</h1>
<a href=”/page”>goto to sub page</a>
page.html:
<h1>Page1 </h1>
<a href=”/”>back to main page</a>
40. ngResource
Factory service which creates a resource object that lets
you to interact RESTful API.
Makes data handling object oriented.
var User = $resource(
‘/api/user/:id’,
{ id: ‘@_id’ },
{
update: { method: ‘PUT’ }
});
var person = new User({
firstName: ‘John’,
lastName:’doe’
});
person.$save();
person.lastName = ‘Doe’;
person.$update();
var person = new User({
firstName: ‘John’,
lastName:’doe’
});
person.$save(); // POST: ‘/api/user’
person.lastName = ‘Doe’;
person.$update(); // PUT: ‘/api/user/1’
// GET: ’/api/user?firstName=John’
var users = User.query({ firstName: ‘John });
var john = User.get({ id: 1234 }, function() {
john.lastLogin = new Date();
john.$update();
});
43. ngAnimate
Adds animation hooks for common directives such as
ngRepeat, ngView and ngShow.
Also pays attention to CSS class changes with ngClass by
triggering add and remove hooks.
When change is triggered it places state CSS class, like
ng-hide, and end state ng-hide-active. And after
animation is ended it removes those classes
46. Testing
AngularJS is designed that applications are testable.
Dependency Injection makes testing easier, by allowing
inject mock instead of real module.
47. Unit testing with Karma
my-ctrl.js:
angular.module('myApp',[])
.controller('myCtrl', function( $http ) {
var _this = this;
$http.get('/api/data').success(function(data) {
_this.data = data;
});
this.isOk = function() {
return this.data && this.data.ok;
}
});
my-ctrl.spec.js:
describe('controller:myCtrl', function() {
beforeEach( module('myApp') );
it('should fetch data from server and return ok',
inject(function($controller, $httpBackend) {
$httpBackend
.when('GET', '/api/data')
.respond({ ok: true });
$httpBackend.expectGET('/api/data');
var ctrl = $controller( 'myCtrl' );
expect(ctrl.isOk()).toBe(false);
$httpBackend.flush();
expect(ctrl.isOk()).toBe(true);
})
);
});
48. Dependency Injection in testing
it('should fetch data from server and return ok', inject(function($controller) {
var ctrlCB;
var myHttpMock = {
get: function() {
return {
success: function(cb) { ctrlCB= cb; }
};
}
}
var ctrl = $controller( 'myCtrl', { $http: myHttpMock } );
expect(ctrlCB).not.toBe(undefined);
cb( { ok: true } );
expect(ctrl.isOk()).toBe( true );
}));
49. End-to-end testing with protractor
describe('password view', function() {
it('should show error when too short input', function() {
browser.get('http://localhost:63342/angular-training/protractor/index.html');
element(by.model('user.password')).sendKeys('test');
var messages = element(by.id('password.error'));
expect(messages.getText()).toContain('short');
element(by.model('user.password')).sendKeys('test12345ABC-');
element(by.buttonText(‘save’)).click();
});
});
50. Best practices
● Design UI/HTML first!
Create HTML first and then just add functionality with
Angular. Style guide + UI mock-ups
● Avoid using $scope directly
By eliminating usage of $scope, code is closer to 2.0
style
● Avoid using ng-controller in HTML
Use through route or directives, do not add them
directly.
● Testing is easy!
Write tests for your code / site
51. Best practices
● If repeating elements in HTML, create directive for them
● Create services and use $resource to access server APIs
● Do not format data in the controllers, which will be displayed in the
view, instead use filter. Example, localisation, date/time, currency, etc.
Create filters that do it for you, and you can then modify those filters
and reflect changes to whole site.
● Avoid long lists which contains lots of bind data, that can cause
performance issues. Use paging to limit elements, if data changes in
page, otherwise use one-time binding (Angular 1.3), or libraries like
‘bindonce’ for Angular 1.2
● If you are binding without dot, you are probably doing something
wrong. {{ name }} = BAD, {{ user.name }} = GOOD
● Keep code structured
52. Caveats
● 2000 watches is considered as saturation point, after that page
rendering may seem slow
● Use directive isolated scope only when needed. Specially with
transclude, it can cause problems not to be able to access variables
● Namespace
Modules does not add namespace for functions. Plan function naming
(controller/service/directive/filter)
● Dependency Injection and javascript minify
DI breaks when minified. Declare in array syntax or use
ngAnnote/ngMin
● When using 3rd party libraries etc, remember to call $apply to get
changes render to page
53. Tools & Utilities for AngularJS
Boilerplates
https://github.com/SC5/gulp-bobrsass-boilerplate/tree/angularjs
https://github.com/DaftMonk/generator-angular-fullstack
Testing:
http://angular.github.io/protractor/#/
http://karma-runner.github.io/0.12/index.html
http://www.ng-newsletter.com/advent2013/#!/day/19
Build and minification:
https://github.com/olov/ng-annotate
54. More about AngularJS
Community in Helsinki capital area
https://www.facebook.com/groups/helsinkijs/
http://frontend.fi/
AngularJS Primer
https://www.airpair.com/angularjs/posts/angularjs-tutorial
https://thinkster.io/angulartutorial/a-better-way-to-learn-angularjs/
http://lostechies.com/gabrielschenker/2013/12/05/angularjspart-1/
Blogs that have good information about AngularJS:
http://www.yearofmoo.com/
http://www.jvandemo.com/
Good reads:
http://sc5.io/posts/how-to-implement-loaders-for-an-angularjs-app
http://teropa.info/blog/2014/11/01/why-i-think-angular-2-will-still-be-angular.html
56. Test setup
● Install Node.js for test server
http://nodejs.org/download/
● Download and extract training examples
https://docs.google.com/a/sc5.io/uc?
authuser=0&id=0B_18Pna_ughFNWVZaUV1amV6bjA&export=download
● Go to exercises folder and execute commands
> npm install
> npm start
● Open local web server with browser
http://localhost:3000/