Javascript 视图未按角度加载

问题

我的观点没有载入。我正在使用

ngAnimate

和

ui.router

。这是我与Angular合作的第一个项目，我正在努力学习

首先是我的文件结构

下一步我将发布我的主代码

控制器/form.js

/**
 * Created by ukcco1boa on 25/05/2017.
 */
    // our controller for the form
    // =============================================================================
console.log('test');
var submit = angular.module('formApp',
    [
        'ngAnimate',
        'ui.router'
    ]);

submit.controller('formController', function ($scope) {

    // we will store all of our form data in this object
    $scope.formData = {};

    // function to process the form
    $scope.processForm = function () {
        alert('awesome!');
    };

});

// =============================================================================

// our controller for drop down select

var dropdown = angular.module(
    'plunker',
    []
);

dropdown.controller('MainCtrl', function ($scope) {

    $scope.user = {bankName: ''};

    $scope.banks = [{
        "name": "Bank A",
        "branches": [{
            "name": "Branch 1",
            "code": "1"
        }, {
            "name": "Branch 2",
            "code": "2"
        }]
    }, {
        "name": "Bank B",
        "branches": [{
            "name": "Branch 3",
            "code": "3"
        }, {
            "name": "Branch 4",
            "code": "4"
        }, {
            "name": "Branch 5",
            "code": "5"
        }]
    }];

});

angular
    .module('formApp', [
        'ngAnimate',
        'ui.router'
    ]);

console.log('main')

angular
    .module('formApp', [
        'ngAnimate',
        'ui.router'
    ])
 // configuring our routes
    // =============================================================================
    .config(function ($stateProvider, $urlRouterProvider) {

        $stateProvider

        // route to show our basic form (/form)
            .state('form', {
                url: '/form',
                templateUrl: 'views/form.html',
                controller: 'formController'
            })

            // nested states
            // each of these sections will have their own view
            // url will be nested (/form/signup)
            .state('form.signup', {
                url: '/signup',
                templateUrl: 'views/form-signup.html'
            })

            // url will be /form/select
            .state('form.select', {
                url: '/select',
                templateUrl: 'views/form-select.html'
            })

            // url will be /form/type
            .state('form.type', {
                url: '/type',
                templateUrl: 'views/form-type.html'
            });

        // catch all route
        // send users to the form page
        $urlRouterProvider.otherwise('/form/signup');
    });

app.js

/**
 * Created by ukcco1boa on 25/05/2017.
 */
    // our controller for the form
    // =============================================================================
console.log('test');
var submit = angular.module('formApp',
    [
        'ngAnimate',
        'ui.router'
    ]);

submit.controller('formController', function ($scope) {

    // we will store all of our form data in this object
    $scope.formData = {};

    // function to process the form
    $scope.processForm = function () {
        alert('awesome!');
    };

});

// =============================================================================

// our controller for drop down select

var dropdown = angular.module(
    'plunker',
    []
);

dropdown.controller('MainCtrl', function ($scope) {

    $scope.user = {bankName: ''};

    $scope.banks = [{
        "name": "Bank A",
        "branches": [{
            "name": "Branch 1",
            "code": "1"
        }, {
            "name": "Branch 2",
            "code": "2"
        }]
    }, {
        "name": "Bank B",
        "branches": [{
            "name": "Branch 3",
            "code": "3"
        }, {
            "name": "Branch 4",
            "code": "4"
        }, {
            "name": "Branch 5",
            "code": "5"
        }]
    }];

});

angular
    .module('formApp', [
        'ngAnimate',
        'ui.router'
    ]);

console.log('main')

