AngularJS 응용 프로그램 아키텍처

Question

저는 Angular에 비교적 익숙하지만 경험 많은 개발자입니다. 지금까지는 CMS로 작업 할 수 있도록 응용 프로그램을 작성하는 과정에서 상당한 진전을 이루었습니다. 그러나 나는 '올바른'접근법이 내 모델의 데이터를 처리하는 것이 무엇인지에 대해서는 조금 잃어 버렸다.

이

가장 예를 들어 설명한다 :

나는 CMS 내 각 프론트 엔드를 접선하고 있으므로, 라우팅 (페이지)는 CMS 문맥에서만 존재한다. 이는 라우팅이 동적이어야 함을 의미합니다. 내가 일을 할 수있는 동적 라우팅 일을 얻을 수 있었다, 그러나 한 나는 것들을 내가 몇 가지 문제로 실행하는 올바른 방법 (실제로는 서버에서 데이터를 가져 오는) ... 즉

app.config(function($provide, $routeProvider) { 
$provide.factory("$routeProvider", function() { 
    return $routeProvider; 
    }); 
}); 
// Load the dynamic routes from the API... 
app.run(function($routeProvider, $http, $scope, logger, siteRoutes) { 
    $routeProvider.when('/', { templateUrl: '__views/', controller: 'ContentPageController' }); 
    $routeProvider.otherwise({redirectTo: '/'}); 
}); 

을하려고 할 때, I 내 app.run 메소드 (siteRoutes)에 서비스를 삽입하면이 API에 연결해야합니다.

그래서 내 siteRoutes는 서비스 :

cmsModule.service('siteRoutes', function siteRouteFactory(apiConnection, logger) 
// SNIP 

그리고 내 일반적인 apiConnection 서비스를 주입이 서비스에 :

내가 좋아하는 것 :

cmsModule.factory('apiConnection', ['$q', '$http', '$timeout', 'logger', function apiConnectionService($q, $http, $timeout, logger) 

는 내가 원하는 것은 이것이다 siteRoutes 서비스는 데이터를 한 번로드하고 매번 연결을 실행하지 않습니다. 나는 다음과 같은 방법으로 이런 짓을 : 나는 모든 그 때는() 물건을 처리 할 필요가 가정

bla.service('example', function() { 
    var service = { 
     get: function(apiStuff) { // DO API CONNECT WITH .THEN HERE }, 
     data: {} 
    } 
    service.get(); 
    return service; 
} 

나는 모든 $ q를 물건 (내 공장) 처리 API에 대한 하나의 엔트리 포인트를 싶습니다 내 siteRoutes 객체는 내가 한 일입니다.

이제 app.run 메서드에서 어떤 데이터로도 siteRoutes 객체를 가져 오지 못합니다. 그래서 나는 내가해야 할 일을 정찰한다.

그러나 그게 내가 연결을위한 별도의 공장에 모든 로직을 가하는 전체 디자인에 의문을 제기했다. 기본적으로 내 앱이 데이터를 사용하고 비동기적인 물건을 다루는 라이브러리를 가지고 있기 때문이다.)

희망이 분명하다.

TL, DR -> 서비스/공장에서 '앱'거래를하지 않고도 비동기 항목을 처리하는 방법은 무엇입니까?

Answer 1

templateUrl 속성은 url 매개 변수를 입력으로 사용하는 함수가 될 수도 있습니다.

아래 예에서 모든 경로는 같은 이름의 템플릿을로드합니다. 예 : domain.com/#/blabla.html은 서버에서 blabla.html보기를로드합니다.

myApp.config(['$routeProvider', function ($routeProvider) { 
    $routeProvider 
     .when('/:templateName', 
     { 
      templateUrl: function (params) { 
       return params.templateName + ".html"; 
      } 
     } 
     ) 
     .otherwise({ redirectTo: '/main' }); 
}]);