Loading javascript inside angular ui view

Question

I'm using angular ui routing to load templates inside a view. Each template has it's own javascript code specific for that page. Is there a way to load the template specific javascript code/file the moment that the template is opened? At the moment I have to add all the javascript code/files for every template in the main page.

Another solution is to use an iframe. This allows the page to load it's own javascript files. But this way the navigation doesn't work as good (page is reset when refreshed).

Example:

index.html

<!DOCTYPE html>
<html  ng-app="testApp">
<head>
    <title></title>
    <meta charset="utf-8" />
    <script src="angular.min.js"></script>
    <script src="angular-ui-router.min.js"></script>
    <script src="app.js"></script>

    <script src="template1Functions.js"></script>
    <script src="template2Functions.js"></script>
</head>
<body>
    <a ui-sref="template1">Template 1</a>
    <a ui-sref="template2">Template 2</a>

    <div ui-view></div>
</body>
</html>

template1.html

<button onclick='template1TestFunction()'>Template 1 Function</button>

template2.html

<button onclick='template2TestFunction()'>Template 2 Function</button>

app.js

angular.module('testApp', ['ui.router'])
.config(['$stateProvider', '$urlRouterProvider', function ($stateProvider, $urlRouterProvider) {
    $stateProvider
        .state('template1', {
            url: '/template1',
            templateUrl: 'template1.html'
        })
        .state('template2', {
            url: '/template2',
            templateUrl: 'template2.html'
        });
}]);

template1Functions.js

function template1TestFunction() {
alert('Template 1 works') 
};

template2Functions.js

function template2TestFunction() {
alert('Template 2 works') 
};

As you can see, I have to add the template[x]functions.js file in the index.html page. I would really like to load this from the template[x].html files.

have you tried including the .js files inside the templates rather than in index.html ? — Nitsan Baleli
– Nitsan Baleli, Commented Dec 1, 2015 at 12:20
Yes, that was my first guess too. But it doesn't seem to load the files if I do that and I get an error "Error: 'template1TestFunction' is undefined" — Martijn
– Martijn, Commented Dec 1, 2015 at 12:29

Shay · Accepted Answer · 2015-12-01 12:51:00Z

1

Sounds like what you are looking for is controller.

Keep in mind that unless you save your data using the $localStorage or a backend and then retrieve it at some point, the page will "reset" after refresh as the scope is destroyed and recreated.

I would also suggest using a build system (like grunt) to avoid using multiple js files and importing each one.

To use a controller, perform the following steps:

Add the controller to do the state definition:

    .state('template1', {
        url: '/template1',
        templateUrl: 'template1.html',
        controller: 'Temp1Ctrl'
    })

Put this in your template1Functions.js:

    angular.module('testApp').
    contoller('Temp1Ctrl', ['$scope', function($scope) {
        $scope.doSomething = function() {
            console.log('did something');
        }
    }]);

Use this instead of onclick:

    ng-click="doSomething()"

answered Dec 1, 2015 at 12:51

Shay

1046 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Martijn Over a year ago

I know about the ability to use controllers, but this would still require me to load all controller code when the user opens the index.html page. In this example I only have 2 pages, but if I were to have >100 templates, each with a controller, I would have to load all that code when the page is launched. What I would really want to use is to load the javascript that the specific template uses at the moment that template is openend.

Pjetr Over a year ago

Seems to me like don't really want to use angular. If the number of files is concerning you, might I suggest taking a look at browserify in combination with sass / gulp. At our company we're working on a larger project, all code is compiled in a single file which is currently not minified at 2.5Mb

Martijn Over a year ago

I'll look into bundeling the files with minifying and hope the total size won't grow to large. I just had hopes it was possible to only load the specific javascript file that was needed for that page. But by the responses here and hours of searching on the web I realize this just isn't possible. I already use controllers, but for a more basic example I removed them from my code.

Shay Over a year ago

I've never tried it before but it shouldn't be a problem - You can still use a controller and import the file from within the template so you would have controllers loading only when you need them. Also, you know your templates - If the data is pretty much the same data you can only switch the views and stick to the same controller

Collectives™ on Stack Overflow

Loading javascript inside angular ui view

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related