Angularjs 路由不适用于Angular UI路由器_Angularjs_Angular Ui Router

Angularjs 路由不适用于Angular UI路由器

angularjs

Angularjs 路由不适用于Angular UI路由器,angularjs,angular-ui-router,Angularjs,Angular Ui Router,我有以下代码使用Angular UI Router设置路由： 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&

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

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>


AngularJS路由
“严格使用”
var myApp=angular.module（'myApp'，['myApp.Controllers'，'ui.router']）；
var myAppControllers=angular.module（'myApp.Controllers'，[]）；
myApp.config（函数（$stateProvider、$urlRouterProvider、$locationProvider）{
$stateProvider.state（'view1'{
url:“/view1”，
控制器：“控制器1”，
templateUrl:“/partials/view1.html”
}).state（'view2'{
url:“/view2/：firstname/：lastname”，
控制器：“控制器2”，
决心：{
名称：函数（）{
返回['Misko'、'Voita'、'Brad']；
},
},
templateUrl:“/partials/view2.html”
});
$urlRouterProvider。否则（'/view1'）；
$locationProvider.html5Mode（true）；
});
控制器（'Controller1'，函数（$scope、$location、$state）{
$scope.loadView2=函数（）{
$state.go（'view2'{
firstname:$scope.firstname，
lastname:$scope.lastname
});
}
});
控制器（'Controller2'，函数（$scope，$stateparms，name）{
$scope.firstname=$stateParams.firstname；
$scope.lastname=$stateParams.lastname；
$scope.names=名称；
});

视图1
视图2

我检查了多次，在chrome浏览器的控制台窗口中并没有看到任何错误

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

您的html代码中没有

ui视图

指令。因此，视图无处渲染。你至少应该加上

<div ui-view></div>

显示视图的内容。

html代码中没有

ui视图

指令。因此，视图无处渲染。你至少应该加上

<div ui-view></div>

以显示视图的内容。

是否在本地服务器上启动此应用程序？否，我使用Visual Studio 2013运行此应用程序。是否在本地服务器上启动此应用程序？否，我使用Visual Studio 2013运行此应用程序。非常感谢。它为我解决了这个问题：）。非常感谢。它为我解决了这个问题：）。