Introduction to Angular.JS
Download
Report
Transcript Introduction to Angular.JS
INTRODUCTION TO ANGULAR.JS
Sayed Ahmed
Computer Science and Engineering, BUET, Bangladesh
MSc, Computer Science, Canada
http://sayed.justetc.net
RECENT STUDY ON ANGULAR.JS
Checked on AngularJS and created the
following training video explaining an Angular
application
https://www.youtube.com/watch?v=5NAC6DfB1VY
Partially Read the Book: Mastering Web
Application development in AngularJS
Watched the video
Google
I/O 2013 - Design Decisions in AngularJS
https://www.youtube.com/watch?v=HCR7i5F5L8c
RECENT STUDY ON ANGULARJS
Watched this but pretty lightly
Introduction to Angular JS
https://www.youtube.com/watch?v=8ILQOFAgaXE
Pretty lightly watched
Karl Seamon - Angular Performance - NG-Conf
https://www.youtube.com/watch?v=zyYpHIOrk_Y
Tried to watch but did not finish [still in my tablet]
Security with Angular JS
https://www.youtube.com/watch?v=18ifoT-Id54
Testing Strategies for Angular JS
https://www.youtube.com/watch?v=UYVcY9EJcRs
FREE TRAINING BY US
Free Training and Education
Training and Education in Bangla:
Bangla.SaLearningSchool.com
Training and Education in English: Videos by us:
www.SaLearningSchool.com
Training and Education in English:
English.SaLearningSchool.com
Ask a question and get answers :
Ask.JustEtc.net
Offline IT Training:
University.JustEtc.net
THEORY BEHIND ANGULARJS
MVVM: Such as Angular.JS and Knockout.js
http://en.wikipedia.org/wiki/Model_View_ViewModel
Angular is actually Model View Whatever
KnockOut.js
http://en.wikipedia.org/wiki/Knockout.js
Presentation Model by Martin Fowler
http://martinfowler.com/eaaDev/PresentationModel.ht
ml (theory behind: MVVM)
ANGULAR.JS RESOURCES : RELATED JAVASCRIPT FRAMEWORK STUFF
Why Angular? and Why not Angular [Yes, checked them lightly or not]
10 reasons why use angular?
Why Does Angular.js Rock?
https://moot.it/blog/technology/frameworkless-javascript.html
These articles do worth reading [recommended]:
http://angular-tips.com/blog/2013/08/why-does-angular-dot-js-rock/
Check the total article and esp the section: Why not Angular, Why not Backbone,
Why not Ember
http://www.sitepoint.com/10-reasons-use-angularjs/
http://angular-tips.com/blog/archives/
Bite-sized web development training with AngularJS
https://egghead.io/
ANGULAR.JS RESOURCES : RELATED JAVASCRIPT FRAMEWORK STUFF
Mastering Web Application Development with
AngularJS
CRUD Application Demo with Angular
https://github.com/angular-app/angular-app
Angular.JS Wiki
http://www.packtpub.com/angularjs-web-applicationdevelopment/book
https://github.com/angular/angular.js/wiki
ANGULAR VALIDATIONS
Recent AngularJS also makes use of regular
expressions for form validations such as:
<input
type="text" ng-pattern="[a-zA-Z]" />
ANGULARJS AND BROWSER SUPPORT
AngularJS will work with the latest versions of Chrome, Firefox, Safari, and Opera, as well as Internet
Explorer version 8, 9, and 10. You will need to do some extra work for IE8
To make AngularJS Work with IE8 use the following
<html ng-app="application_name" id="application_name">
Though ng-app="application_name" is sufficient for the other browsers as mentioned in point 1; for IE
8, id attribute is also required
We cannot make IE to recognize and include templates in the following manner
<ng-include="'myInclude.tpl.html'"></ng-include>
Though, we can take a different strategy to make IE8 recognize and include templates by using
<div ng-include="'myInclude.tpl.html'"></div>
ANGULARJS AND BROWSER SUPPORT
we have to make IE8 recognize <ng-include=""> to be able to use this custom tag to
include templates. We can do that by using
<head>
<!--[if lte IE 8]>
<script>
document.createElement('ng-include');
document.createElement('ng-view');
</script>
<![endif]-->
</head>
Supporting IE7 for AngularJS
You need to do everything that you did for IE8.
AngularJS was not tested with IE7; so you need to adjust stuff as they come along
IE7 does not have many APIs commonly present in web-browsers such as JSON API
You will need libraries such as http://bestiejs.github.io/json3/ to be included in your application to
support JSON
IE6 is not supported
OPTIMIZE THE LANDING PAGE FOR ANGULAJS BASED APPLICATIONS
The Issue and Why Optimize
In general, the landing web-page should load fast to have a good
impression of the application/web-site. However, that usually requires
some extra work and tuning
If you have developed a single page web-application with AngularJS or
you have developed a single page web-based mobile application with
AngularJS, you need to optimize the landing page
It can be tricky to load and display the first page right; with mobile this
becomes more tricky. And with Angular, you have to download additional
Angular libraries that will inject information or data to make the page
look right. If not done right, you may end up showing the templates, and
lots of curly braces ( {{ user.name}} ) to your users.
For rescue, there are three helps
ng-bind : Angular Directive
ng-cloak : Angular Directive
AMD : Asynchronous JavaScript Module Loading with Require.js
OPTIMIZE THE LANDING PAGE FOR ANGULAJS BASED APPLICATIONS
Recommendations:
If your first page has lots of dynamic contents, use ng-cloak directive for the
dynamic data/information blocks that will hide those sections before AngularJS
can kick in and inject data/information. You can even place it in the body tag.
If your first page has mostly static content, use ng-bind for the static content (i.e
where you were using curly braces {{}} ). You can also assign some default values
for those static places so that before Angular kicks in the default value will be
shown. If you do not provide default values those places will be empty before
Angular fills information.
If your page has a mix of dynamic and static contents, you can use ng-cloak, and
ng-bind together.
You can use asynchronous loading of JavaScript modules. You can use smaller
JS files and link them to the pages where they are required. Now, based on the
dependencies the scripts will load asynchronously. However, if a page needs too
many of the script files, there will be more network overhead. You need to be
smart about dividing and linking those script files. Though, performance gain by
this strategy probably is debatable. You probably need to measure the
performance gain, and again in real world, is the client ready to
pay?
OPTIMIZE THE LANDING PAGE FOR ANGULAJS BASED APPLICATIONS
Another Tip
Examples of using ng-cloak
<div ng-controller="" ng-cloak>
<h1>Hello, {{name}}!</h1>
</div>
Example of using ng-bind
If the page is mostly static, put <script> at the bottom and use ng-bind
If the page is mostly dynamic, put <script> at the top and use ng-cloak
<div ng-controller="">
Hello, <span ng-bind="name"></span>!
</div>
If you use Require.js to load angular, you cannot use ng-app directive.
You need to use angular.bootstrap method from JavaScript instead
Reference:
Book: Mastering Web Application Development with AngularJS
OPTIMIZING ANGULARJS PAGE LOADING
Optimizing AngularJS Page Loading:
Optimizing web-applications for faster performance often include
reducing network activities, reducing send and receive requests over
the network/internet, and reducing data downloads. Minification of
JavaScript, CSS, and HTML files can help with that. AngularJS kind of
forces to write minification safe JavaScript, and writing array style
and annotation based function declaration is recommended.
Creating partial templates and loading related templates in
combination may help. Probably, need some experiment and
planning before than doing it on the fly. Two ways to preload
templates
1. <script> tag
2. $templateCache
OPTIMIZING ANGULARJS PAGE LOADING
You may want to read one of our other articles on optimizing landing
pages for AngularJS single page applications by usinng ng-cloak, and
ng-bind
Using Asynchronous script loader such as Require.Js does not
improve the performance a lot [according to the book as listed in the
reference section]. Hence, so far, AMD is not recomended with
AngularJS
You can check how to use Require.JS in your applications at :
http://requirejs.org/docs/start.html .
You may want to use them in non-AngularJS projects. The idea is, you
have to have a consistent project directory structure esp for
JavaScript files as recommended and specified by Require.Js. In your,
HTML file you refer to the main.js file, single entry point for loading JS
code. In that main.js, you will use Require.JS esp. require() to load
other JS files asynchronously and as required by your application.
OPTIMIZING ANGULARJS PAGE LOADING
To use Require.JS with JQuery, you can check
the following resource. The adoption may need
different considerations for a new project or for
adapting existing code for Require.JS
http://requirejs.org/docs/jquery.html
SECURING YOUR ANGULARJS APPLICATIONS
Securing Your AngularJS Applications
Some security measures can be as follows:
Take security measures at the entry and exit
points of data to and from the server
Secure the server and prevent unauthorized access to
data, and HTML
Encrypt the connection i.e https://
Prevent cross-site scripting (XSS),
Prevent cross-site request forgery (XSRF) attacks
Block JSON injections
SECURING YOUR ANGULARJS APPLICATIONS
AngularJS Templates Securing:
$templateCache
caches templates if you want to
use this. We need to remove the cache for each
user login
The following or similar stuff can help
Cache-Control:
no-cache, no-store, must-revalidate
Pragma : no-cache
Expires : 0
SECURING YOUR ANGULARJS APPLICATIONS
using https can address the snooping and man in
the middle attack
You need to prevent JSON Injection Vulnerability
to do this, you can add )]}', before your JSON,
though not valid JSON but helps to prevent JSON
injection vulnerability.
Prevent XSS attack in the client side
AngularJS escapes all HTML in text that is displayed
through the ng-bind directive, or template interpolation
(that is text in {{curly braces}}).
PERFORMANCE IMPROVEMENT OF ANGULARJS APPLICATIONS
Performance Improvement of AngularJS
Applications: Writing Robust AngulaJS
Applications
Ideally, you need to measure the performance
and apply the strategy based on the outcome.
Your intuition may be wrong unless you verify it
against real life situations and measure it.
Also, testing the performance on real or sample
data may help depending on the Application.
PERFORMANCE IMPROVEMENT OF ANGULARJS APPLICATIONS
That's right, I did not experience it, but the right
knowledge is, you need to be careful about using the
$digest loop.
Too many iterations such as 50 loops or 100 loops may
make your applications unresponsive.
The number of watches inside the $digest loops, and
how fast those watches run also affect performance a
lot.
You can either reduce the number of watches or make
the watches faster
You can also monitor memory usage by those watches.
Less memory use can make your application faster.
PERFORMANCE IMPROVEMENT OF ANGULARJS APPLICATIONS
ng-repeat directive is also performance sensitive.
If you use ng-repeat to work on collections having
100s of items, it may cause performance penalty.
So either plan and limit the entries in your
collections or write custom directives for the
purpose.
In either case, do it in such a way so that it causes
less performance penalty. You need to measure
the performance though
Your judgement also have to be right
LOCALIZATION SUPPORT IN ANGULAR : WRITING
INTERNATIONAL APPLICATIONS IN ANGULARJS
Localization Support in Angular : Writing International Applications in
AngularJS
Under the AngularJS library there is a folder i18n where en-us locale related data
are kept. If you want to use a different locale you can do it as follows. Notice the
script tag with lib/angular/angular-locale_fr-ca.js to support for fr_ca locale. The
.js file should have something as below:
angular.module('locale', ['ngLocale']) : module definition with a dependency on
the ngLocale module:
<!doctype html>
<html ng-app="locale">
<head>
<meta charset="utf-8">
<script src="lib/angular/angular.js"></script>
<script src="lib/angular/angular-locale_fr-ca.js"></script>
<script src="locale.js"></script>
</head>
<body ng-controller="LocaleCtrl">
...
</body>
LOCALIZATION SUPPORT IN ANGULAR : WRITING
INTERNATIONAL APPLICATIONS IN ANGULARJS
Related examples:
{{now | date:'fullDate'}} will return full date based on the locale as set
{{100 | currency:'€'}}
{{1000.5 | number}}
Handling Translations: The text to be translated for different language.
The primary idea is, you have to have JSON structure with key value pairs for different locales. You
need to use the keys in places where you want the translations based on the user locale.
Example:
{
'crud.user.remove.success': 'A user was removed successfully.',
'crud.user.remove.error': 'There was a problem removing a user.'
...
}
In your HTML, you can write something like below
<span>Hello, {{name}}!</span>
to
<span>{{'greetings.hello' | i18n}}, {{name}}!</span>
You do understand that you need the JSON for the locale with the key greetings.hello
----
BUILDING YOUR OWN DIRECTIVES IN ANGULARJS
Building Your Own Directives
Directives can appear as HTML elements, attributes,
comments, or CSS classes.
Examples
<my-directive></my-directive>
<input my-directive>
<!-- directive: my-directive-->
<input>
Defining a Directive
angular.module('app', []).directive('myDir', function() {
return myDirectiveDefinition;
});
BUILDING YOUR OWN DIRECTIVES IN ANGULARJS
Writing a Button Directive
describe('button directive', function () {
var $compile, $rootScope;
beforeEach(module('directives.button'));
beforeEach(inject(function(_$compile_, _$rootScope_) {
$compile = _$compile_;
$rootScope = _$rootScope_;
}));
it('adds a "btn" class to the button element', function() {
var element = $compile('<button></button>')
});
});
($rootScope);
expect(element.hasClass('btn')).toBe(true);
});
USING THE BUTTON DIRECTIVE
Using the button directive
<button type="submit">Click Me!</button>
Implementing a Custom Validation Directives
Now we have our tests in place, so we can implement the functionality of the
directive:
myModule.directive('validateEquals', function() {
return {
require: 'ngModel',
link: function(scope, elm, attrs, ngModelCtrl) {
function validateEqual(myValue) {
var valid= (myValue === scope.$eval(attrs.validateEquals));
ngModelCtrl.$setValidity('equal', valid);
return valid ? myValue : undefined;
}
USING THE BUTTON DIRECTIVE
ngModelCtrl.$parsers.push(validateEqual);
ngModelCtrl.$formatters.push(validateEqual);
scope.$watch(attrs.validateEquals, function() {
ngModelCtrl.$setViewValue(ngModelCtrl.$vi
ewValue);
});
}
};
});
TOOLS: RESOURCES AND REFERENCES
Plunker
http://plnkr.co/
Batarang
RESOURCES AND REFERENCES
http://todomvc.com/
http://karma-runner.github.io/
https://github.com/vojtajina/testacular/
Bindonce