javascript - 基本的小型 Angular 文件结构

Question

问题

有人可以告诉我为我的第一个 Angular 项目布局结构的正确方法吗？

概述

这是我的第一个 Angular 项目，我希望在继续之前先确保结构正确。

我正在构建一个具有多个部分和功能的表单。

我在网上看到了很多不同的想法，主要是针对大型项目，而不是针对小型入门项目，因此我希望有人可以帮助我加星标。

当前结构

所有表单文件都是我表单的不同部分。

app.js

// app.js
// create our angular app and inject ngAnimate and ui-router 
// =============================================================================
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: '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: 'form-signup.html'
        })

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

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

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

// our controller for the form
// =============================================================================
.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!');
    };

});

test.js

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

app.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"
        }]
    }];

});

Answer 1

好的。每个人的使用和舒适度都有不同的结构

我在此处添加图像，请查看其中的文件夹结构，这最适合大型项目

所以我的结构是这样的

如果我有 addRecords、身份验证和参与 3 个不同的模块(还有更多，但在这张图片中)，那么我为每个模块创建了文件夹，并创建了单独的模板、 Controller 、服务、模块、css 文件。所以这可以是一个单独的模块(app)，将该模块添加到 app.js

在身份验证中，它具有登录、忘记、注册等子模块，因此这些模块会转到子文件夹和子模块。

注意:您的方式适合小型应用程序。您将所有 js 添加到一个文件夹，而不是将所有 css 添加到其他文件夹，第三个文件夹中的 html 模板也是如此。 但是，如果您为每个模块都有单独的模块文件夹，那么当您的项目增长到数百个模块时，搜索内容就会很容易。