在AngularJS中動態加載視圖和控制器

Question

我想知道在加載適當的視圖和控制器方面處理業務邏輯的正確方法是什么。

我有一堆工廠來加載資源，讀取和寫入用戶進度（到本地文件）等等。 用戶在一個給定的視圖上花費的時間不會超過幾秒鍾（總共有6-7個不同的視圖），並將根據自己的進度切換到另一個具有動態加載資源的視圖。

我當前的想法是要有一個跟蹤進度的服務/工廠，該服務/工廠會加載到索引頁面上，然后每個控制器在完成后都會向其發送請求。 此后，服務更改$ state並加載適當的數據。

我正在AngularJS中構建我的第一個應用程序，並且嘗試搜索StackOverflow和Google，但是我仍然不知道如何解決該問題。

即使將我指向正確的方向或閱讀材料也將不勝感激。

Answer 1

如果您是第一次創建AngularJs應用，請遵循簡單的步驟。
1.創建一個index.JSP文件，在其中應使用ng-app指令運行應用ng-app並添加所有腳本和文件。
2.創建一個Js文件app.js
在app.js中添加所有模塊名稱，然后使用.run方法運行您的js。
3.在不同的文件夾和不同的文件中分別維護services, controllers and filters, directives, templates 。
並且不要忘記在app.js中添加模塊名稱並在index.jsp中添加路徑
4.在您的服務文件中，僅寫入共享業務邏輯 。
與特定文件相關的所有其他業務邏輯都將其寫入控制器中。
在這里，您正在維護ajax調用，因此請不要將其與控制器嚙合。

。服務

.factory('angularService', function () {
  return {
    // Write business logic
  }
})

5. 聲明$starteProvider並在控制器中定義.states 。

對於前。

$stateProvider.state('xyz_state', function () {
   // add url,
   // templateUrl,
   // controller
})
.controller('myFirstController', function () {
   // Add your business logic
   // scope variables
});  

6.單獨維護視圖頁面。
7.分別維護Directives和Filters 。

Answer 2

在角度視圖中，默認情況下需要時通過ajax調用來加載它。 如果要在控制器中執行相同操作，請使用require.js。 它將在需要時動態加載控制器。 在require.js中，您還可以為每個視圖和控制器指定其他依賴庫，這些依賴庫將在調用view時通過ajax加載。

index.html

 <script data-main="js/main.js" type="text/javascript" src="js/require.js"></script> 

main.js

 require.config({ urlArgs: 'v=1.0', }); require( [ 'app' ], function() { angular.bootstrap(document, ['UConnect']); //Add your module } ); 

app.js

 'use strict'; define([],function() { var app = angular.module('UConnect',['ngRoute','ngAnimate','ui.materialize','yaru22.angular-timeago']); app.config(['$routeProvider', '$controllerProvider', '$provide',function($routeProvider, $controllerProvider, $provide) { // Register your component app.register = { controller: $controllerProvider.register, factory: $provide.factory, service: $provide.service }; // Add resolver for load controller through require.js function resolveController(dependencies) { return { load: ['$q', '$rootScope', function ($q, $rootScope) { var defer = $q.defer(); require(dependencies, function () { defer.resolve(); $rootScope.$apply(); }); return defer.promise; }] } }; $routeProvider .when("/Pages", { templateUrl : "templates/Pages.html", controller: 'PagesCtrl', // Add controller name. resolve: resolveController(['controller/PagesCtrl']) // Call resolver to load controller. }) .when("/ContactUs", { templateUrl : "templates/ContactUs.html", controller: 'ContactUsCtrl', resolve: resolveController(['controller/ContactUsCtrl']) }) ; $routeProvider.otherwise('/Pages'); }]); angular.element(document).ready(function () { angular.bootstrap(document, ['Uconnect']); }); return app; }); 

Answer 3

我通常使用$ templateCache並將所有視圖存儲在那里。 如果您在節點環境中，建議將ng-html2js添加到您的構建過程中。

至於控制器和其他JS，則應全部縮小並合並，並在開始時僅加載該文件。