Question

您好我正在开发Angularjs应用程序。我正在使用UI路由器。这是我的第一个Angular项目，我正面临着一些问题。我正在运行索引页面。索引页面包含页眉和页脚。在我正在尝试绑定页面加载视图。以下是我的Index.html

    <html ng-app="RoslpApp">
    <head>
<!--Angularjs and ui routing-->
    <script data-require="angular.js@1.4.5" data-semver="1.4.5" src="https://code.angularjs.org/1.4.5/angular.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.8/angular-ui-router.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.4.2/angular-ui-router.min.js"></script>
    <!--Angularjs and ui routing-->
    <!--Arebic Translation-->
    <script data-require="angular-translate@*" data-semver="2.5.0" src="https://cdn.rawgit.com/angular-translate/bower-angular-translate/2.5.0/angular-translate.js"></script>
    <script src="scripts/angular-translate.js"></script>
    <script src="scripts/angular-translate-loader-partial.min.js"></script>
    <!--Arebic Translation-->
    <!--Date Picker-->
    <link href="App/CSS/angular-datepicker.css" rel="stylesheet" />
    <script src="App/JS/angular-datepicker.js"></script>
    <!--Date Picker-->
  <!--Toaster-->
    <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i,800,800i" rel="stylesheet">
    <script src="https://unpkg.com/angular-toastr/dist/angular-toastr.tpls.js"></script>
    <link rel="stylesheet" href="https://unpkg.com/angular-toastr/dist/angular-toastr.css" />
    <!--Toaster-->
    <!--SPA Files-->
    <script src="App/App.js"></script>
    <!--SPA Files-->
    </head>
    <body ng-controller="RoslpAppController">
    <header>
        <div class="logo"><img src="App/images/logo.png"></div>
    </header>
        <!--inject here-->
        <div class="container">
        <div ui-view></div>
        </div>
    <footer>
    </footer>

这是我的App.js

    var app = angular.module('RoslpApp', ['pascalprecht.translate', 'ui.router', 'toastr', '720kb.datepicker']);
    app.config(function ($stateProvider, $urlRouterProvider, $translateProvider, $translatePartialLoaderProvider)
    {
    $urlRouterProvider.otherwise('/HomePage');
    $stateProvider
       .state('ForgotPassword.ChangePasswords', {
           url: '/ForgotPasswordChangePasswords',
           templateUrl: 'ForgotPassword/ChangePassword.html',
           params: {
               LoginID: null
           },
           controller: 'ChangePasswords'
       })
        .state('HomePage', {
            url: "/HomePage",
            templateUrl: "Registration/HomePage.html"
        });
    });
app.controller('RoslpAppController', ['$scope', '$translate', 'toastr', function ($scope, $translate, toastr) {
    //toastr.success('Hello world!', 'Toastr fun!');
    $scope.clickHandler = function (key) {
        $translate.use(key);
    };
}]);

这是我的HomePage.html

<div class="banner-container">
</div>

当我第一次加载页面时，我遇到错误。

Uncaught Error: [$injector:nomod] Module 'RoslpApp' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.

我可以知道为什么我要面对下面提到的问题。提前谢谢。

Answer 1

index.html中没有针对 pascalprecht.translate ,ui.router, 'toastr', '720kb.datepicker'

的引用

添加必要的参考资料。并且还缺少对app.js的引用！

Answer 2

您需要在html中添加js脚本

    <html ng-app="RoslpApp">
    <head>
    </head>
    <body ng-controller="RoslpAppController">
    <header>
        <div class="logo"><img src="App/images/logo.png"></div>
    </header>
        <!--inject here-->
        <div class="container">
        <div ui-view></div>
        </div>
    <footer>
    </footer>
    <script src="app.js"></script>
 <script src="my_other_js.js"></script>
    </body>
    </html>

无法在Angularjs中加载模块？

2 个答案: