Angular-js Fügen js auf jeden Zustand

Question

Hallo Ich habe eine Winkel Anwendung erstellt, und ich habe für jeden I separaten Controller erstellt werden soll jeden Controller laden, wenn der entsprechende Zustand

erreicht wurde ich will nicht laden alle Controller an meinem index.html

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

Mein RootStatefile Ich möchte login.js laden und Controller loginController verwenden, wenn Zustand chnages zu/login

/* 
 
     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' 
 
         } 
 
        ] 
 
        } 
 
     }) 
 

Ich will nicht alle Controller-Implementierung in einer Datei schreiben und ich will es

Bitte helfen meine login.js modularisieren

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

 
smartExpenseApp.controller('loginController', loginController);

mein login.html hat einen Verweis auf 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>

aber ich bin immer Fehler folgende LoginControler not found

Answer 1

Sie wollen nur die Dateien laden, wenn es gebraucht wird. Eine solche Art des Ladens wird als Lazy Loading bezeichnet. Sie können nur die primären js und css Dateien im html hinzufügen und können später die Vorlage html und andere js Dateien laden, wenn sie benötigt werden.

Sie können hierfür oclazyload verwenden.

Zuerst installieren Sie die Abhängigkeitsdatei mit bower oder npm.

bower install oclazyload oder npm install oclazyload

dann müssen Sie das Modul in Ihrer Anwendung hinzuzufügen

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

Sie damit fertig sind. Jetzt injiziere die Abhängigkeit in deine Controller-Datei, die du in der index.html hinzufügst.

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

Sie können innerhalb einer Funktion, eine Datei laden Schalter Fälle usw.

für weitere Details siehe https://oclazyload.readme.io/docs

Answer 2

Sie müssen Ihre login.js-Datei in index.html einschließen, so wie Sie andere hinzugefügt haben. Dies ist notwendig, um alle js-Dateien aufzunehmen, so dass sie nacheinander geladen werden. Andernfalls wird Ihre Controller-Funktion vom System nicht gefunden.

Wenn Sie nicht alle Dateien beim Start laden möchten, können Sie die eckige Lazyloading-Funktion und $ controllerProvider verwenden.

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