未显示数据从 ngRoute 转换为 UI.Router

Question

我只想从 ngRoute 切换到 ui.router。

我从 Spring Security and Angular JS 中获取基本源代码（OAuth2 授权服务器、OAuth2 UI、OAuth2 资源）

添加了对 OAuth2 的依赖UI

<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> 到 wro.xml 并删除了 <js>webjar:angularjs/1.4.9/angular-route.js</js>

我把hello.js改成了

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到

<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>

问题

如何在

处没有显示数据

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>

如果我访问 http://localhost:9000/resource 我得到了类似的东西

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

但未显示。

Answer 1

在 home.html 中，您的模板类似于 {{controller.greeting.id}}，但 angular 不知道 controller 是什么意思。

所以，home 的状态需要这样修改：

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

然后模板就会知道controller指的是什么。

未显示数据从 ngRoute 转换为 UI.Router

No Data shown convert from ngRoute to UI.Router

angularjs

spring-boot

oauth2

问题

未显示数据 从 ngRoute 转换为 UI.Router

No Data shown convert from ngRoute to UI.Router

angularjs

spring-boot

oauth2

问题

未显示数据从 ngRoute 转换为 UI.Router