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时加载login.js并使用控制器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找不到

Answer 1

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

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

您可以在函数内加载文件， 切换大小写等。

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