AngularJS+Flask Failed to instantiate module

Question

I have been nearly everywhere looking for this, but please do forgive me if I ended up missing something. Here is my html:

<!DOCTYPE html>
<html>
<head>
    <title>PDFHandle</title>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.5/angular.js"></script>
    <script type="text/javascript" src="{{ url_for('static', filename='custom.js') }}"></script>
</head>
<body>
    {% raw %}
        <div ng-app="uploadApp" ng-controller="UploadController as uc">
            <div ng-repeat="choice in uc.choices">
                <input value="{{choice.value}}" />
            </div>
            <button ng-click="uc.addChoice()">Add</button>
        </div>
    {% endraw %}
</body>
</html>

And here is my AngularJS script:

var Try = angular.module("uploadApp", [])
.controller("UploadController", function UploadController() {
    this.choices = [{id: "choice1", value:"Hello"}];
    this.addChoice = function() {
        return this.choices.push({id:"choice"+(this.choices.length+1), value:"Hello Again"});
    };
})

The problem I'm facing is this (showing in Chrome's developer tools):

Uncaught Error: [$injector:modulerr] Failed to instantiate module uploadApp due to:
Error: [$injector:nomod] Module 'uploadApp' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.

I can run this by normally linking it with an HTML file just fine, it's just when I try to use it with a flask rendered HTML that it doesn't work. I have also tried this with other Angular IDEs and it's working fine in them as well. Like I said, just doesn't work with flask. Any help would be greatly appreciated. Thanks!

Vivz · Accepted Answer · 2017-07-16T13:02:29.707

2

Change your controller like this

var Try = angular.module("uploadApp", []);
Try.controller("UploadController", function() {
    this.choices = [{id: "choice1", value:"Hello"}];
    this.addChoice = function() {
       this.choices.push({id:"choice"+(this.choices.length+1), value:"Hello Again"});
    };
})

edited Jul 16 '17 at 13:02

answered Jul 16 '17 at 12:52

Vivz

6,625
2
17
33

Nope, this didn't work either. – Wiggy A. Jul 16 '17 at 13:04
What error are you getting? – Vivz Jul 16 '17 at 13:05
The exact same as the one mentioned in the question. It's a bit huge so I can't really put it all here, but it's basically stating all the lines in angular.js where it encountered the error. – Wiggy A. Jul 16 '17 at 13:08
I think the problem lies in your sript tag which you are trying to laod dynamically. Check your browser if that script is being loaded or not – Vivz Jul 16 '17 at 13:09
Oh boy. The script is getting loaded, but it isn't the right script. The custom.js in the static dir is not the one that's getting loaded, but rather it's loading a crazily outdated custom.js. I'm going to clear caches and try this again, and I'll let you know whether it worked or not. This is going to get chosen one way or another. – Wiggy A. Jul 16 '17 at 13:15
Yep, that was it. Thanks a lot for catching it! – Wiggy A. Jul 16 '17 at 13:29

score 0 · Answer 2 · answered Jul 16 '17 at 12:55

0

You can try like this,

angular.module("uploadApp", [])
.controller("UploadController", function UploadController() {
    this.choices = [{id: "choice1", value:"Hello"}];
    this.addChoice = function() {
        return this.choices.push({id:"choice"+(this.choices.length+1), value:"Hello Again"});
    };
})

answered Jul 16 '17 at 12:55

Sajeetharan

216,225
63
350
396

Same issue. This is what I was originally doing, but switched it to try out other stuff. – Wiggy A. Jul 16 '17 at 13:04
try wrapping entire html with {% raw %} – Sajeetharan Jul 16 '17 at 13:12

AngularJS+Flask Failed to instantiate module

2 Answers2