Javascript – Importing plain javascript libraries in an AngularJs application

angularjsgithubjavascriptlibraries

I am working on an AngularJs project which is getting bigger very fast.

Currently I need to store some user data, so I was using $localStorage for Angular.

But I had a problem, as the application is saving a big amount of data, it is hanging the browser some seconds which is very annoying.

Searching for asynchronous uses of localStorage I've found a bunch of people saying that it not possible to use it. But I managed to found some plain javascript implementations on GitHub:

localForage – by Mozilla
Async Local Storage – by a guy who works at Google

There is an Angular implementation which is based on what Mozilla provides, but the build is failing and I want to use something more stable due to the importance of the project.

Then I came to this doubt, how should I use plain/vanilla javascript inside an Angular app?

I know that it is discouraged to use jQuery in the way people normally are "tempted" to use. How should I organize my pure javascript libraries in my application in a way that I can still see it very organized and fitting in the "Angular Way"?

EDIT: I know I have given you a fairly specific example about my data storage problem and some people might want help me with this, I really appreciate that (seriously). But unfortunately this is not the kind of answer I expect, since it does not have any relation with my real question. Please consider that even if I solve my data problem on my own, I will still want to know what are the best practices of including plain javascript code on my Angular Apps (that's the reason I've posted it here and not in StackOverflow). I could not find any good articles or questions here about it. I want the power of thinking of all great developers out there to help me, but most of all, help the community. I really think that good answers to this question could help a great amount of people, and that is what StackExchange is all about.

Best Answer

You might like Require.js. I don't believe there is a "standard Angular way" of importing code because they figure you'll use any of the other techniques:

Concatenate and minify using Bower
Import using regular script tags
Use a loading library like Require.js
Just define your own stuff as services in Angular

You also might want to read http://oblongmana.com/articles/angular-third-party-injection-pattern/ as it describes a pattern for Angularizing third party libraries, which are just plain old JavaScript.

Folder Structure

your-project/
  apps/
    global.html
    app1/
      index.html
      app1.module.js
      app1.js
      parts/
        foo.js
        foo.html
        ...
    app2/
  libs
    lib1/
      lib1.module.js
      parts/
        directive1.js
        directive1.html
    lib2/
  third-party/

Configure your server web framework to find apps/app1/index.html when a request for /app1 comes in. Use friendly URLs (e.g. the-first-application/ instead of app1/ and map them using your server technology if required.
Your server technology must include global.html in index.html because it contains the vendor includes (see below).
Include the assets required by the respective app in index.html (see below).
Put the ng-app and the root <div ui-view></div> in the index.html.
Every app and lib is a separate angular module.
Every app gets a <app-name>.module.js file that contains the angular module definition and dependency list.
Every app gets a <app-name>.js file that contains the modules' config and run blocks, and the routing config as part of it.
Every app gets a parts folder that contains the applications' controllers, views, services and directives in a structure that makes sense for the specific app. I don't consider sub-folders like controllers/, views/ etc helpful, because they don't scale, but YMMV.
Libs follow the same structure as apps, but leave things out that they don't need (obviously).

Start out with services and directives within the app where they are used. As soon as you need something in another app as well, refactor to a library. Try to create functionally consistent libraries, not just all-directive or all-services libraries.

Assets

I minify both JS and CSS files for release builds but work with unminified files during development. Here's a setup that support this:

Manage vendor includes globally in global.html. This way, the heavy stuff can be loaded from cache when navigating between SPAs. Make sure caching works appropriately.
Per-SPA assets are defined in index.html. This should only include the app-specific files as well as the used libraries.

The folder structure above makes it easy to find the right files for the minification build steps.

Best Answer

Related Solutions

Javascript – How secure is localstorage

Design – AngularJS: structuring a web application with multiple ng-apps

Folder Structure

Assets

Related Topic