Angularjs   发布时间:2022-04-20  发布网站:大佬教程  code.js-code.com
大佬教程收集整理的这篇文章主要介绍了AngularJS ui路由器不工作大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
我也是新的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');

大佬总结

以上是大佬教程为你收集整理的AngularJS ui路由器不工作全部内容,希望文章能够帮你解决AngularJS ui路由器不工作所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。