Question
Can someone show me the correct way to lay out the structure for my first angular project?
Overview
This is my first Angular project, and i wish to get the structure correct before I go further.
I am building a form that has multiple sections and functions.
I have seen many different ideas online and mainly for large projects not for a small starter project so I hope someone can help me get starred.
Current structure
all the form files are different sections of my form.
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"
}]
}];
});
Aucun commentaire:
Enregistrer un commentaire