沒有顯示數據從ngRoute轉換為UI.Router

Question

我只想從ngRoute切換到ui.router 。

我從Spring Security和Angular JS （OAuth2 Auth Server，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含義。

因此，需要像下面這樣修改家庭狀態：

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

然后，模板將知道controller指的是什么。

沒有顯示數據從ngRoute轉換為UI.Router

問題描述

問題

1 個解決方案

解決方案1
1 已采納 2016-12-18 04:06:02

沒有顯示數據從ngRoute轉換為UI.Router

問題描述

問題

1 個解決方案

解決方案1 1 已采納 2016-12-18 04:06:02

解決方案1
1 已采納 2016-12-18 04:06:02