angular-route-scripts

This is a simple module for AngularJS (based on angular-route-scripts) that provides the ability to have route-specific JS scripts, by integrating with Angular's built-in `$routeProvider` service.
Homepage:
0 people use it
Author: 3010323?v=3 avenda

angular-route-scripts

This is a simple module for AngularJS (based on angular-route-styles) that provides the ability to have route-specific JS scripts, by integrating with Angular's built-in $routeProvider service.

What does it do?

It allows you to declare partial-specific or route-specific scripts for your app using Angular's built-in $routeProvider service. For example, if you are already using $routeProvider, you know that it allows you to easily setup your SPA routes by declaring a .when() block and telling Angular what template (or templateUrl) to use for each route, and also which controller to associate with that route. Well, up until now, Angular did not provide a way to add specific JS scripts that should be dynamically loaded when the given route is hit. This solves that problem by allowing you to do something like this:

How to install:

Using bower:

bower install angular-route-scripts

OR

Using GitHub:

git clone https://github.com/avenda/angular-route-scripts

1) Include the route-scripts.js file to your index.html file

2) Declare the 'routeScripts' module as a dependency in your main app

NOTE: you must also include the ngRoute service module from angular, or at least make the module available by adding the angular-route.js script to your html page.

NOTE: this code also requires that your Angular app has access to the <route-scripts> element. Typically this requires that your ng-app directive is on the <html> element. For example: <html ng-app="myApp">.

3) Add your route-specific scripts to the $routeProvider in your app's config

Things to notice: * Specifying a JS property on the route is completely optional, as it was omitted from the '/some/route/2' example. If the route doesn't have a JS property, the service will simply do nothing for that route. * You can even have multiple page-specific scripts per route, as in the '/some/route/3' example above, where the JS property is an array of relative paths to the scripts needed for that route.

How does it work?

Route Setup:

This config adds a custom JS property to the object that is used to setup each page's route. That object gets passed to each '$routeChangeStart' event as .$$route. So when listening to the '$routeChangeStart' event, we can grab the JS property that we specified and append/remove those <script /> tags as needed.

Custom Head Directive:

This directive does the following things:

  • It compiles (using $compile) an html string that creates a set of tags for every item in the scope.routescripts object using ng-repeat and ng-src.
  • It appends that compiled set of <script /> elements to the <route-scripts> tag.
  • It then uses the $rootScope to listen for '$routeChangeStart' events. For every '$routeChangeStart' event, it grabs the "current" $$route object (the route that the user is about to leave) and removes its partial-specific JS file(s) from the <route-scripts> tag. It also grabs the "next" $$route object (the route that the user is about to go to) and adds any of its partial-specific JS file(s) to the <route-scripts> tag.
  • And the ng-repeat part of the compiled <script /> tag handles all of the adding and removing of the page-specific scripts based on what gets added to or removed from the scope.routescripts object.
comments powered by Disqus
This page was last updated about 2 years ago.