Angular JS ui路由器没有显示模板(没有js控制台错误)

时间:2016-07-15 02:12:47

标签: javascript angularjs angular-ui-router

我只是第一次看AngularJS应用程序。遵循教程中的一些步骤,但最后ui路由器没有显示任何内容。 Firebug没有显示任何JS错误或警告

我的app.js文件:

var app = angular.module("CRI", ["ui.router"]);

    app.config(function ($stateProvider) {

        $stateProvider
            .state("Login", {
                url: "/",
                controller: "LoginController",
                templateUrl: "views/login.html"
            })
    })

index.html文件:

<!DOCTYPE html >
<html ng-app="CRI">
    <head>
        <title>LOGIN</title>
        <meta charset="UTF-8"></meta>
        <link href='https://fonts.googleapis.com/css?family=Open+Sans:400,300,300italic,400italic,600,600italic,700,800,700italic,800italic|Open+Sans+Condensed:300,700,300italic&subset=latin,latin-ext,cyrillic-ext,cyrillic' rel='stylesheet' type='text/css'>
        <link rel="stylesheet" href="css/korisnik.css" />
        <script src="https://code.jquery.com/jquery-3.1.0.js" integrity="sha256-slogkvB1K3VOkzAI8QITxV3VzpOnkeNVsKvtkYLMjfk=" crossorigin="anonymous"></script>
        <script type="text/javascript" src="js/easypiechart.js"></script>
        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.6/Chart.js"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.15/angular-ui-router.js"></script>
        <script src="app.js"></script>
        <script src="controllers/loginController.js"></script>
    </head>

    <body>

        <div ui-view></div>

    </body>
</html>

控制器:

app.controller("LoginController", function($scope, $http){

})

模板保存在views / login.html

1 个答案:

答案 0 :(得分:1)

要使用根路径,状态配置url属性应为空字符串,而不是'/'

$stateProvider.state("Login", {
  url: "",
  controller: "LoginController",
  templateUrl: "views/login.html"
});

http://plnkr.co/edit/Iypm5fXgpcrLS7Smlc62?p=preview