Question

Angular UI-Router无法正常工作？请在plunker上查看我的代码。

我试图在角度js中运行一个非常基本的路由示例。但welcomeView.html未出现在页面上。

(function() {
  "use strict"
  var app = angular.module("plunker", ["ui.router"]);

  app.config(["$stateProvider", "$urlRouterProvider",
    function($stateProvider, $urlRouterProvider) {
      $urlRouterProvider.otherwise("/");
      $stateProvider
        .state("home", {
          url: "/",
          templateUrl: "welcomeView.html"
        })
    }
  ]);
}());

Answer 1

有updated and working version

首先，我们需要在模块中添加对 app.js 的引用

<head>
  ...
  <script src="app.js"></script> // was missing
  <script src="script.js"></script> 
 </head>

另外，我们不应该使用ng-controller，我们不需要使用UI-Router

//<body ng-controller="MainCtrl">
<body>

另一方面， app.js 应包含controller : "..."

  $stateProvider
    .state("home", {
      url: "/",
      templateUrl: "welcomeView.html",
      // declare it here
      controller: "MainCtrl",
    })

然后，在 script.js 中，我们无法重新定义模块plunker （使用setter） - 我们必须将它（使用getter）

// this would redefine the app.js stuff
//var app = angular.module('plunker', []);
// just a getter to get that module
var app = angular.module('plunker');

app.controller('MainCtrl', function($scope) {
  $scope.name = 'World';

});

检查action here

中的所有内容

Angular UI-Router非常基本的例子不起作用？请参阅plunker的完整代码

1 个答案: