0

こんにちは、Angularアプリケーションを作成し、対応する状態に達したときに各コントローラーをロードしたいそれぞれに個別のコントローラーを作成しました

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 をロードし、状態が /login に変更されたときにコントローラー loginController を使用したい 

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

すべてのコントローラーの実装を 1 つのファイルに書きたくないので、モジュール化したい

私の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

4

2 に答える 2

0

他のファイルを含めたのと同じように、login.js ファイルを index.html に含める必要があります。これは、すべての js ファイルをインクルードして順番にロードするために必要です。そうしないと、コントローラー関数がシステムによって検出されません。

単一ページの読み込みで起動時にすべてのファイルを読み込みたくない場合は、angular lazyloading 機能と $controllerProvider を使用できます。

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

于 2016-04-05T19:42:19.717 に答える
0

必要なときにのみファイルをロードしたい。このようなタイプの読み込みは、遅延読み込みと呼ばれます。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'); }]);

function内にファイルをロードしたり、ケースを切り替えたりすることができます。

詳細については、https://oclazyload.readme.io/docsを参照してください。

于 2016-04-07T07:12:00.540 に答える