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