SPA using AngularJSCommon Features and Issues

Hello world!I am San-tho-sh Kumar Srinivasan

8 Years of Software development experience as full stack developer

3 years developing SPAs using AngularJS

You can find me at:@santhotech inGithub and twitter

A single-page application (SPA) is a web application or web site that fits on a single web page

with the goal of providing a more fluid user experience similar to

a desktop application -Wikipedia

Advantages of SPA

▪Easy Separation of Concerns▪Easy Code Maintenance▪Easy to test independently▪Easy to switch server side any time

Specifically with Angular JS

▪ Easy URL routing with HTML5 mode support

▪ Perfect for Prototyping an Idea

Comparison between SPA and Conventional MVC

Conventional MVC Single Page Applications

URL routing is handled in the Server side

URL routing is handled in the client side

Views are managed and handled by the server

Server responds with all the views in the first request and all view handling is done in cilent

Most of the business logic is done on the server

Most of the business logic is kept on the client side

Server side code is injected in the views in some form

No server side code loads in the client views.

1Project Structure

How do you get started with a SPA?

Load it as part of your server side framework

You can handle the call to your ‘root’ URL and load the spa’s index page and let it take care of further requests

Two Common Methods

Go stand alone and load it a independent HTML/JS application

Just create a stand alone angular application and make it respond to root requests. Your angular app makes further requests to data from an API backend.

Impacts of choosing one or the other method

AuthenticationYou cannot use your server side’s authentication method if you create an independent application.

Request HandlingIf you load your angular app as part of your server side app, you have to be careful on how you separate your rest URLs and your view URLs

File UploadsCross domain file uploads have restrictions and you need to make sure that your server is configured to allow that.

2CRUD Operations

CRUD operations are a breeze with Angular

Make use of ngResource module or the RestAngular module

AngularJS comes with several modules and plugins that makes your life easier when working with REST APIs.

Just Rest

Work with Model Objects as you would in the server side

These plugins gives you the ability to work with JS objects as you would on any server side frameworks by adding convenience methods

.create

.update

.delete

.list

.get…

3Authentication and Authorization

AngularJS makes it easy to handle security

Choose a Scheme that fits you

Server Side AuthIf your angular app is loaded as part of your server side, you can make use of the same auth scheme

JSON Web TokensIf your app is an independent app, then this is one of the best methods. Most server side frameworks supports this.

OAuth or your OwnYou can also try to roll out your own auth schemes and use it with angular or use one of the available Oauth schemes.

• Microsoft ADALIf you need to use azure active directory ADAL looks promising

4Make use of Directives

Custom directives enhances angular

applications

Some common uses of Directives

UI Manipulation

Anything that changes the color, dimensions, or any other physical property of the components

Recurring Components

If there is a component that needs to be used in multiple views, directives can be u

Plugin Wrappers

Jquery plugins that you *have to* use, then you can create a directive to wrap the plugin feature

5File Uploads

Custom directives enhances angular

applications

Some things to watch out

Make sure CORS is enabled

Your CORS filter on the server should be enabled on the application/server level or both

CSRF Tokens

Some frameworks have CSRF token verification causing uploads to fail

Ng-file-upload Angular-file-

upload

Common Plugins

6Lazy Loading Components

Improves load time

7Watch out for Nested Scopes

Makes it hard to debug

8Make use of $broadcast and $emit

But don’t over use it

Other Useful Links

▪ Angular Style guidehttps://github.com/johnpapa/angular-styleguide/

blob/master/a1/README.md▪ Angular Tips and Hints

http://www.bennadel.com/blog/2439-my-experience-with-angularjs---the-super-heroic-javascript-mvw-framework.htm

Thanks!ANY QUESTIONS?

CREDITS

Special thanks to all the people who made and released these awesome resources for free:▪ Presentation template by SlidesCarnival▪ Photographs by Unsplash