AngularJS - Wie Vorlage und Daten aus einem Versprechen zu rendern

Question

In Ordnung, ich bin ziemlich neu in Angular, verbrachte die letzten zwei Tage versucht, einen guten Weg zu finden, und dies ist fehlgeschlagen. Ich bin mir nicht sicher, ob der Titel auch gut ist.

Ich versuche, eine einfache Seite mit einem Menü zu machen. Die Person würde auf einen Menü-Link klicken und dann sollte die Ansicht, die unter dem Menü ist, entsprechend dargestellt werden (ohne natürlich die gesamte Seite zu aktualisieren). Klingt einfach.

Aber die Sache ist, es wird ein Menü für Admins und ein Menü für normale Benutzer geben, so dass das Menü durch Ajax geladen wird. Dies ist ein Beispiel dafür, was ich bekommen:

[ 
    { 
     name: "Manage games", 
     templateUrl: "/view/mygames.html", 
     url: "/games", 
    }, 
    { 
     name: "Weekly Reports", 
     templateUrl: "/view/myreports.html", 
     url: "/reports" 
    }, 
    { 
     name: "Manage Users", 
     templateUrl: "/view/users.html", 
     url: "/users", 
     adminRequired: true 
    } 
]; 

Nachdem das Menü geladen wird, wenn ein Menüelement geklickt wird, möchte ich Daten erhalten, einen Ajax-Aufruf an die url Eigenschaft machen, und die Vorlage dieser Daten zu holen um auch ein Ajax Anruf an die templateUrl Eigenschaft sein.

Also, wie ist das erreichbar? Grundsätzlich möchte ich eine Direktive/Komponente/was auch immer haben, die standardmäßig leer ist, nicht angezeigt oder gerendert wird. Aber wenn ich auf ein Element im Menü klicke, werde ich $ an ein Ereignis mit dem Befehl dataUrl/templateUrl an die Direktive/component/whatever senden und zwei Ajax-Aufrufe machen, eins zwei die Daten holen und ein anderes an Holen Sie sich die Vorlage, nachdem beide fertig sind, wird es auf der Seite gerendert und angezeigt.

Jede auf diese Art und Weise, oder einen Vorschlag etwas Ähnliches wie dies zu tun stark

Durch die Art und Weise geschätzt wäre, ich bin mit Angular 1.5.7

Answer 1

sollten Sie Routing verwenden (in meinem Beispiel ist es die ui-router), um dies zu erreichen.
Der UI-Router verfügt über eine resolve-Eigenschaft, mit der Sie Controller-Abhängigkeiten auflösen können und Sie dann in Ihren Controller für die Verwendung injizieren können.

Hier ist ein vollständiges Beispiel, das ich (sorry für die schlechte ui) gemacht haben:

HTML:

<div ng-app="app"> 
    <div ng-controller="homeCtrl as vm"> 
    <menu items="vm.items"></menu> 
    </div> 
    <div> 
    <ui-view></ui-view> 
    </div> 
</div> 

JS:

var app = angular.module('app', ['ui.router']); 

app.controller('gamesCtrl', function(data) { 
    this.title = data.title; 
}). 
controller('reportsCtrl', function(data) { 
    this.title = data.title; 
}). 
controller('usersCtrl', function(data, adminData) { 
    this.title = data.title; 
    this.removedUsers = adminData.removedUsers; 
}). 
controller('homeCtrl', function() { 
    this.items = [{ 
    name: 'Manage games', 
    state: 'games' 
    }, { 
    name: 'Weekly Reports', 
    state: 'reports' 
    }, { 
    name: 'Manage Users', 
    state: 'users', 
    adminRequired: true 
    }]; 
}); 

app.component('menu', { 
    bindings: { 
    items: "=" 
    }, 
    template: '<div ng-repeat="item in $ctrl.items"><span ng-click="$ctrl.goToState(item)">{{item.name}}</span></div>', 
    controller: function($state) { 
    this.goToState = function(item) { 
     console.log('redirecting to state:' + item.state); 
     $state.go(item.state); 
    } 
    } 
}); 

app.config(function($stateProvider, $urlRouterProvider) { 
    $stateProvider. 
    state('games', { 
    url: '/games', 
    template: '<div><h1>{{vm.title}}</h1></div>', // use templateUrl.. 
    resolve: { 
     data: function($q) { 
     return $q.when({ 
      title: 'games' 
     }) 
     } 
    }, // return injectables who return promises and inject them into your ctrl 
    controller: 'gamesCtrl as vm' 
    }). 
    state('reports', { 
    url: '/reports', 
    template: '<div><h1>{{vm.title}}</h1></div>', // use templateUrl.. 
    resolve: { 
     data: function($q) { 
     return $q.when({ 
      title: 'reports' 
     }) 
     } 
    }, // return injectables who return promises and inject them into your ctrl 
    controller: 'reportsCtrl as vm' 
    }). 
    state('users', { 
    url: '/users', 
    template: '<div><h1>{{vm.title}}</h1><div>Removed Users:</div><div ng-repeat="user in vm.removedUsers">{{user}}</div></div>', // use templateUrl.. 
    // return injectables who return promises and inject them into your ctrl 
    resolve: { 
     data: function($q) { 
     return $q.when({ 
      title: 'users' 
     }) 
     }, 
     adminData: function($q) { 
     return $q.when({ 
      removedUsers: ['user1', 'user2', 'user3'] 
     }) 
     } 
    }, 
    controller: 'usersCtrl as vm' 
    }). 
    state('default', { 
    url: '/default', 
    template: '<h1>This is the default state</h1>' 
    }); 

    $urlRouterProvider.otherwise('/default'); 
}); 

JSFIDDLE.

Bemerkungen:

• Sie templateUrl statt Vorlage verwenden sollten, wenn die Zustände konfigurierend.
• Ich habe $q.when verwendet, um eine Rückkehr eines Versprechens zu demonstrieren. Sie werden stattdessen $http.get\pos t stattdessen verwenden.