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
What does it do?
It allows you to declare partial-specific or route-specific scripts for your app using
$routeProvider service. For example, if you are already using
$routeProvider, you know that it allows you to easily setup your SPA routes by declaring
.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:
bower install angular-route-scripts
1) Include the
route-scripts.js file to your
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
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:
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?
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
- It appends that compiled set of
<script />elements to the
- It then uses the
$rootScopeto listen for
'$routeChangeStart'events. For every
'$routeChangeStart'event, it grabs the "current"
$$routeobject (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"
$$routeobject (the route that the user is about to go to) and adds any of its partial-specific JS file(s) to the
- And the
ng-repeatpart 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