0

嗨，我已经创建了一个角度应用程序，并且我为每个控制器创建了单独的控制器，我想在达到相应状态时加载每个控制器

我不想在我的 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'
                        }
                     ]
                  }
        })

我不想在一个文件中编写所有控制器实现，我希望它模块化

请帮助 我的 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

您需要在 index.html 中包含您的 login.js 文件，就像您包含其他文件一样。这对于包含所有 js 文件是必要的，以便它们按顺序加载。否则系统将找不到您的控制器功能。

如果您不想在启动单页加载时加载所有文件，那么您可以使用角度延迟加载功能和 $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'); }]);

您可以在函数、切换案例等中加载文件。

有关更多详细信息，请参阅https://oclazyload.readme.io/docs

于 2016-04-07T07:12:00.540 回答