ui-路由器未替换 ui-在 index.html 中查看

Question

我已经在 VS 中设置了一个基本的 AngularJS 应用程序，但无法使 ui-router 功能正常工作。我看过视频、博客、SO 答案，据我所知，我做的一切都是对的，尽管我是网络开发的新手。

首先，这是解决方案结构：

和代码...

index.html:

<!DOCTYPE html>
<html>
    <head>
        <title>Example</title>
        <meta charset="utf-8" />
    </head>
    <body ng-app="app">
        <div ui-view></div>

        <script src="bower_components/angular/angular.js"></script>
        <script src="app/app.js"></script>
        <script src="bower_components/angular-ui-router/release/angular-ui-router.js"></script>
    </body>
</html>

app.js:

(function () {
    'use strict';

    angular.module('app', ['ui.router']);
})();

app.states.js:

(function () {
    'use strict';

    angular.module('app')
        .config(function ($stateProvider, $urlRouterProvider) {

            $urlRouterProvider.otherwise('/');

            $stateProvider
                .state('home', {
                    url: '/',
                    templateUrl: 'templates/test.html',
                    controller: 'testCtrl',
                    controllerAs: 'vm'
                })
        });
})();

test.html:

<div>
    <p>TEST PAGE</p>
</div>

testCtrl.js:

(function () {
    'use strict';

    angular.module('app')
        .controller('testCtrl', testCtrl);

    testCtrl.$inject = ['$state'];

    function testCtrl($state) {
        var vm = this;
        var userAuthenticated = false;

        init();

        function init() {
            $state.go('home');
        };
    };
})();

任何人都可以看到我哪里出错了吗？

Answer 1

有a working example

我会说，我想念你的这些台词 index.html

...
<script src="app/app.states.js"></script>
<script src="templates/testCtrl.js"></script>

这将加载关键状态定义和相关控制器。在action here

中查看

ui-路由器未替换 ui-在 index.html 中查看

ui-router not replacing ui-view in index.html

javascript

state

angularjs

angular-ui

angular-ui-router