Question

问题

有人能告诉我为第一个角度项目布置结构的正确方法吗？

概述

这是我的第一个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个不同的模块（在这张照片中还有更多），所以我为每个模块创建了文件夹，并创建了单独的模板，控制器，服务，模块，css文件。所以这可以是一个独立的模块（app），在app.js中添加该模块

在身份验证中，它有子模块，如登录，忘记，注册等，所以它们会转到子文件夹和子模块。

注意：您的方式适用于小型应用。您将所有js添加到一个文件夹而不是所有css到其他文件夹，对于第三个文件夹中的html模板也是如此。但是，如果您为每个模块分离了模块文件夹，那么当您的项目在100个模块中增长时，搜索项目时很容易。

Answer 2

角度应用和风格指南的最佳文件夹结构由john papa提供请参阅此链接https://github.com/johnpapa/angular-styleguide

基本的小角度文件结构

2 个答案: