Blank page without errors when trying to run app modules angularjs

Question

I'm not quite sure how to make my app work.. When I try to run this, all sections just show a blank page.. No errors in console.

I have looked it up, and somewhere I read that the error can be in the path I write in templateUrl..

But I have tried everything and still doesn't work.

Here is the code (for one of the sections 'events', as an example):

app.js:

/* App Module */

angular.module('app', ['app.home', 'app.users', 'app.events'])
.config( function myAppConfig ( $routeProvider ) {
    'use strict';
    $routeProvider.otherwise({ redirectTo: '/home' });
});

events.js:

'use strict';

/* Events Module */

var gulp = require('gulp'); 
var mygulpplugin = require('mygulpplugin');
gulp.tasks = mygulpplugin.tasks;

angular.module('app.events', [])
        .config(['$routeProvider', function config($routeProvider) {
                $routeProvider.when('/events', {
                    controller: 'EventsController',
                    templateUrl: '../../partials/_events.html'
                });
            }])
        .controller('EventsController', ['$scope', function ($scope) {
               /* HERE GOES SOME CODE.. */
            }]);
module.exports = gulp;

index.html:

<!DOCTYPE html>
<html>
    <head>
    <title>Deployd Todos</title>
    <!--<link rel="stylesheet" href="css/bootstrap.min.css" />-->
    <script type="text/javascript" src="/js/lib/jquery.js"></script>
    <link rel="stylesheet" href="css/bootstrap.min.css" />
    <script type="text/javascript" src="/js/lib/angular.js"></script>        
    <script type="text/javascript" src="/dpd.js"></script>
    <script type="text/javascript" src="/js/app.js"></script>
</head>
<body ng-app="app">
    <div class="container" ng-controller="IndexController as userC">

        <h1>Welcome to Deployd!</h1>
        <ul>
            <li>
                <p>Check upcoming events <a href="partials/_home.html">here</a></p>
            </li>
            <li>
                <p>Create a new event<a href="partials/_events.html"> here</a>.</p>
            </li>
            <li>
                <p>Check users<a href="partials/_user.html"> here</a>.</p>
            </li>
        </ul>
    </div>
</body>

events.html:

<html>
    <head>
        <title>TODO supply a title</title>
        <script type="text/javascript" src="/js/lib/jquery.js"></script>
        <link rel="stylesheet" href="../../css/bootstrap.min.css" />
        <script type="text/javascript" src="/js/lib/angular.js"></script>        
        <script type="text/javascript" src="/dpd.js"></script>
        <script type="text/javascript" src="/js/app.js"></script>

    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
    <div class="container" ng-controller="EventsController" ng-cloak>
        <h1>Crear Evento</h1>
        <p id="empty" ng-hide="eventos.length || !loaded">No tienes eventos! Crea uno ahora:</p>
        <ul id="events" class="unstyled">
            <li ng-repeat="evento in eventos">
                <label>{{evento.name}}</label>
                <label>{{evento.date}}</label>
            </li>
        </ul>
        <form class="form-inline">
            <!-- here goes a form body --> 
            <button id="add-btn" class="btn btn-success" ng-click="addEvent(titleEvent,dateEvent,timeEvent,addressEvent,descrEvent,logoEvent,pubEvent)">Crear</button>
        </form>
        <p>
            <a href id="remove-completed-btn" ng-click="removeCompletedItems()">Remove completed items</a>
        </p>
    </div>
</body>

If somebody could help me with this I would be profoundly grateful!!

letie · Accepted Answer · 2016-11-01 15:43:17Z

1

Paths for angular.js, dpd.js, app.js, were all wrong.. I had them in a higher folder and I was missing the "../" before them. templateUrl path was also wrong because of that.

After fixing that, I got an error with bootstrap.min.js - A version of bootstrap higher than 2 was not functioning for some reason.. I left the bootstrap.js version 1.0.1 and it worked

answered Nov 1, 2016 at 15:43

letie

8922 gold badges11 silver badges25 bronze badges

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

1 Comment

Antoine Over a year ago

For me I was loading the angularjs app in the head, before the ng-view was defined

Kalyan · Accepted Answer · 2016-10-31 02:14:15Z

0

On index.html you are using a IndexController which is neither implemented nor referenced in your index.html page.

Also you are using app.users module as a dependency but there is no implementation for it.

Note: Clear the browser cache and then check your console. You can find the actual errors.

answered Oct 31, 2016 at 2:14

Kalyan

1,2001 gold badge11 silver badges23 bronze badges

1 Comment

letie Over a year ago

I have the implementation for app.users, I just showed app.events as an example. Bu the same thing was happening for all modules. IndexController is not referenced is true, but that wasn't the problem..

Collectives™ on Stack Overflow

Blank page without errors when trying to run app modules angularjs

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related