"无法实例化模块ui.router"

时间:2016-05-02 08:48:59

标签: angularjs

问题很简单,答案可能很明显,但我真的无法在这里找出问题所在。

JSFIDDLE

如您所见,未生成任何链接且未加载任何视图。

我已经研究过相关的问题(例如this one),但它没有多大用处。

的index.html

import java.io.IOException;
import java.nio.file.Files;
import java.nio.file.Path;
import java.nio.file.Paths;

public class FileCopyTest {
public static void main(String[] args) {
    Path source = Paths.get("/Users/apple/Desktop/test.rtf");
    Path destination = Paths.get("/Users/apple/Desktop/copied.rtf");

    try {
        Files.copy(source, destination);
    } catch (IOException e) {
        e.printStackTrace();
    }
}
}

app.js

<nav class="navbar navbar-inverse" role="navigation">
  <div class="navbar-header">
    <a class="navbar-brand" ui-sref="#">AngularUI 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 Home Page</p>    
  </div>
</script>

修改

我应该提到我在我的小提琴的外部资源标签中包含了ui-router

这是由JSFiddle生成的:

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'
        });

}]);

编辑#2

这似乎是JSFiddle的外部资源而不是ui-router的问题。

Working example

3 个答案:

答案 0 :(得分:2)

ui.router是一个单独的模块。您需要下载它并包含一个脚本,例如从here下载

有一个默认的角度路由器,但也可能应该添加一个单独的脚本。

答案 1 :(得分:2)

您必须在index.html中包含angular-ui-router

您可以添加:

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

这是工作JSFIDDLE

答案 2 :(得分:1)

Angular UI-Router是AngularJS的客户端单页应用程序路由框架。用于SPA(单页应用程序)的路由框架在用户浏览应用程序时更新浏览器的URL。

Check this小提琴

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