Ui路由器无法正常工作?

时间:2017-01-21 06:23:30

标签: angularjs angular-ui-router

我的简单路由器似乎不起作用,这是我的app.js

var module = angular.module('ngFirstApp',['ui.router']);

module.config(function($stateProvider, $urlRouterProvider) {
        $stateProvider.state("home",{
            url: "/home",
            template: "This is home"
        });
});

module.controller('ngController',function($scope){
        $scope.greeting = 'hello world';
});

我的html就是这个

<!DOCTYPE html>
<html ng-app="ngFirstApp">
<head>
    <meta charset="utf-8">
    <title>My first app in Angular js</title>

    <link rel="stylesheet" href="js/libs/bootstrap-css-only/bootstrap.min.css">
    <link rel="stylesheet" href="js/libs/bootstrap-css-only/bootstrap-theme.min.css">
</head>
<body ng-controller="ngController">
    <div>
        <h1>{{ greeting }}</h1>
        What the heck is goin on here!!
        <div ui-view></div>
    </div>
    <!-- This is angularjs itself -->
    <script type="text/javascript" src="js/libs/angular/angular.js"></script>

    <!-- These came from cdnjs angular-ui-bootstrap -->

    <script type="text/javascript" src="js/libs/angular-bootstrap/ui-bootstrap.min.js"></script>
    <script src="js/libs/angular-bootstrap/ui-bootstrap-tpls.min.js"></script>

    <!-- Ui router -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.4.0/angular-ui-router.min.js"></script>
    <!-- These are custom files -->
    <script type="text/javascript" src="app.js"></script>

</body>
</html>

当我去localhost:3000 / home时,它说不能回家?什么是我的代码错了..请noob angularjs

1 个答案:

答案 0 :(得分:0)

我在学习angularjs时找到了解决方案。

当您使用路线并输入您尚未设置的URL时,状态

localhost:2311/words-not-set-in-your-state-declaration

你需要放urlRouterProvider.otherwise('/your-default-state');

所以你没有得到#!/state-here,你必须完全按照这样的方式打开html5模式:

$locationProvider.html5Mode({enabled:true,requireBase: false});

$locationProvider.html5Mode(true);否则您的浏览器控制台会抱怨:)

相关问题