尝试运行应用程序模块angularjs时没有错误的空白页面答案

【问题标题】：Blank page without errors when trying to run app modules angularjs尝试运行应用程序模块angularjs时没有错误的空白页面
【发布时间】：2016-11-01 23:43:17
【问题描述】：

我不太确定如何让我的应用正常运行。当我尝试运行它时，所有部分都只显示一个空白页。控制台中没有错误。

我已经查过了，在某处我读到错误可能在我在 templateUrl 中写的路径中..

但我什么都试过了，还是不行。

这是代码（以“事件”部分之一为例）：

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>

如果有人可以帮助我，我将不胜感激！

【问题讨论】：

标签： javascript html angularjs module dependencies

【解决方案1】：

angular.js、dpd.js、app.js 的路径都是错误的。我将它们放在更高的文件夹中，但我错过了它们前面的“../”。因此，templateUrl 路径也是错误的。

修复该问题后，bootstrap.min.js 出现错误 - 高于 2 的 bootstrap 版本由于某种原因无法正常工作。我离开 bootstrap.js 版本 1.0.1 并且它可以工作

【讨论】：

在定义 ng-view 之前，我在头部加载了 angularjs 应用程序

【解决方案2】：

在 index.html 上，您使用的 IndexController 在您的 index.html 页面中既没有实现也没有引用。

您也使用 app.users 模块作为依赖项，但没有实现它。

注意：清除浏览器缓存，然后检查您的控制台。您可以找到实际的错误。

【讨论】：

我有 app.users 的实现，我只是以 app.events 为例。但是所有模块都发生了同样的事情。 IndexController is not referenced 是真的，但这不是问题..