0

I'm learning Angularjs and I have 2 templates pages - a login.html page and an index.html page.

I'm using this directive - https://github.com/pablojim/highcharts-ng to create a chart on my index.html page.

The problem i'm having, is that I don't want to have to include <script src="js/highcharts-ng.js"></script> in my login.html page because it's not used on that page, but with the code I have below, I get an error if i don't have this script included.

How can I move the 'highcharts-ng into just 1 controller rather than into my entire app?

app.js

var myezteam = angular.module('myezteam', ['highcharts-ng']); //<-- Don't want highcharts-ng here

dashboard.js

myezteam.controller('DashboardController', ['$scope', '$http', 'myezteamBase', function($scope, $http, myezteamBase) {
...

I tried this but it gives me this error: Uncaught SyntaxError: Unexpected token -

myezteam.controller('DashboardController', ['$scope', '$http', 'myezteamBase', 'highcharts-ng', function($scope, $http, myezteamBase, highcharts-ng) {
    ...
Improve this question
4
  • 1
    modules don't get injected in controllers, quite the opposite. Looking in wrong place. Declare different module dependencies on each page...one with ['highcharts-ng'] and one just [] Commented Nov 16, 2013 at 18:02
  • Can you provide an example. I have a different controller per page if that's helpful at all. Commented Nov 16, 2013 at 18:09
  • can leave the controllers in one file. You are only caring about the dependency injection in app.js. Could use 2 different app.js files, or set a global variable in script tag on each page and check that value using conditional in app.js to set correct module dependency Commented Nov 16, 2013 at 18:15
  • @charlietfl Please make your comment an answer (and possible add some detail). I ended up creating 2 separate modules - 1 for the login page, and 1 for the rest of the pages and the login page module does NOT use the dependency 'higcharts-ng' while the other module does. Commented Nov 17, 2013 at 20:05

3 Answers 3

Reset to default
1

Simplest approach is use a different module declaration on each page with different dependencies as required

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

Comments

0

Keep in mind you need to change the way of thinking about "loading" because angular is for SPA (single page applications), you usually load all the app at once it doesn't matter if you are at login view or any other view.

I'll recommend you to check this kind of structure https://github.com/angular-app/angular-app where they have different "modules" with their own dependencies for different sections of the app, anyway the whole app gets loaded at once.

If you would prefer to have a login page that doesn't load all the app yet, maybe you could just have that page as plain html/jquery and after login, redirect to angular app.

Improve this answer

1 Comment

From my understanding, AngularJS does not have to only be a SPA. You can use parts of it if you want. I'd just like to not have to include highcharts-ng on the login page if i'm not using it. I've looked at the angular-app, but there's a lot of stuff going on there and i'm just looking for a simple to understand explanation and solution to my present issue.
0

try this method for solution Uncaught SyntaxError 

myezteam.controller('DashboardController',
    ['$scope', '$http', 'myezteamBase', 'highcharts-ng',
        function($scope, $http, myezteamBase, highcharts)

you can change name of parameter in your function when define dependency with array method

Improve this answer

3 Comments

That causes this error: Error: Unknown provider: highcharts-ngProvider <- highcharts-ng
@Catfish have you solved Error: Unknown provider: highcharts-ngProvider <- highcharts-ng ? \
@TomaszWaszczyk-PantaRhei i'm sure i did but couldn't tell you how since it's been years now.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.