Javascript ui路由器未替换index.html中的ui视图_Javascript_Angularjs_Angular Ui Router_Angular Ui_State

Javascript ui路由器未替换index.html中的ui视图

javascript angularjs

Javascript ui路由器未替换index.html中的ui视图,javascript,angularjs,angular-ui-router,angular-ui,state,Javascript,Angularjs,Angular Ui Router,Angular Ui,State,我已经在VS中设置了一个基本的AngularJS应用程序，无法让ui路由器功能正常工作。我看过视频、博客、答案，据我所知，我做的每件事都是对的，尽管我对网络开发是全新的首先，这里是解决方案结构：而代码 index.html： <!DOCTYPE html> <html> <head> <title>Example</title> <meta charset="utf-8" />

我已经在VS中设置了一个基本的AngularJS应用程序，无法让ui路由器功能正常工作。我看过视频、博客、答案，据我所知，我做的每件事都是对的，尽管我对网络开发是全新的

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

而代码

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.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>

有人能看到我犯了错误的地方吗？

有

我想说，我错过了index.html中的这些行

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

。。。

这将加载关键状态定义和相关控制器。签入

谢谢Radim！我做了两个更改，添加了您提到的行，但更改了

，并在

app.states.js

中将templateUrl更改为

templateUrl:'app/templates/test.html'，

。我能问一下，为什么？我需要将这两个.js文件添加到index.html吗？看起来“不干净”。我以为这是生活的安排？对不起，我对网络开发还很陌生。换句话说，有没有其他方法可以实现同样的目标，而无需将这两个.js文件添加到index.html中？IIFE没有经验，但脚本必须加载到页面中，这就是重点

(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');
        };
    };
})();

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