1
votes

I have an angular app and I have implemented node into it later on.

Now when I try to run the node app I receive this kind of errors:

SyntaxError: expected expression, got '<'

jquery.min.js (regel 1)

ReferenceError: angular is not defined

angular.module('controllers').controller('ChallengeCtrl', ['$scope', 'auth',

This is my index.html file:

<!DOCTYPE html>
<html lang="en"  ng-app="eva">
<head>
    <meta charset="UTF-8" name="viewport" content="initial-scale=1"/>
    <title>EVA - eet plantaardig!</title>
    <link rel="shortcut icon" type="image/x-icon" href="../styles/favicon.ico">

    <!-- STYLES -->

    <link rel="stylesheet" type="text/css" href="../styles/public/js/lib/angular-material/angular-material.min.css">
    <link rel="stylesheet" type="text/css" href="../styles/animate.min.css" >

    <link rel="stylesheet" type="text/css" href="../styles/font-awesome/css/font-awesome.min.css">
    <link rel="stylesheet" type="text/css" href="../styles/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="../styles/public/js/lib/bootstrap-social/bootstrap-social.css">

    <link rel="stylesheet" type="text/css" href="css/style.css">



</head>
<body layout="column" ng-controller="AppCtrl" layout-fill>

    <!-- ANGULAR MATERIAL LOADING -->
    <md-toolbar layout="row">
        <div class="md-toolbar-tools ng-scope" ng-controller="NavCtrl as demo">
            <md-button ng-click="toggleSidenav('left')"  class="md-icon-button" ng-show="isLoggedIn()" aria-haspopup="true" aria-expanded="true"
                    aria-label="sidebar menu">
                <!--<md-icon aria-label="Menu" md-svg-icon="https://s3-us-west-2.amazonaws.com/s.cdpn.io/68133/menu.svg"></md-icon>-->
                <md-tooltip md-direction="bottom">Gebruikers Menu</md-tooltip>
                <span class="glyphicon glyphicon-menu-hamburger"></span>
            </md-button>

            <span>
                <md-button md-no-ink href="#/index" aria-label="logo">
                    <img src="../styles/images/logo/48x48.png" alt="logo" >
                </md-button>
            </span>
            <!-- fill up the space between left and right area -->
            <span flex></span>

            <md-fab-speed-dial md-open="demo.isOpen" md-direction="left" ng-class="md-fling"
                               ng-mouseenter="demo.isOpen = true" ng-mouseleave="demo.isOpen = false">
                <md-fab-trigger>
                    <md-button aria-label="menu" class="md-fab md-warn">
                        <md-tooltip md-direction="bottom">Menu</md-tooltip>
                        <span class="glyphicon glyphicon-menu-hamburger"></span>
                    </md-button>
                </md-fab-trigger>

                <md-fab-actions>
                    <md-button aria-label="Login" class="md-fab md-raised md-mini" ng-hide="isLoggedIn()" href="#/login">
                        <md-tooltip md-direction="bottom">Log in</md-tooltip>
                        <span class="glyphicon glyphicon-user"></span>
                    </md-button>
                    <md-button aria-label="Registreer" class="md-fab md-raised md-mini" ng-hide="isLoggedIn()" href="#/register">
                        <md-tooltip md-direction="bottom">Registreer</md-tooltip>
                        <span class="glyphicon glyphicon-plus"></span>

                    </md-button>
                    <md-button aria-label="Profiel" class="md-fab md-raised md-mini" ng-show="isLoggedIn()" href="#/profile">
                        <md-tooltip md-direction="bottom">Profiel</md-tooltip>
                        <span class="glyphicon glyphicon-user"></span>
                    </md-button>
                    <md-button aria-label="Logout" class="md-fab md-raised md-mini" ng-show="isLoggedIn()"
                            ng-click="logOut()">
                        <md-tooltip md-direction="bottom">Log out</md-tooltip>
                        <span class="glyphicon glyphicon-off"></span>

                    </md-button>
                </md-fab-actions>
            </md-fab-speed-dial>

        </div>
    </md-toolbar>

    <div layout="row" flex>

        <!-- SIDENAV -->
        <md-sidenav layout="column" class="md-sidenav-left md-whiteframe-z2 md-closed ng-scope ng-isolated-scope" md-component-id="left"
                    ui-view="sidebarLeft" ng-controller="NavCtrl" layout-fill>

            <md-toolbar class="sidebar-left-toolbar ng-scope ">
                <div class="md-toolbar-tools layout-align-start-center layout-row">
                    <div class="sidebar-left-logo">
                        <img  src="../styles/images/logo/32x32.png" alt="logo" width="24px">
                    </div>
                    <span flex></span>
                    <div>
                        {{ currentUser() }}
                    </div>


                </div>
            </md-toolbar>

            <div layout="row" flex id="contentSideNav">
                <div layout="column" flex>
                    <md-content layout="column" flex class="md-padding">
            <ul>
              <li>
                <md-button href="#/profile"  layout-fill>
                  Profiel
                </md-button>
              </li>
              <md-divider></md-divider>
                            <li>
                <md-button href="#/challenges"  layout-fill>
                  Challenges
                </md-button>
              </li>
              <md-divider></md-divider>
                        </ul>
                    </md-content>
                </div>
            </div>

        </md-sidenav>

        <div layout="column" flex id="content">
            <md-content layout="column" flex class="md-padding">
                <ui-view></ui-view>
            </md-content>
        </div>
    </div>


<!-- homepage -->
<script type="text/ng-template" id="/home.html"></script>

<!-- loginpage -->
<script type="text/ng-template" id="/login.html" ng-controller="UserCtrl"></script>

<!-- register page -->
<script type="text/ng-template" id="/register.html" ng-controller="UserCtrl"></script>

<!-- challengespage -->
<script type="text/ng-template" id="/challenges.html" ng-controller="ChallengeCtrl"></script>

<!-- profiel page -->
<script type="text/ng-template" id="/profile.html" ng-controller="ProfileCtrl" ></script>


    <!-- footer -->
<footer>
    <div layout="row" layout-align="space-around center">
        <div id="social" layout="row" layout-align="space-around center">
            <a href="https://www.facebook.com/evavzw" target="_blank"><i class="fa fa-facebook-f"></i></a>
            <a href="https://twitter.com/evaveggies" target="_blank"><i class="fa fa-twitter"></i></a>
            <a href="https://www.pinterest.com/evaveggies/" target="_blank"><i class="fa fa-pinterest-p"></i></a>
        </div>

        <div>
            <p class="text-center">© Copyright 2015 - Projecten Groep 6</p>
        </div>
    </div>
</footer>

<!-- JS files integration -->
<script type="text/javascript" src="../styles/public/js/lib/jquery/dist/jquery.min.js"></script>

<script type="text/javascript" src="../styles/angular/angular.min.js"></script>
<script type="text/javascript" src="../styles/angular/angular-ui-router.min.js"></script>
    <script type="text/javascript" src="../public/js/lib/angular-animate/angular-animate.min.js"></script>
    <script type="text/javascript" src="../public/js/lib/angular-aria/angular-aria.min.js"></script>
    <script type="text/javascript" src="../public/js/lib/angular-material/angular-material.min.js"></script>
<script type="text/javascript" src="../styles/angular/angular-messages.min.js"></script>

<script type="text/javascript" src="../styles/bootstrap/js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/controllers/bootstrap.js"></script>
<script type="text/javascript" src="js/controllers/ChallengeController.js"></script>
<script type="text/javascript" src="js/controllers/AppController.js"></script>
<script type="text/javascript" src="js/controllers/MainController.js"></script>
<script type="text/javascript" src="js/controllers/NavController.js"></script>
<script type="text/javascript" src="js/controllers/UserController.js"></script>
<script type="text/javascript" src="js/controllers/ProfileController.js"></script>
<script type="text/javascript" src="js/factories/bootstrap.js"></script>
<script type="text/javascript" src="js/factories/AuthInterceptorFactory.js"></script>
<script type="text/javascript" src="js/factories/AuthFactory.js"></script>

<script type="text/javascript" src="js/app.js"></script>

</body>

</html>

At first I thought that the links to all the files were incorrect from the index.html, but they seem fine so I don't know what the problem is.

Additional info screen:

Additional screen

1

1 Answers

0
votes

I think the issue is you have mention wrong reference path for angular libraries.

Like it should point to /js/lib rather than pointing to /styles(which has css)

<script type="text/javascript" src="../js/lib/angular/angular.min.js"></script>
<script type="text/javascript" src="../js/lib/angular/angular-ui-router.min.js"></script>

Addtional note is you can't have ng-controller="ProfileCtrl" on script with type="text/ng-template", that wouldn't add controller on that template, you need to specify that ng-controller in the template.