Question

编辑：这是plunker

我对ui-router的问题感到有些失望，因为它是一个非常基本的用途。

我有一个欢迎ui-views的“空”html索引文件。我创建了两个主要模板：application.html和public.html。基本上他们有2个不同的页眉/页脚。

的index.html

 <div ui-view="">    
  <!-- encapsulate app/public -->
  <a ui-sref="app">app</a>
 </div>

APP-routes.js

 var myApp = angular.module('taApp',      ['ui.router','ui.bootstrap','ui.sortable', 'ngResource']);
   myApp.config(function($stateProvider, $urlRouterProvider) {
   //

   // For any unmatched url, redirect to /auth
   $urlRouterProvider.when("", "/auth");
   $urlRouterProvider.when("/", "/auth");
   $urlRouterProvider.otherwise("/auth");

   $stateProvider
   .state('public', {
    url:'',
    abstract: true,
        templateUrl: 'public.html',
        /*views: {
        'topbar': { template: 'public.topbar' },
        'login': { template: 'public.login' }
        }*/
     })
     .state('auth', {
         url: '/auth',
         templateUrl: '/partials/login/loginCard.html'
     })

     /*** LOGGED STATES ***/
     //login
     .state('app', {
         templateUrl: 'application.html',
         controller: 'authCtrl',
       url: '/app'
     })
  });

注意：ui-sref状态也不起作用，因为它应该加载'app'状态。我还试图强制ui-view="app"或"public"没有成功

我在angular-ui-router上使用gulp个包。

有些东西我错过了，无法弄清楚。

Answer 1

有a working plunker

我想标记为抽象的public状态应该是所有状态的父级。所以我们需要像这样调整状态def：

  $stateProvider
    .state('public', {
      url: '',
      abstract: true,
      templateUrl: 'public.html',
      /*views: {
    'topbar': { template: 'public.topbar' },
    'login': { template: 'public.login' }
    }*/
    })
    .state('auth', {
      parent: 'public',
      url: '/auth',
      templateUrl: 'partials/login/loginCard.html'
    })

  /*** LOGGED STATES ***/
  //login
  .state('app', {
    parent: 'public',
    templateUrl: 'application.html',
    controller: 'authCtrl',
    url: '/app'
  })

默认情况下，任何子状态都将其视图插入父级。因此，我们必须确保父模板 public.html 包含

<div ui-view=""></div>

还有其他方法，但这是最简单的方案

Answer 2

根据更新后的相关to this plunker问题，我更新了该问题并make it working。

首先，必须首先加载角度

<script src="script.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.15/angular-ui-router.min.js"></script>

我们需要这个

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.15/angular-ui-router.min.js"></script>
<script src="script.js"></script>

此外，因为我们的应用程序"taApp"已定义：

var myApp = angular.module('taApp', 
[
    'ui.router' //,'ui.bootstrap','ui.sortable', 'ngResource'
]);

我们已将其添加到index.html

中

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

正如我们所看到的，因为我们没有引用其他模块（在index.thml中）我不得不将它们注释掉

 'ui.router' //,'ui.bootstrap','ui.sortable', 'ngResource'

但是一旦他们的代码被添加到页面中......它将与他们一起使用。所以，这个例子是no working here

ui-router：没有绑定，没有加载没有错误

2 个答案: