радиально-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

Вы хотите загрузить файлы только тогда, когда его необходимо. Такой тип загрузки называется ленивой загрузкой. Вы можете добавить только первичные js и css-файлы в html и позже загрузить, когда захотите загрузить html-шаблон и другие js-файлы.

Вы можете использовать oclazyload для этого.

сначала установите файл зависимостей с помощью беседки или 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

Вам необходимо включить файл login.js в index.html, так же, как вы включили другие. Это необходимо для включения всех js-файлов, чтобы они загружались последовательно. В противном случае ваша функция контроллера не будет найдена системой.

Если вы не хотите загружать все файлы при запуске при загрузке одной страницы, то вы можете использовать функцию углового lazyloading и $ controllerProvider.

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