Question

我有以下代码来使用Angular UI路由器设置路由：

的index.html

<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
    <meta charset="utf-8" />
    <title>AngularJS Routing</title>

    <script src="js/angular.js"></script>
    <script src="js/angular-ui-router.min.js"></script>
    <base href="/" />
    <script>
        'use strict'

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

        var myAppControllers = angular.module('myApp.Controllers', []);

        myApp.config(function ($stateProvider, $urlRouterProvider, $locationProvider) {
            $stateProvider.state('view1', {
                url: '/view1',
                controller: 'Controller1',
                templateUrl: '/partials/view1.html'
            }).state('view2', {
                url: '/view2/:firstname/:lastname',
                controller: 'Controller2',
                resolve: {
                    names: function () {
                        return ['Misko', 'Voita', 'Brad'];
                    },
                },
                templateUrl: '/partials/view2.html'
            });
            $urlRouterProvider.otherwise('/view1'); 

            $locationProvider.html5Mode(true);
        });


        myAppControllers.controller('Controller1', function ($scope, $location, $state) {
            $scope.loadView2 = function () {                    
                $state.go('view2', {
                    firstname: $scope.firstname,
                    lastname: $scope.lastname
                });
            }
        });

        myAppControllers.controller('Controller2', function ($scope, $stateParams, names) {
            $scope.firstname = $stateParams.firstname;
            $scope.lastname = $stateParams.lastname;
            $scope.names = names;
        });

    </script>
</head>
<body>

    <ul class="menu">
        <li><a ui-sref="view1">View1</a></li>
        <li><a ui-sref="view2">View2</a></li>
    </ul>  
    </body>
</html>

我多次检查过，我在Chrome浏览器的控制台窗口中看不到任何错误。

有人可以帮我解决这个问题吗？

Answer 1

你的html代码中没有ui-view指令。所以这些观点无处可见。你应该至少添加

<div ui-view></div>

显示观点的内容。

路由不适用于Angular UI路由器

1 个答案: