ui路由器不显示模板

时间:2016-01-13 10:44:32

标签: javascript angularjs angular-ui-router

我开始使用ui-router,但ui-view中没有显示任何内容。将所有内容简化为最小化,我将其添加到planker中仍然无效。我的项目:https://plnkr.co/edit/ERyqonTWZyEhzXd77z0M?p=preview

的index.html:

<!DOCTYPE html>
<html>

<head>

<script data-require="angular.js@1.4.8" data-semver="1.4.8" src="https://code.angularjs.org/1.4.8/angular.js"></script>
<script data-require="ui-router@*" data-semver="0.2.15" src="https://cdn.rawgit.com/angular-ui/ui-router/805e69bae319e922e4d3265b7ef565058aaff850/release/angular-ui-router.js"></script>
<script src="mainModule.js"></script>
<script src="mainController.js"></script>
</head>

<body ng-app="mainModule">
<h1>This is our views:</h1>
<div ui-view></div>
</body>

</html>

mainModule.js:

angular.module("mainModule",["ui.router"])
.config(function ($stateProvider, $urlRouterProvider) {
    $urlRouterProvider.otherwise("/");

    $stateProvider.
        state("adminLogin",{
            url:"/",
            templateURL:"view1.html",
            controller:"coolController"

        }).
        state("adminPanel",{
            url:"/adminPanel",
            templateURL:"view2.html",
            controller:"coolController"
        })

});

mainController.js:

angular.module("mainModule")
.controller("coolController",['$scope','$state',function($scope, $state) {
    $scope.adminData = {
        login: undefined,
        password: undefined
    }
}])

view1.html:

<div>YOU DID IT!!</div>

view2.html:

<h1>It's admin Page!</h1>

我希望有人可以帮我解决问题,因为我花了很多时间试图解决问题,但没有任何帮助=(

2 个答案:

答案 0 :(得分:1)

外部模板的参数为templateUrl而不是templateURL

答案 1 :(得分:0)

使用templateUrl代替templateURL

您的state定义中有拼写错误。使用templateUrl代替templateURL

https://plnkr.co/edit/0OAIoXc8Wa9sWNbt65Is?p=preview

angular.module("mainModule",["ui.router"])
    .config(function ($stateProvider, $urlRouterProvider) {

        $stateProvider.
            state("adminLogin",{
                url:"/",
                templateUrl:"view1.html",
                controller:"coolController"

            }).
            state("adminPanel",{
                url:"/adminPanel",
                templateUrl:"view2.html",
                controller:"coolController"
            })

        $urlRouterProvider.otherwise('/');

    });