AngularJS ui路由器不工作

发布时间：2020-12-17 08:30:02 所属栏目：安全来源：网络整理

导读：我也是新的AngularJS和ui路由器。我尝试根据我在教程中看到的模式构建一个应用程序，但它似乎并不工作。我插入两个警报语句，但他们不运行。也不显示projectlist.html。 JS控制台上没有错误。问题是什么？ JS： var EntityEditorApp = angular.module('Ent

我也是新的AngularJS和ui路由器。我尝试根据我在教程中看到的模式构建一个应用程序，但它似乎并不工作。我插入两个警报语句，但他们不运行。

也不显示projectlist.html。

JS控制台上没有错误。

问题是什么？

JS：

var EntityEditorApp = angular.module('EntityEditorApp',['ngResource','ui.router'])
    .config(function ($stateProvider,$urlRouterProvider) {
        $urlRouterProvider.otherwise('/');

        $stateProvider
            .state('/',{
                url: '/api/Projects',templateUrl: 'projectlist.html',controller: 'ListCtrl'
            });

    });

EntityEditorApp.factory('Project',function ($resource) {
    alert(1); // This does not run
    return $resource('/api/Project/:id',{ id: '@id' },{ update: { method: 'PUT' } });
});

var ListCtrl = function ($scope) {
    alert(1); // This does not run
    $scope.projects = [];
    $scope.search = function () {
        Project.query(function (data) {
            $scope.projects = $scope.projects.concat(data);
        });
    };

    $scope.search();
};

HTML：

<!DOCTYPE html>
<html ng-app="EntityEditorApp" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <script src="Scripts/jquery-1.10.2.js"></script>
    <script src="Scripts/bootstrap.js"></script>
    <script src="Scripts/angular.js"></script>
    <script src="Scripts/angular-route.js"></script>
    <script src="Scripts/angular-resource.js"></script>
    <script src="Scripts/AngularUI/ui-router.js"></script>
    <script src="Scripts/app/entityeditor.js"></script>
    <link href="Content/bootstrap.css" rel="stylesheet" />
    <title>AngularJS Tutorial Todo App</title>
</head>
<body>
    <div class="container">
        <div ng-view></div>
    </div>
</body>
</html>

您需要使用ui-view not ng-view

另外，否则()使用URL而不是路由名称。所以在你的情况下应该是：

$urlRouterProvider.otherwise('/api/Projects');

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!