Question

问题

我的观点未加载。我正在使用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"
        }]
    }];

});

app.js

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

console.log('main')

config.js

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>

视图未在Angular中加载

0 个答案: