Angular-js 每个状态包含js

Question

您好，我创建了一个 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'
                        }
                     ]
                  }
        })

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

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

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

如果您不想在单页加载启动时加载所有文件，那么您可以使用angular延迟加载功能和$controllerProvider。

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

Answer 2

您想只在需要时加载文件。这种类型的加载称为延迟加载。您可以在 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'); }]);

您可以在函数、switch cases等中加载文件

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

Angular-js 每个状态包含js

Angular-js Include js on each state

javascript

state

session-state-provider

angularjs