Angular-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, когда состояние изменяется на /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'
                        }
                     ]
                  }
        })
    

Я не хочу писать все реализации контроллера в одном файле, и я хочу, чтобы он был модульным

Пожалуйста, помогите мой login.js

var loginController = function ($scope, $log) {
    $scope.userName = "[e-mail]";
    $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 не найден

Answer 1

Вы хотите загружать файлы только тогда, когда это необходимо. Такой тип загрузки называется отложенной загрузкой. Вы можете добавить только первичные файлы js и css в html и позже можете загружать 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

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

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

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