未加载Angular UI嵌套状态模板



Index.html

    <!doctype html>
<html ng-app="testApp">
<head>
    <meta name="viewport" content="width=device-width">
    <link rel="Shortcut Icon" type="image/ico" href="img/favicon.png">
    <link rel="stylesheet" href="styles/vendor.css">
    <link rel="stylesheet" href="styles/app.css">
</head>
<body id="wrap">
<div ui-view></div>
<script src="js/vendor.js"></script>
<script src="js/app.js"></script>
</body>
</html>

app.js

"use strict";
var TestApp = angular.module("testApp",["ui.router"])
    .config(["$urlRouterProvider","$stateProvider",function(a,b) {
    a.otherwise("test", {
        url: "/test",
        title: "Test",
        template:"<p>Test</p>"
    })
}]);

这是我的目录结构testAppJS-->app.JSindex.html

请更正我的代码

UI路由器是关于状态的。因此,我们必须调用$stateProvider.state()来定义状态。如果url与注册状态不匹配,则$urlRouterProvider方法.otherwise()应作为默认导航服务器:

.config(["$urlRouterProvider","$stateProvider"
,function($urlRouterProvider,$stateProvider) {
  // instead of this
  a.otherwise("test", {
  // we need to call .state
  $stateProvider.state("test", {
    url: "/test",
    title: "Test",
    template:"<p>Test</p>"
  })
  // and also some defaults
  // but not state name 'test', it should be url '/test'
  $urlRouterProvider.otherwise("/test")

最新更新