angular
    .module('formApp', [
        'ngAnimate',
        'ui.router'
    ])
 // configuring our routes
    // =============================================================================
    .config(function ($stateProvider, $urlRouterProvider) {

        $stateProvider

        // route to show our basic form (/form)
            .state('form', {
                url: '/form',
                templateUrl: 'views/form.html',
                controller: 'formController'
            })

            // nested states
            // each of these sections will have their own view
            // url will be nested (/form/signup)
            .state('form.signup', {
                url: '/signup',
                templateUrl: 'views/form-signup.html'
            })

            // url will be /form/select
            .state('form.select', {
                url: '/select',
                templateUrl: 'views/form-select.html'
            })

            // url will be /form/type
            .state('form.type', {
                url: '/type',
                templateUrl: 'views/form-type.html'
            });

        // catch all route
        // send users to the form page
        $urlRouterProvider.otherwise('/form/signup');
    });

config.js

/**
 * Created by ukcco1boa on 25/05/2017.
 */
    // our controller for the form
    // =============================================================================
console.log('test');
var submit = angular.module('formApp',
    [
        'ngAnimate',
        'ui.router'
    ]);

submit.controller('formController', function ($scope) {

    // we will store all of our form data in this object
    $scope.formData = {};

    // function to process the form
    $scope.processForm = function () {
        alert('awesome!');
    };

});

// =============================================================================

// our controller for drop down select

var dropdown = angular.module(
    'plunker',
    []
);

dropdown.controller('MainCtrl', function ($scope) {

    $scope.user = {bankName: ''};

    $scope.banks = [{
        "name": "Bank A",
        "branches": [{
            "name": "Branch 1",
            "code": "1"
        }, {
            "name": "Branch 2",
            "code": "2"
        }]
    }, {
        "name": "Bank B",
        "branches": [{
            "name": "Branch 3",
            "code": "3"
        }, {
            "name": "Branch 4",
            "code": "4"
        }, {
            "name": "Branch 5",
            "code": "5"
        }]
    }];

});

angular
    .module('formApp', [
        'ngAnimate',
        'ui.router'
    ]);

console.log('main')

angular
    .module('formApp', [
        'ngAnimate',
        'ui.router'
    ])
 // configuring our routes
    // =============================================================================
    .config(function ($stateProvider, $urlRouterProvider) {

        $stateProvider

        // route to show our basic form (/form)
            .state('form', {
                url: '/form',
                templateUrl: 'views/form.html',
                controller: 'formController'
            })

            // nested states
            // each of these sections will have their own view
            // url will be nested (/form/signup)
            .state('form.signup', {
                url: '/signup',
                templateUrl: 'views/form-signup.html'
            })

            // url will be /form/select
            .state('form.select', {
                url: '/select',
                templateUrl: 'views/form-select.html'
            })

            // url will be /form/type
            .state('form.type', {
                url: '/type',
                templateUrl: 'views/form-type.html'
            });

        // catch all route
        // send users to the form page
        $urlRouterProvider.otherwise('/form/signup');
    });

当我查看每个页面时，我似乎没有继承任何样式或JavaScript

index.html

<!-- index.html -->
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">

    <!-- CSS -->
    <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootswatch/3.1.1/darkly/bootstrap.min.css">
    <link rel="stylesheet" href="../scripts/css/style.css">
    <link rel="stylesheet" href="../scripts/css/override.css">

    <!-- JS -->
    <!-- load angular, nganimate, and ui-router -->
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.10/angular-ui-router.min.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular-animate.min.js"></script>

    <script src="app.js"></script>
    <script src="config.js"></script>
    <script src="controllers/form.js"></script>
</head>

<!-- apply our angular app -->
<body ng-app="formApp">

<div class="container">
    <!-- views will be injected here -->
    text
    <div ui-view></div>
</div>

</body>
</html>

文本

您用来访问的url是什么？您的浏览器控制台中是否也有错误？您好，只需app/index.htmly您不需要提供任何直接路径

.html

。你的ui.router就是这样做的。当您为例如

app/键入
作为url或仅为
app
（主页）提供时会发生什么。使用/form、/select和/type检查控制台是否有任何错误。有了app，我在consolehower中只得到了一个灰色背景404，如果我去app/views/form.html，我得到了html，但我没有得到任何css或角度应用，所以路由是错误的？