角-JS包括每個狀態JS

Question

您好我已經創建了一個角度應用程序，我已經創建了每個 我要加載每個控制器當相應的狀態已經達到

我不想要單獨的控制器加載所有控制器在我的index.html

我的index.html

<!-- UI Elements--> 
 
     <link rel="stylesheet" type="text/css" href="common/resources/UI/css/bootstrap.css"> 
 
     <script src="common/resources/UI/js/bootstrap.js"></script> 
 
    <!-- UI Elements--> 
 

 
    <!--Angular Elements--> 
 

 
     <!--Angular js file from google--> 
 
      <script src="common/resources/Angular/Angular/angular.js"></script> 
 
      <script src="common/resources/Angular/Angular/angular-route.js"></script> 
 
      <script src="common/resources/Angular/Angular/angular-ui-router.js"></script> 
 
      <script src="common/resources/Angular/Angular/angular-router-styles.js"></script> 
 
     <!--Angular js file from google--> 
 

 
     <!--Angular Modules--> 
 
      <script src="common/resources/Angular/Module/module.js"></script> 
 
     <!--Angular Modules--> 
 

 
     <!--Angular Route Config--> 
 
      <script src="common/resources/Angular/Module/Configuration/rootConfig.js"></script> 
 
     <!--Angular Route Config--> 
 

 
     <!--Angular Controller--> 
 
      <script src="common/resources/Angular/Controller/ControllerImpl/mainControllerImpl.js"></script> 
 
      <script src="common/resources/Angular/Controller/controllers.js"></script> 
 
     <!--Angular Controller-->

我RootStatefile 我想加載login.js和使用控制器的LoginController時狀態chnages到/登錄

/* 
 
     Summary  : Login Page 
 
     Description : Used to show the login page of application 
 
     Author   : Nithin Prasad 
 
    */ 
 
     .state('/login', { 
 
      url: '/', 
 
      controller: 'loginController', 
 
      templateUrl: 'module/login/login.html', 
 
      data: { 
 
       css: [ 
 
         { 
 
          href: 'module/login/css/login.css' 
 
         } 
 
        ], 
 
       scripts: [ 
 
         { 
 
           href: 'module/login/js/login.js' 
 
         } 
 
        ] 
 
        } 
 
     }) 
 

我不想寫所有的控制器實現在一個文件中，並我希望它模塊化

請幫 我login.js

var loginController = function ($scope, $log) { 
 
    $scope.userName = "nithinprasad59@yahoo.com"; 
 
    $scope.password = "nithin123"; 
 
    $scope.userEmail = $scope.userName; 
 
} 
 

 
smartExpenseApp.controller('loginController', loginController);

我的login.html 具有的LoginController

<div class="container" ng-controller="loginController"> 
 
    <div class="row"> 
 
     <div class="col-md-6 col-md-offset-3"> 
 
      <div class="jumbotron"> 
 
       <h1>Login</h1> 
 
       <form class="form-horizontal" name="loginForm"> 
 
        <div class="form-group"> 
 
         <label for="inputEmail3" class="col-sm-2 control-label">Email</label> 
 
         <div class="col-sm-10"> 
 
          <input type="email" class="form-control" required id="inputEmail3" placeholder="Email" name="email" ng-model="userEmail"> 
 
         </div> 
 
        </div> 
 
        <div ng-show="loginForm.email.$dirty && loginForm.email.$invalid" class="alert alert-danger" role="alert"> 
 
         <span class="glyphicon glyphicon-exclamation-sign" aria-hidden="true"></span> 
 
         <span ng-show="loginForm.email.$error.required">Email is required.</span> 
 
         <span ng-show="loginForm.email.$error.email">Invalid email address.</span> 
 
        </div> 
 
        <div class="form-group"> 
 
         <label for="inputPassword3" class="col-sm-2 control-label">Password</label> 
 
         <div class="col-sm-10"> 
 
          <input type="password" required name="password" class="form-control" id="inputPassword3" placeholder="Password" ng-model="password"> 
 
         </div> 
 
        </div> 
 
        <div ng-show="loginForm.password.$dirty && loginForm.password.$invalid" class="alert alert-danger" role="alert"> 
 
         <span class="glyphicon glyphicon-exclamation-sign" aria-hidden="true"></span> 
 
         <span ng-show="loginForm.password.$error.required">Password is required.</span> 
 
        </div> 
 
        <div class="form-group"> 
 
         <div class="col-sm-offset-2 col-sm-10"> 
 
          <button type="submit" class="btn btn-primary">Sign in</button> 
 
         </div> 
 
        </div> 
 

 
        Hello ! {{userEmail}} Your password is {{password}} 
 
      </div> 
 
     </div> 
 

 
     </form> 
 
     
 
    </div> 
 
</div> 
 

 
</div>

參考，但我得到以下錯誤 LoginControler not found

Answer 1

你要載入的文件其僅在需要時。這種類型的加載稱爲延遲加載。您只能在html中添加主要的js和css文件，並且可以在需要時加載模板html和其他js文件。

對此，您可以使用oclazyload。

首先使用bower或npm安裝依賴文件。

bower install oclazyload 或 npm install oclazyload

，那麼你需要的模塊添加到您的應用程序

var smartExpenseApp = angular.module("smartExpenseApp", ["oc.lazyLoad"]);

您正在使用完成。現在在您的控制器文件中添加您在index.html中添加的依賴項。

smartExpenseApp.controller("MyCtrl",['$ocLazyLoad', function($ocLazyLoad) { //do something here //now you need your login controller $ocLazyLoad.load('login.js'); }]);

可以加載功能中的文件，開關的情況下等

更多細節請參考https://oclazyload.readme.io/docs

Answer 2

您需要將index.js文件包含在index.html中，就像您包含其他文件一樣。這是包含所有js文件所必需的，以便它們按順序加載。否則您的控制器功能將不會被系統找到。

如果你不想在單頁加載啓動時加載所有文件，那麼你可以使用角度延遲加載功能和$ controllerProvider。

http://ify.io/lazy-loading-in-angularjs/