基本小角度文件結構

Question

問題

有人能告訴我奠定了結構爲我的第一個角項目的正確方法是什麼？

概述

這是我的第一個角的項目，我希望得到的結構正確之前，我走的更遠。

我正在構建一個具有多個部分和功能的窗體。

我在網上看到很多不同的想法，主要針對大型項目，而不是針對小型初學者項目，所以我希望有人可以幫助我獲得主演。

當前結構

所有形式的文件是我的表格的不同部分。

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

在身份驗證中，它具有子模塊，如登錄，忘記，註冊等，所以這些都進入子文件夾和子模塊。

注意：您的方式適用於小應用程序。您將所有js添加到一個文件夾，而不是將所有css添加到其他文件夾，對於第3個文件夾中的html模板也是如此。 但是，如果您爲每個模塊分開了模塊文件夾，那麼當您的項目在100個模塊中增長時，搜索時很容易。 https://github.com/yeoman/generator-angular：

Answer 2

的角度應用和風格指南最好的文件夾結構是由約翰爸爸 請參考此鏈接https://github.com/johnpapa/angular-styleguide