Code Monkey home page Code Monkey logo

angular-load's Introduction

angular-load

Dynamically load scripts and CSS stylesheets in your Angular.JS app.

Copyright (C) 2014, 2015, Uri Shaked [email protected]

Build Status Coverage Status

Installation

You can choose your preferred method of installation:

  • Through bower: bower install angular-load --save
  • Through npm: npm install angular-load --save
  • Download from github: angular-load.js

Usage

Include angular-load.js in your application.

<script src="bower_components/angular-load/dist/angular-load.min.js"></script>

Add the module angularLoad as a dependency to your app module:

var myapp = angular.module('myapp', ['angularLoad']);

You can also use ES6 or CommonJS

import angularLoad from 'angular-load';
// or
var angularLoad = require('angular-load');

var myapp = angular.module('myapp', [angularLoad]);

angularLoad service directive

The angularLoad service provides three methods: loadScript(), loadCSS() and unloadCSS().

Call the loadScript() and loadCSS() methods to load a script or a CSS stylesheet asynchronously into the current page. Both methods return a promise that will be resolved once the resource (script or stylesheet) has been loaded. In case of an error (e.g. HTTP 404) the promise will be rejected.

Call the unloadCSS() method to unload a CSS stylesheet from the current page. This method return boolean value, specifying whether the given stylesheet URL could be located in the page and has been unloaded. In case of trying to remove non-existent resource the function will return false

Usage example:

angularLoad.loadScript('https://mysite.com/someplugin.js').then(function() {
	// Script loaded succesfully.
	// We can now start using the functions from someplugin.js
}).catch(function() {
    // There was some error loading the script. Meh
});

Collaborators

Uri Shaked [email protected], Colm Seale [email protected]

License

Released under the terms of MIT License:

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the 'Software'), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED 'AS IS', WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

angular-load's People

Contributors

benmarch avatar cseale avatar davidchin avatar dougmoscrop avatar francisrath avatar martinnuc avatar paolodm avatar realityking avatar urish avatar zlalanne avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

angular-load's Issues

render-blocking CSS

After testing my website on google page speed insight I decided to use angular-load to remove the render blocking CSS.

However, even when I am using angular-load, google still detects render blocking css.
Is this really making css load asynchronously?

Here is a snipet of my code:

      $stateProvider
        .state('main', {
          url: '/',
          abstract: true,
          templateUrl: 'main/main.html',
          controller: 'MainCtrl',
          resolve:{
            load: ['angularLoad', function(angularLoad){
              return angularLoad.loadCSS('<%= asset_path "normalApp.css" %>')
            }]
          }
        })

Prevent loading of duplicate resources

Hello!

As far as I can see, this service will add any specified resource every time the method is called, even if that resource was already added.

Maybe we should ignore "duplicate" calls and just fire the promise immediately?

Is it platform independent?

Hello! Thanks for this module!

I'm just curious, you are using onload event in order to detect when script or stylesheet loads. Is it compatible with all current platforms/browsers?

I've just read a very comprehensive article of how it is difficult to detect when external resource is loaded in a cross-platform way and was surprised that you are using such a straightforward approach. Can you elaborate please? Thanks!

Bower.json limits angularLoad to no greater then 1.5.x

I ran into an issue during a bower install that had some conflicts. I don't believe it's necessary to limit this module to less then 1.6.0

I tested the angularLoad service code in my current AngularJS 1.6.5 project by creating a new service and copying/pasting your code into it. The loadScript functions works wonderfully in 1.6.5

I'm assuming, you can remove the restriction from the bower.json file, as this module and service should function normally on 1.6.x

Maybe I'm wrong? I haven't tested any of the other functions (all I needed was the loadScript).

The code in question:

"dependencies": {
   "angular": ">=1.0.0 <1.6.0"
},

Change too:

"dependencies": {
   "angular": ">=1.0.0"
},

I can submit a PR if you wish.... just let me know

ReferenceError - undefined function

I'm using anuglar-load to load the SlidingMarker API after my google maps API has loaded asycnohornly in an angular controller. https://github.com/terikon/marker-animate-unobtrusive#api

This does not throw an error but when I try to use the plugin in the controller I get a ReferenceError. Interestly, I can call new SlidingMarker inside the chrome developer console without any issues.
ionic.bundle.js:26771 ReferenceError: SlidingMarker is not defined


            var marker = new SlidingMarker({
                position: myLatlng,
                map: map,
                title: "I'm sliding marker",
                duration: 2000,
                easing: "easeOutExpo"
            });

IS there some scoping issue going on here?

invalid-meta angular-load is missing "ignore" entry in bower.json

I just installed angular-load through bower and got a warning message:

bower angular-load#*      invalid-meta angular-load is missing "ignore" entry in bower.json

The complete output was as follows

bower angular-load#*        not-cached git://github.com/urish/angular-load.git#*
bower angular-load#*           resolve git://github.com/urish/angular-load.git#*
bower angular-load#*          download https://github.com/urish/angular-load/archive/0.4.0.tar.gz
bower angular-load#*           extract archive.tar.gz
bower angular-load#*      invalid-meta angular-load is missing "ignore" entry in bower.json
bower angular-load#*          resolved git://github.com/urish/angular-load.git#0.4.0
bower angular-load#~0.4.0      install angular-load#0.4.0

Using bower 1.6.7.

Change module name to something more generic

I am proposing changing the module name from "urish.load" to something more meaningful. When I look back at my app dependencies I am unclear about what "urish.load" is at first glance, something more fitting like "angular.load" or "angularLoad" would be a better solution.

Unknown Provider

Hello,

Thank you for this great plugin!
I am facing a weird issue and unable to detect its source. I hope you could help.

  1. I added the angular-load.js file in the .html
  2. I created a service that depends on angularLoad

However, I get the following error when reloading the HTML page:
"Unknown provider: angularLoadProvider <- angularLoad <- AsyncLoadService"

Could you please advise?

Regards,

Unload CSS

Hello!

The ability to unload the CSS files would be great )

Looking for a new maintainer

This project needs some love, and I can no longer find the time required to maintain it. If anybody wants to stand up as a new maintainer, please comment here. Thanks!

Not compatible with Angular 1.6.4

Got error when installing via bower. I think the error is caused by:

dependencies: {
angular: '>=1.0.0 <1.6.0'

Could you please confirm?

Remove scripts from DOM

Would be nice to be able to remove scripts from the DOM once the page/url changes. This way the DOM doesn't end up with a ton of script tags. Don't think this is a huge performance concern, just a nice feature.

Update naming conventions

loadCSS() and unloadCss() use different naming conventions.

I suggest changing unloadCss() to unloadCSS() to follow the same convention and avoid confusion, or vice versa.

Release 0.4.2

Is there a planned release for 0.4.2? I'd like to use unloadCSS but it's not available in 0.4.1, the last release available on github and bower.

Re-load or unload script?

Hi, I am in a situation where I need to either force a reload of a script, or unload and load it again.

Is there a way to add this?

Additional attributes of created element

var attrs = {
  id: 'dropboxjs',
  dataset: {
    appKey: 'dropbox_app_key'
  }
};

angularLoad.loadScript('https://www.dropbox.com/static/api/2/dropins.js', attrs).then(function () {
  Dropbox.choose(..);
});

And the created element would contain:

<script src="https://www.dropbox.com/static/api/2/dropins.js" id="dropboxjs" data-app-key="dropbox_app_key"></script>

Those attributes are mandatory to load dropbox js api. If you think this is worth I can make a PR.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.