Question

我的项目将文件设为home，page1，page2。我的主页与其他页面的页眉布局不同。所以，它是一个单独的html文件。 page1和page 2使用ui路由加载页面内容，但页眉和页脚是相同的。

我的问题是：如果我在主页上并单击btn 1.如何将其加载到page1的内容中？（它将加载index.html，但没有btn1的内容。）

我不确定是否将id传递给index.js是一个解决方案，我不知道如何做到这一点。将整个事物变成SPA会更有意义吗？

我的home.html有按钮：

<a type="text/html" href="home.html"  class="button home_btn">Home</a>
<a type="text/html" href="index.html" class="button my_btn1">Page1</a>
<a type="text/html" href="index.html" class="button my_btn2">Page2</a>

我的idex.html：

<body>
    <div class="container" ng-app="app">
      <header ng-include="'html/header.html'"></header>
        <div ui-view></div>
      <footer ng-include="'html/footer.html'"></footer>
    </div>
  </body>
  <script src="vendors/angular/angular.js"></script>
  <script src="vendors/angular-ui-router/release/angular-ui-router.js     </script>
  <script src="scripts/index.js"></script>

我的header.html：

<div id="headerLinks">
            <a type="text/html" href="home.html" class="button home_btn">Home</a>
            <a type="text/html" ui-sref="page1" class="button my_btn1">Page1</a>
            <a type="text/html" ui-sref="page2" class="button my_btn2">Page2</a>
        </div>
    </div>

我的index.js：

    var app = angular.module('app', ['ui.router']);
    app.config(['$urlRouterProvider', '$stateProvider', function($urlRouterProvider, $stateProvider) {
        $urlRouterProvider.otherwise('/');
        $stateProvider
          .state('Page1', {
            url: 'Page1',
            templateUrl: 'Page1.html',
            controller: 'Page1Ctrl'
          })
          .state('Page2', {
            url: 'Page2',
            templateUrl: 'Page2.html',
            controller: 'Page2Ctrl'
          })

  }])

Answer 1

我对现在的问题感到困惑，因为我看到它。我相信我在问如何构建一个有多个页面的路由器。我得到了它的工作。如果这没有帮助，我会看看我是否能找到资源或更好地解释它。

导入angular-ui-router。

<script src="vendors/angular-ui-router/release/angular-ui-router.js" type="text/javascript"></script>

这就是我的index.js文件现在的样子。它有多个视图，允许不同的标题或内容或页脚或其他。

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

app.config(['$urlRouterProvider', '$stateProvider', function($urlRouterProvider, $stateProvider, $state) {
  $urlRouterProvider.otherwise('/'); 
  $stateProvider
  .state('home',{
    url: '/home',
    views: {
      'header': {
        templateUrl: 'html/headerHome.html',
        controller: 'headCtrl'
      },
      'content': {
        templateUrl: 'home.html',
        //controller: 'ContentController' 
      }
    }
  })
  .state('page1', {
    url: '/page1',
    views: {
      'header': {
        templateUrl: 'html/header.html',
        controller: 'headCtrl'
      },
     'content': {
        templateUrl: 'page1.html',
        controller: 'page1Ctrl'
      }
    }
  })
  .state('page2', {
    url: '/page1',
    views:{
      'header':{
        templateUrl: 'html/header.html',
        controller: 'headCtrl'
      },
      'content':{
        templateUrl: 'page2.html',
        controller: 'page2Ctrl'
      }
    }
  })

angular-ui路由器有两个html页面

1 个答案: