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-router不替换index.html

1 个答案: