使用 Angular ui.router 如何从标准 html Angular 页面开始,然后前进到文件夹内带有 ui.router 模板的页面?

问题描述 投票:0回答:1

我有一个标准的角度页面,不与任何 ui.router 功能(index.html)关联。在该页面中,我单击一个触发 Angular 调用的链接,然后经过一些操作后,需要将流程重定向到使用 angular-ui.route 模板的文件夹内的页面。

我创建了一个 Plunker 来代表这一点: http://plnkr.co/edit/7UQTlMRQBMXGaRdHlPfs?p=preview(当前 Plunker 正在工作,但第一页上有一个循环试图调用使用 $urlRouterProvider.otherwise('events'); 创建的默认状态)

index.html

<!DOCTYPE html>
<html ng-app="app">
  <head>
   <script data-require="[email protected]" data-semver="1.3.16" src="https://code.angularjs.org/1.3.16/angular.js"></script>
   <script data-require="ui-router@*" data-semver="0.2.15" src="//rawgit.com/angular-ui/ui-router/0.2.15/release/angular-ui-router.js"></script>
   <script type="text/javascript" src="app.js"></script>
  </head>
       
  <body ng-controller="LoginController as lgCtrl">
    <h1>This page does not use ui.router</h1>
    <a href="manage/home.html" ng-click="goToEvents()">Login</a>
  </body>

</html>

带有 ui-view 标签的页面位于管理文件夹内: 管理/home.html

<!DOCTYPE html>
<html ng-app="app">

  <head>
    <script src="https://code.angularjs.org/1.3.16/angular.js" data-semver="1.3.16" data-require="[email protected]"></script>
    <script data-require="ui-router@*" data-semver="0.2.15" src="//rawgit.com/angular-ui/ui-router/0.2.15/release/angular-ui-router.js"></script>
     <script type="text/javascript" src="../app.js"></script>
  </head>

  <body ng-controller="EventsController as evtCtlr">
    <h1>Hello manage/home.html</h1>
    <div ui-view></div>
  </body>

</html>

要插入的templateUrl页面为: 管理/events.html

<div ng-controller="EventsController as evtCtrl">
  <h3>Events Page</h3>
  <div>Some user email</div>
</div>

app.js

'use strict';
(function () {
    var app = angular.module('app', ['ui.router']);
    /**
     * Configuration for ui-router module. Handles navigation based on app states.
     */
    app.config(function ($stateProvider, $urlRouterProvider) {
      
      $urlRouterProvider.otherwise('events');
        
        $stateProvider
            .state('events', {
                url: '/events',
                views:{
                  '@manage/home':{
                  templateUrl: 'manage/events.html'  
                  }
                }
        });
    });
    
    app.controller('LoginController', ['$scope','$window', '$state',
      function($scope, $window, $state){
        $scope.goToEvents = function(){
          console.log('trying to load events');
          //this call doesn't work, 404 - It should?? -->> see reference
          //https://github.com/angular-ui/ui-router/wiki/URL-Routing
          $window.location.href = 'manage/home.html/events';
          
          //don't work
          //$state.transitionTo('events');
          
          //also don't work
          //$state.go('events');
        };
    }]);
    
    app.controller('EventsController', [function(){
        console.log('EventsController');
    }]);
    
})();

我创建了一个代表这一点的 plunker: http://plnkr.co/edit/7UQTlMRQBMXGaRdHlPfs?p=preview

我尝试了从第一个非 ui.router 页面移动的不同方法,但到目前为止没有任何效果。

最好的方法是什么?

angularjs angular-ui-router
1个回答
2
投票

首先,不要将

$state
作为依赖项注入
LoginController
中,因为与此控制器相关的视图不是 UI 路由。添加
$state
依赖项会导致您在示例中看到的循环,即 UI-Router 然后将此视图视为路由。由于没有状态与此路由匹配,它会尝试加载默认状态,该状态的模板具有相对 URL,然后在 Plunkr 的错误目录中查找它,这会导致 404 错误。

其次,要通过 location.href 重定向的 URL 应该有一个哈希值,否则也会给出 404

代码

LoginController

app.controller('LoginController', ['$scope', '$window',
  function($scope, $window) {
    $scope.goToEvents = function() {
      //Do Something
      $window.location.href = 'manage/home.html#/events';
    };
  }
]);

查看工作示例:http://plnkr.co/edit/K2iBYu?p=preview

© www.soinside.com 2019 - 2024. All rights reserved.