無法在Angularjs中加載模塊？

嗨，我正在開發Angularjs應用程序。我正在使用UI路由器。這是我的第一個Angular項目，我面臨的問題。我正在運行索引頁面。索引頁面包含頁眉和頁腳。在正文中我試圖在頁面加載時綁定視圖。下面是我的index.html無法在Angularjs中加載模塊？

<html ng-app="RoslpApp"> 
    <head> 
<!--Angularjs and ui routing--> 
    <script data-require="[email protected]" 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="[email protected]*" 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.

我可以知道爲什麼我面臨下面提到的問題。提前致謝。

來源

2017-04-13 Niranjan Godbole

裏有index.html的爲pascalprecht.translate ,ui.router, 'toastr', '720kb.datepicker'

沒有引用添加必要的引用。而對你的app.js的引用也失蹤了！

來源

2017-04-13 11:48:21 Sajeetharan

謝謝你。其實我加載了所有必需的文件。 –

@NiranjanGodbole酷！標記它是否有幫助 – Sajeetharan

實際上現在我的ui-view加載了homepage.html，但是仍然存在錯誤。 –

您需要添加JS腳本在HTML

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

來源

2017-04-13 11:48:55 DMCISSOKHO

無法在Angularjs中加載模塊？

回答

相關問題