Angularjs如何在視圖上導入控制器

我正在製作一個包含50多個控制器的大型項目，有沒有辦法在每個控制器處於獨立視圖時獨立調用它？我不希望用戶一次加載所有的控制器。正如你可以看到下面所有的控制器將被稱爲無論我在我的網站上。Angularjs如何在視圖上導入控制器

<!doctype html> 
    <head> 
    <meta charset="utf-8"> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
    <base href="/"> 
    <title></title> 
    <meta name="description" content=""> 
    <meta name="viewport" content="width=device-width"> 
    <!-- Place favicon.ico and apple-touch-icon.png in the root directory --> 
    <!-- build:css(app) styles/vendor.css --> 
    <!-- bower:css --> 
    <link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css" /> 
    <!-- endbower --> 
    <!-- endbuild --> 
    <!-- build:css({.tmp,app}) styles/main.css --> 
    <link rel="stylesheet" href="styles/main.css"> 
    <!-- endbuild --> 
    </head> 
    <body ng-app="nodeserverApp"> 

    <!-- Add your site or application content here --> 
    <div class="container" ng-view=""></div> 
    enter code here 

    <!--[if lt IE 9]> 
    <script src="bower_components/es5-shim/es5-shim.js"></script> 
    <script src="bower_components/json3/lib/json3.min.js"></script> 
    <![endif]--> 

    <!-- build:js(app) scripts/vendor.js --> 
    <!-- bower:js --> 
    <script src="bower_components/jquery/jquery.js"></script> 
    <script src="bower_components/angular/angular.js"></script> 
    <script src="bower_components/bootstrap/dist/js/bootstrap.js"></script> 
    <script src="bower_components/angular-resource/angular-resource.js"></script> 
    <script src="bower_components/angular-cookies/angular-cookies.js"></script> 
    <script src="bower_components/angular-sanitize/angular-sanitize.js"></script> 
    <script src="bower_components/angular-route/angular-route.js"></script> 
    <!-- endbower --> 
    <!-- endbuild --> 

     <!-- build:js({.tmp,app}) scripts/scripts.js --> 
     <script src="scripts/app.js"></script> 
     <script src="scripts/controllers/main.js"></script> 
     <script src="scripts/controllers/navbar.js"></script> 
     <script src="scripts/controllers/login.js"></script> 
     <script src="scripts/controllers/signup.js"></script> 
     <script src="scripts/controllers/settings.js"></script> 
     <script src="scripts/services/auth.js"></script> 
     <script src="scripts/services/session.js"></script> 
     <script src="scripts/services/user.js"></script> 
     <script src="scripts/directives/mongooseError.js"></script> 
     <!-- endbuild --> 
</body> 
</html>

當我嘗試script標籤移動到視圖，角不檢測控制器和發送錯誤。

來源

2014-03-06 Sergio Robledo Arango

我還沒有實現它，但這裏是一篇關於[AngularJS中的懶加載控制器]的文章（http://ify.io/lazy-loading-in-angularjs/） – Tom

你的控制器看起來應該是這樣的：

angular.module('app') 
    .controller('HomeCtrl', function() { /* ... */ });

因此，他們將不會被調用，如「援引」。他們只會在您的模塊下注冊。

當您配置app.js文件，或任何你的模塊聲明首次，這時候你的路線連接到控制器（當你列出其依賴）：你在傳遞

angular.module('app', ['ngRoute']) 
    .config(function ($routeProvider) { 
    $routeProvider.when('/', { 
     controller: 'HomeCtrl', 
     template: '<p>hi!</p>', 
    }); 
    });

一切作爲angular.module('app').__whatever__的功能將被內化並僅在需要時使用。所以，你不必擔心包含腳本，並擔心在路由處於活動狀態之前調用控制器。

希望我理解正確，這是有幫助的。

來源

2014-03-06 17:55:47 Stephen

我明白了，但瀏覽器本身仍然是將立即下載所有腳本，從客戶端消耗不必要的帶寬。 –

我覺得我只是有一些更適合小規模應用程序的建議，所以我會讓其他人指導您關於懶加載等主題。但是，如果任何這些規模較小的應用程序開發人員可能會看到這一點，那麼您的構建任務應該連接並縮小您的應用程序源文件。所有的組合，他們不應該承擔很多的重量，如果你還沒有擔心擴大到無限增長，這將足以讓你和你的用戶。 – Stephen

我不知道你是否爲你的後端網站使用了一些CMS，但在我的情況下，我使用Drupal作爲我的網站的基礎。使用Drupal爲用戶請求的每一個頁面，我可以設置哪些JS文件需要加載（通過將它們編寫成HTML文件）。好吧，這樣我就不能使用Angular路徑/視圖，但在我的情況下，這是可以的，因爲部分的html模板工作是由Drupal完成的。但是，當他談論連接並縮小您的應用程序源文件時，Sthephen便有所裨益。這減少了用戶請求單頁的帶寬和文件數量。

來源

2014-03-07 00:45:45 ZioBudda

Angularjs如何在視圖上導入控制器

回答

相關問題