データがありませんngRouteからUI.Routerに変換する

ngRouteからui.routerに切り替えるだけです。データがありませんngRouteからUI.Routerに変換する

Iは

はのOAuth2 UIにwro.xml に

<dependency> 
    <groupId>org.webjars</groupId> 
    <artifactId>angular-ui-router</artifactId> 
    <version>0.2.18</version> 
</dependency>

と<js>webjar:angular-ui-router/0.2.18/angular-ui-router.js</js>の依存関係を加え、<js>webjar:angularjs/1.4.9/angular-route.js</js>

を除去 Spring Security and Angular JS （のOAuth2認証サーバ、のOAuth2 UI、のOAuth2リソース）から、基本的なソースコードを取ります

変更しましたhello.jsを

に変更しました

<html> 
<head> 
    <title>Hello AngularJS</title> 
    <link href="css/angular-bootstrap.css" rel="stylesheet"> 
    <style> 
     .navbar { 
      border-radius: 0; 
     } 
    </style> 
</head> 
<body ng-app="hello"> 
    <!-- NAVIGATION --> 
    <nav class="navbar navbar-inverse" role="navigation"> 
     <div class="navbar-header"> 
      <a class="navbar-brand" data-ui-sref="home">AngularUI Router</a> 
     </div> 
     <div ng-controller="navigation as nav" class="container"> 
      <ul class="nav navbar-nav"> 
       <li><a data-ui-sref="home">Home</a></li> 
       <li><a data-ui-sref="about">About</a></li> 
       <li><a href="login">login</a></li> 
      </ul> 
     </div> 
    </nav> 

    <!-- MAIN CONTENT --> 
    <div class="container"> 

     <!-- THIS IS WHERE WE WILL INJECT OUR CONTENT ============================== --> 
     <div data-ui-view></div> 

    </div> 
    <script src="js/angular-bootstrap.js" type="text/javascript"></script> 
    <script src="js/hello.js"></script> 
</body> 
</html>

から

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

hello.config(function($stateProvider, $urlRouterProvider, $httpProvider) { 

    $urlRouterProvider.otherwise('/home'); 

    $stateProvider 

    // HOME STATES AND NESTED VIEWS ======================================== 
    .state('home', { 
    url: '/home', 
    templateUrl: 'home.html', 
    controller: 'home' 
    }) 

    // ABOUT PAGE AND MULTIPLE NAMED VIEWS ================================= 
    .state('about', { 
    // we'll get to this in a bit  
    }); 
    $httpProvider.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest'; 
    $httpProvider.defaults.headers.common['Accept'] = 'application/json'; 
}); 

hello.controller('navigation', 

    function($rootScope, $http, $location, $state) { 

    var self = this; 

    self.tab = function(route) { 
     return $state.params && route === $state.params.controller; 
    }; 

    $http.get('user').then(function(response) { 
     if (response.data.name) { 
     $rootScope.authenticated = true; 
     } else { 
     $rootScope.authenticated = false; 
     } 
    }, function() { 
     $rootScope.authenticated = false; 
    }); 

    self.credentials = {}; 

    self.logout = function() { 
     $http.post('logout', {}).finally(function() { 
     $rootScope.authenticated = false; 
     $location.path("/"); 
     }); 
    } 

    }); 

hello.controller('home', function($http) { 
    var self = this; 
    $http.get('resource/').then(function(response) { 
    self.greeting = response.data; 
    }); 
});

そしてindex.htmlはデータが私はhttp://localhost:9000/resourceにアクセスする場合、私のようなものを持って

home.html

<h1>Greeting</h1> 
<div ng-show="authenticated"> 
    <p>The ID is {{controller.greeting.id}}</p> 
    <p>The content is {{controller.greeting.content}}</p> 
</div> 
<div ng-show="!authenticated"> 
    <p>Login to see your greeting</p> 
</div>

で示されていないどのように質問

その

{ 
    "id": "81e5fa45-67f8-41a2-b373-26b100bfd997", 
    "content": "Hello World" 
}

しかしそれは示されていない。

出典

2016-12-17 Maisl

何かを見たり、何も見えませんか？コンソールにエラーはありますか？ – 31piy

こんにちはエラーはありません。この{{controller.greeting.id}}ではなく、ほぼすべてを見ることができます。コンソールではリソースがロードされますが、アクセス戦略を変更する必要があると思います。 – Maisl

home.htmlでは、あなたのテンプレートは{{controller.greeting.id}}のようですが、角度は何を意味するのかはわかりません。controller

ので、家のための状態は次のように修正する必要があります。

.state('home', { 
    url: '/home', 
    templateUrl: 'home.html', 
    controller: 'home', 
    controllerAs: 'controller' 
})

その後、テンプレートはcontrollerが参照するか知っているだろう。

出典

2016-12-18 04:06:02 31piy

また、変数の 'controller'を削除することもできます。 –

@PauloGaldoSandoval：その場合、彼は 'home'コントローラの' $ scope'で 'controller'を宣言する必要があります。 – 31piy

少なくとも私は愚かだと思うが、これはうまくいく。ありがとう – Maisl

データがありませんngRouteからUI.Routerに変換する

答えて

関連する問題