Question

我是一个新的AngularJs开发者，我正在使用Spring MVC和angularJs在java Web应用程序上工作。

我想在我的项目中包含ui-router，但我遇到了一些问题。

我试图了解AngularJs中嵌套状态如何与ui-router一起使用。但是，它不起作用。实际上，ui-routing不能正常工作，我不会这样做。知道原因

我制作并举例说明了一个结构如下的示例测试项目：

这是我的index.html文件

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
    <script src="js/angular.min.js"></script>
    <script src="js/angular-ui-router.min.js"></script>
    <script src="js/app.js"></script>
    <title>Test angularJs Nesting</title>
</head>
<body ng-app="example">
    This is the index level
    <br>
    <div ui-view></div>
</body>
</html>

这是我的app.js文件

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

example.config(function($stateProvider, $urlRouterProvider){
    $stateProvider
        .sate("settings", {
            url: "/settings",
            templateUrl: "templates/settings.html"
        })
        .sate("settings.profile", {
            url: "/profile",
            templateUrl: "templates/profile.html"
        })
        .sate("settings.account", {
            url: "/account",
            templateUrl: "templates/account.html"
        });
        $urlRouterProvider.otherwise("/settings/profile");

});

这是我的settings.html文件

This is our settings layout
<br>
<a ui-sref="settings.profile">Show Profile</a>
<a ui-sref="settings.account">Show Account</a>
<div ui-view></div>

这是我的profile.html文件

<div>
    This is a profile page
</div>

这是我的account.html文件

<div>
    This is a account page
</div>

我希望settings.html的内容显示在ui-view上。但事实并非如此。没有显示

请问，我的例子中缺少什么？我丢失了一些angularJs配置吗？

提前感谢您的回答

Answer 1

您的app.js文件中似乎有拼写错误。你应该写州，而不是国家。

example.config(function($stateProvider, $urlRouterProvider){
$stateProvider
    .state("settings", {
        url: "/settings",
        templateUrl: "../templates/settings.html"
    })
    .state("settings.profile", {
        url: "/profile",
        templateUrl: "../templates/profile.html"
    })
    .state("settings.account", {
        url: "/account",
        templateUrl: "../templates/account.html"
    });
    $urlRouterProvider.otherwise("/settings/profile");

});

修改

您还使用了templateUrls的相对链接。角度路由应该相对于您的主要javascript文件（在本例中为app.js）。因此，将URL固定到模板可能是导致错误的原因。我修改了上面的代码来反映这一点。

Answer 2

您可以强制它在运行模块中使用此状态

example.run(function ( $state){
  $state.go("settings");
});

Answer 3

请在用以下内容更新您的app.js代码后尝试。

＆＃13;

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="com.application.app" android:installLocation="preferExternal">

<!--permissions-->

<application
    android:allowBackup="true"
    android:icon="@mipmap/ic_launcher"
    android:label="@string/app_name"
    android:logo="@mipmap/ic_launcher"
    android:name="android.support.multidex.MultiDexApplication"
    android:theme="@style/AppTheme">

<!--...-->

</application>
</manifest>

＆＃13;

AngularJs嵌套的状态与ui路由器无法正常工作

3 个答案:

修改