Question

我是Angular JS的新手，我正在学习<?php header('Content-Type: application/json; charset="utf-8"'); $dirs = [ './HCL/2016', './HCL/2015', './HCL/2014', ]; $files = []; foreach ($dirs as $dir) { if (is_dir($dir)) { $files[basename($dir)] = glob($dir . '/*.pdf'); } } array_walk_recursive($files, function (&$entry) { $entry = basename($entry); }); echo json_encode($files, JSON_PRETTY_PRINT);。在这个基本示例中，我无法配置路由。

HTML：

ui-router

JavaScript：

<nav class="navbar navbar-inverse" role="navigation">
    <div class="navbar-header">
        <a clss="navbar-brand" ui-sref="#">Angular Ui router</a>
    </div>
    <ul class="nav navbar-nav">
        <li><a ui-sref="home">home</a></li>
        <li><a ui-sref="about">about</a></li>
    </ul>
</nav>
<div class="container">
  <div ui-view></div>
</div>

<script type="text/ng-template" id="home.html">
    <div class="jumbotron text-center">
        <h1>Welcome</h1>
        <p>This is the homepage</p>
    </div>
</script>

<script type="text/ng-template" id="about.html">
    <div class="jumbotron text-center">
        <h1>Welcome</h1>
        <p>This is the about</p>
    </div>
</script>

这是一个JSFiddle：

https://jsfiddle.net/shrideep/w6n93mqc/10/

Answer 1

您所在州的templateUrl应该是文件的路径，而不是脚本标记中的ID。

Answer 2

我已修复您的代码，您可以在此处查看完整代码：https://jsfiddle.net/w6n93mqc/11/

基本上，您需要将角度应用程序放在具有ng-app指令的根元素中，以便您的JS知道在DOM内部连接的位置。您还必须正确链接到您的模板 - 我不确定jcFiddle网站如何使用templateUrl，但它必须是包含模板的文件的路径。

以下是固定代码，以防您的链接过期：

<强>模板

<div ng-app="routerApp">
  <nav class="navbar navbar-inverse" role="navigation">
    <div class="navbar-header">
      <a clss="navbar-brand" ui-sref="#">Angular Ui router</a>
    </div>
    <ul class="nav navbar-nav">
      <li><a ui-sref="home">home</a></li>
      <li><a ui-sref="about">about</a></li>
    </ul>
  </nav>
  <div class="container">
    <div ui-view></div>
  </div>
</div>

<强> JS

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

routerApp.config(['$stateProvider','$urlRouterProvider',function($stateProvider,$urlRouterProvider){
  $urlRouterProvider.otherwise('/home');

  $stateProvider
    .state('home',{
      url:'/home',
      templateUrl:'home.html'   
    })
    .state('about',{
      url:'/about',
      templateUrl:'about.html'
    });
  }]);

希望有所帮助！

角度ui-router基本状态变化

2 个答案: