使用AngularJS中的$stateProvider和ui.router

Using $stateProvider and ui.router in AngularJS

本文关键字：ui router stateProvider AngularJS 中的 使用      更新时间：2023-09-26

使用MeteorJS在AngularJS上完成本教程，但遇到了ui.router、$stateProvider和$locationProvider的一些问题。

我的问题是，据我所知，所有东西都应该正确连接以进行路由，但我的链接实际上不起作用。我的主要文件的内容如下，但首先是关于问题的更多信息：

问题似乎出在线路//$locationProvider.html5mode（true）上；在app.js中。它当前已被注释掉，这允许加载页面，但无法正确路由链接。如果我取消注释，那么页面返回以下错误：

Uncaught Error: [$injector:modulerr] Failed to instantiate module socially due to:
TypeError: undefined is not a function

我假设$locationProvider是未定义的。这看起来很像一个依赖注入错误，但我找不到任何依赖注入错误。非常感谢您的帮助。

app.js

if (Meteor.isClient){
    angular.module("socially", ['angular-meteor', 'ui.router']);
    angular.module("socially").config(['$urlRouterProvider', '$stateProvider', '$locationProvider', function($urlRouterProvider, $stateProvider, $locationProvider) {
        $stateProvider
            .state('parties', {
                url: '/parties',
                templateUrl: 'parties-list.ng.html',
                controller: 'PartiesListCtrl'
            })
            .state('partyDetails', {
                url: '/parties/:partyId',
                templateUrl: 'party-details.ng.html',
                controller: 'PartyDetailsCtrl'
            });
        $urlRouterProvider.otherwise('/parties');
        //$locationProvider.html5mode(true);
    }]);
    angular.module("socially").controller("PartiesListCtrl", ['$scope', '$meteor', function($scope, $meteor){
        $scope.parties = $meteor.collection(Parties);
        $scope.remove = function(party){
            $scope.parties.remove(party);
        };
        $scope.removeAll = function(){
            $scope.parties.remove();
        };
    }]);
    angular.module("socially").controller('PartyDetailsCtrl', ['$scope', '$stateParams', function($scope, $stateParams){
        $scope.partyId = $stateParams.partyId;
    }]);
}

index.html

<head>
    <base href="/">
</head>
<body>
    <div ng-app="socially">
        <h1>
            <a href="/parties">Home</a>
        </h1>
        <div ui-view></div>
    </div>
</body>

各方列表.ng.html

<form>
    <label>Name</label>
    <input ng-model="newParty.name">
        <label>Description</label>
    <input ng-model="newParty.desc">
    <button ng-click="parties.push(newParty)">Add</button>
</form>
<ul>
    <li ng-repeat="party in parties">
        <a href="/parties/{{party._id}}">{{party.name}}</a>
        <p>{{party.desc}}</p>
        <p>{{party.name}}</p>
        <button ng-click="remove(party)">X</button>
    </li>
</ul>

参与方详细信息.ng.html

Here you will see the details of party number: {{ partyId }}

我最近也刚开始使用流星角。经过测试，您的问题似乎是一个简单的小写"m"。我明白"5"怎么会让骆驼案变得混乱。

更正：$locationProvider.html5Mode(true);

相关文章：