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