Question

我有一个使用ui-router的angularjs应用程序，当我访问以下网址 http://localhost:63342/UIRouter/customlogin 时，根据配置的ui-route，它必须显示customlogin.html页面，但是不，它给出了404错误页面

在上面的url中UIRouter是应用程序名称，而/ customlogin是状态的url。

有人可以帮我解决这个问题吗...请

下面是plnkr url

https://plnkr.co/edit/SPOr9IUWWSAIxNbfnBox?p=preview

下面是我的文件

baseApp.js

angular.module('baseApp',['baseApp.routes']);

baseApp.routes.js

angular.module('baseApp.routes',['ui.router'])
    .config(['$stateProvider','$urlRouterProvider','$httpProvider',function($stateProvider,$urlRouterProvider,$httpProvider){

    console.log("in view");
    $stateProvider
        .state("login",{
            url:'/customlogin',
            templateUrl:'customlogin.html',
            controller:'ContactLoginCtrl'
        })
    $urlRouterProvider.otherwise("/customlogin");
}]) ;

ContactLoginCtrl.js

angular.module('baseApp')
.controller('ContactLoginCtrl', ['$scope',function($scope){
    console.log("in the controller")

}])

customlogin.html

<html lang="en" ng-app="baseApp">
<body>
<form name="contactLogin" ng-controller="ContactLoginCtrl"  ng-submit="authenticate(userModel)">
    <label  for="name" >UserName:</label>
    <input  type="text" ng-model="userModel.username" /></br>
    </br>

    <label for="password" >PassWord:&nbsp;</label>
    <input type="password" ng-model="userModel.password"  />
    </br>
    </br>
    <button type="submit"  name="Login" >Login</button>

</form>
<script src="angular.min.js"></script>
<script src="angular-ui-router.min.js"></script>
<script src="baseApp.js"></script>
<script src="baseApp.routes.js"></script>
</body>
</html>

Answer 1

在其他调整中，最重要的是 - 为状态设置目标。我们需要：

<div ui-view></div>

有adjusted and working plunker

Angularjs UI.router未显示初始模板

1 个答案: