带有JSON数据请求的角度ui-route

Question

I want to build a Single Page Website, where my data is stored in a CMS. This CMS accepts Ajax Requests to serve me JSON. This JSON I want to output in my ng-app using the ui-router (I also tried the ngRoute before, with same results).

The Problem is: I need no template. Cause all my data I need comes from the JSON Request. But using no template or templateUrl doesn't affects the controller.

The question is how to output my received data in the HTML? I cant use ng-controller because it binds on only this specific controller. Console.log shows that my data is successfully received, but I found no way to get an output.

app.config(function($stateProvider, $urlRouterProvider, $locationProvider) {

        $locationProvider.html5Mode(true);

        $urlRouterProvider.otherwise("/");

        $stateProvider
            .state('state1', {
                url: '/state1',
                template: '<h1>This Is A State</h1>',
                controller: function($scope, $http) {
                    $scope.pageObj = '';
                    $scope.pageObj.url = '/angular/demo/';
                    $scope.pageObj.class = 'page-my';
                    $scope.pageObj.data = 'Empty';
                    $http
                        .get('/angular/demo/')
                        .then(function(result) {
                            console.log("Data Received");
                            console.log(result.data);
                            $scope.pageObj.data = result.data;
                        });
                    //console.log(result.data);
                    console.log("Hello state");
                }
            });
    });

Answer 1

I found a small solution with using factory. The question is still, how do I access my data? Data now is stored by an own controller i guess. I post my updated code below:

 var app = angular.module('myApp', ['ngSanitize', 'ngRoute', 'ui.router']).factory("dataService", function($http) { var data = ""; var getData = function() { return data; } var setData = function(newData) { data = newData; } return { getData: getData, setData: setData }; }); app.controller('FactoryCtrl', ['$scope', '$http', 'dataService', function($scope, $http, dataService) { $scope.mydata = dataService.getData(); console.log($scope.mydata); }]); app.config(function($stateProvider, $urlRouterProvider, $locationProvider) { $locationProvider.html5Mode(true); $urlRouterProvider.otherwise("/"); $stateProvider .state('state1', { url: '/state1', template: '<h1>{{pageObj.data}}</h1>', controller: function($scope, $http, dataService) { $scope.pageObj = ''; $scope.pageObj.url = '/angular/demo/'; $scope.pageObj.class = 'page-my'; $scope.pageObj.data = 'Empty'; $http .get('/angular/demo/') .then(function(result) { console.log("Data Received"); $scope.pageObj.data = result.data; //$scope.model.data = dataService.getData(); dataService.setData("a string"); //console.log(dataService.getData()); }); console.log("Hello state"); } }); });