Scripts inside ng-view not working (JQuery is loaded before angular) when referenced from a file

Question

I'm using angular and angular-route. The index.html looks like this:

<!DOCTYPE html>
<html lang="en" ng-app="Showcase">
<head>
    <meta charset="UTF-8">
    <title>UCSD Showcase</title>
    <base href="/showcase/">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-route.min.js"></script>
    <script src="routes.js"></script>
    <script src="./js/bootstrap.min.js"></script>
    <script src="js/initGlobalHelpers.js"></script>

    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="description" content="#########################################">
    <meta name="keywords" content="###############################################">
    <meta property="og:url" content="#">
    <meta property="og:site_name" content="CSES OSS">
    <meta property="og:image" content="############################################################################################">
    <meta property="og:description" content="#">
    <meta property="og:type" content="website">
    <meta name="twitter:site_name" content="CSS OSS">
    <meta name="twitter:site" content="################">
    <meta name="twitter:card" content="summary">
    <meta name="twitter:description" content="#">
    <meta name="twitter:image" content="#">
    <meta name="image" content="#">
    <link rel="stylesheet" media="all" href="./styles/style.css">
</head>
<body>
<ng-view></ng-view>
</body>
</html>

And then for my home page when I'm using

<h1>This is the home page</h1>
<script src="home.html"></script>

I get the a warning

Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience. For more help, check https://xhr.spec.whatwg.org/. jquery.min.js:4

and an error

SyntaxError: Unexpected token < angular.js:13550

However when I replace that script that by the content of the script which basically ends up looking like:

<h1>This is the home page</h1>
<script>
    console.log('Hi!');
</script>

Then it works.

Why is this happening and how can I fix it?

Feyyaz · Accepted Answer · 2016-04-22 07:05:52Z

2

Use ngInclude instead of html script tag

<div ng-include="'home.html'"></div>

See ngInclude docs here

answered Apr 22, 2016 at 7:05

Feyyaz

5711 gold badge5 silver badges13 bronze badges

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

1 Comment

Raghav Mehta Over a year ago

I tried this. Didn't work. I'm still confused as to how this is supposed to load home.js because the docs say that it can be used to inject html (so how can we load javascript?)

Collectives™ on Stack Overflow

Scripts inside ng-view not working (JQuery is loaded before angular) when referenced from a file

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related