如何解決AngularJS中的以下陷阱

-1

我一直在研究一個「非平凡」的角JS應用程序，我對自己和這個框架感到有點失望，因爲它沒有找到真正可行的解決方案，以解決以下問題。如何解決AngularJS中的以下陷阱

AngularJS應該有一個機制，在運行之前，應該能夠執行HTTP請求以獲取數據並將其設置爲提供程序。在實際引導應用程序之前，這對獲取路線權限，用戶數據以及所需的東西非常有用。

現在，我看到的文章描述瞭如何前角加載jQuery的，只是一些jQuery的Ajax調用後手動自舉角 - >和接收到的數據注入角。

應該有一箇中間件可以用來驗證根。在那裏，任何根在顯示之前，你可以做一個檢查，例如鉤，看看用戶通過認證，令牌存儲在會話存儲等功能

現在，我見過的嘗試與使用ui路由器和$rootScope.$on('$stateChangeStart')事件。

這個「有些」的作品，但它不是優雅的，不是開箱即用，如果你不擺弄設置，它會觸發無限循環。

此外，UI路由器使用做出決議，其是在獲得資源的視圖編譯之前大。但是，會發生什麼，你不能從解析函數中獲得「$ state」。所以，如果你請求的數據不是你想要的，你不能重定向到另一個視圖。

Angular使得加載控制器和視圖的狀態非常複雜，這取決於某些數據 - 人工智能。用戶角色。這不是真的要走的路，但在某些情況下，直接從路由器決定哪個控制器加載哪條路由器，而不是在視圖中使用模板將會很有用。

這篇文章背後的原因是看你們如何解決這些問題。

我希望你證明我錯了，有很多更好的方法來完成上述操作，並且通過代碼示例，我很想知道它們。

來源

2014-11-06 Dany D

對於第1點。如果您在加載頁面之前需要一些數據，可以先設置一個解析完成：http://stackoverflow.com/questions/14741359/angularjs-dependency-injection-in-resolve – SoluableNonagon 2014-11-06 21:15:35

精英，這將是很好的角度完成配置應用程序之前得到一個http請求...爲了獲取用戶的語言環境，api網址等。 – 2014-11-06 21:17:30

這將更好地分成單獨的問題。 – 2014-11-06 21:19:55

-1

看到這個問題的一個可能的答案，你的第一個問題：

use $http inside custom provider in app config, angular.js

如果你真的需要進行HTTP調用的配置階段結束之前，則沒有，角度不能做到這一點，因爲配置階段是同步執行的，所以你的http調用將在配置完成後完成。

您是否可以在應用程序加載之前在服務器端進行這些配置調用，然後在初始頁面加載時將它們傳遞給它們？

<script>window.initialData = { ... };</script> 

var initialData = angular.fromJson($window.initialData);

否則你被卡住使用非角度http調用和手動引導你的應用程序。

來源

2014-11-06 21:20:12

當然，邁克，但想象一個resp API，CORS和一個角度應用程序，這不會是可能的 – 2014-11-06 21:21:02

另一件事是，其他JS框架有這個陷阱... Sencha Touch也有這個問題。另外，我同意手動引導角..這只是我記得我有一些模板縮小和一些奇怪的錯誤，當我做到這一點問題。 – 2014-11-06 21:22:36

這項工作？

這是手動引導，請務必不要在HTML或BODY標籤中聲明ng-app，這會自動引導。

創建兩個模塊。第一個模塊自動初始化，加載你需要的數據，最後引導你的第二個模塊 - 真正的應用程序。

var configuarationData = null; 
var mainApplication = angular.module('myApp', [dependencies]); 

/** 
* This function will start up the application and cause all views to be loaded 
*/ 
mainApplication.config(['$routeProvider', '$locationProvider', '$httpProvider', 
    function($routeProvider, $locationProvider, $httpProvider) { 

     // do some stuff here regarding configuration 

    } 
]).run(['$rootScope', '$templateCache', '$http', , 
    function($rootScope, $templateCache, $http) { 
     /* We need this run method to make sure certain global services are loaded prior to other controllers/services */ 
    console.log('configurationData available?', configurationData); 
}); 

var configApplication = angular.module('theConfigurator',[dependencies]); 

configApplication.run(function('$http'){ 
    $http.get('load some data').then(function(success){ 
      // bootstrap the main application 
      configurationData = success.data; 
      angular.bootstrap(document, ['myApp']); 
    }, function(reasonForFailure){ 
     console.log('no config data'); 
    }); 
});

來源

2014-11-06 21:31:59 SoluableNonagon

Elite，這實際上非常有趣...但是，我們可以不用加載兩個角度應用程序，而是通過簡單的javascript ajax請求來手動獲取我們的數據和引導應用程序。我不確定自己沒有記錯，但是，在一個咕build的編譯中，我記得我在模板chache有一些問題，手動引導角度後...所以我將不得不做一些測試。 – 2014-11-06 21:43:05

另一個問題是如何優雅地將配置數據注入到Anglar主應用程序中。現在它是一個全局變量。 – 2014-11-06 21:44:15

這將如何工作？您不能在配置時僅注入服務（例如，$ http）注入服務。 – 2014-11-06 22:20:52

這聽起來像你想要的東西像Angular UI's UI Router。

它看起來像你想要的主要功能是resolve功能。這使您可以在您的控制器上設置promise-based依賴項。因此，確保您在進入實際應用程序之前已經解析了身份驗證設置，數據等。

來源

2014-11-06 21:50:10

準確地說，但..想象你有50個解決方案，你必須檢查他們所有的auth ...我看到一篇文章解釋瞭如何做嵌套解析，這將都取決於主要的解決方案......並在那裏執行代碼。 – 2014-11-06 21:53:13

@DanyD那麼如果你有50個不同的依賴關係進行身份驗證，我想你可能需要重新考慮你的方法。或者有一個主要服務爲您解決所有的身份驗證依賴關係。 – 2014-11-06 22:08:22

如何解決AngularJS中的以下陷阱

回答

相關問題