Javascript 尝试运行应用程序模块angularjs时无错误的空白页_Javascript_Html_Angularjs_Module_Dependencies

Javascript 尝试运行应用程序模块angularjs时无错误的空白页

javascript html angularjs module dependencies

Javascript 尝试运行应用程序模块angularjs时无错误的空白页,javascript,html,angularjs,module,dependencies,Javascript,Html,Angularjs,Module,Dependencies,我不太确定如何让我的应用程序工作。。当我尝试运行此程序时，所有部分都只显示一个空白页。。控制台中没有错误我已经查过了，在某个地方我读到错误可能在我在templateUrl中写的路径中但我什么都试过了，还是不行以下是代码（以“事件”一节为例）： app.js: /* App Module */ angular.module('app', ['app.home', 'app.users', 'app.events']) .config( function myAppConfig ( $ro

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

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

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

以下是代码（以“事件”一节为例）：

app.js:

/* App Module */

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

'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;

<!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>

<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>

events.js:

/* App Module */

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

'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;

<!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>

<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>

index.html:

/* App Module */

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

'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;

<!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>

<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>


部署待办事项
欢迎来到Deployd！


查看即将举行的活动


创建一个新事件


检查用户

events.html:

/* App Module */

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

'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;

<!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>

<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>


提供头衔
克雷尔事件
无TINES事件！克里亚·乌诺·阿霍拉：


{{evento.name}
{{evento.date}


克雷尔

如果有人能帮我，我将不胜感激

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

此外，您正在使用app.users模块作为依赖项，但没有实现它

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

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

修复后，我在bootstrap.min.js中遇到了一个错误-一个高于2的bootstrap版本由于某种原因无法运行。。我离开了bootstrap.js版本1.0.1，它工作了

我有app.users的实现，我只是以app.events为例。Bu所有模块都发生了同样的事情。IndexController未被引用是正确的，但这不是问题所在。对我来说，在定义ng视图之前，我在头部加载angularjs应用程序