Я основал одностраничное приложение, основанное на этом учебнике:
https://scotch.io/tutorials/single-page-apps-with-angularjs-routing-and-templating
это файловая структура, которую они предложили:
- script.js <!-- stores all our angular code -->
- index.html <!-- main layout -->
- pages <!-- the pages that will be injected into the main layout -->
----- home.html
----- about.html
----- contact.html
часть о html-страницах довольно проста - страница для каждого ng-представления. круто...
но script.js кажется мне плохой моделью.
Должен ли я поместить весь мой код js в один файл?
мне кажется, что это не лучший способ ее моделирования.
что случилось, если у меня будет много страниц в моем приложении с одной страницей?
У меня будет длинный длинный один файл js со всеми контроллерами.
Какова наилучшая практика моделирования одностраничного приложения в angularjs?
Благодарю!
// script.js
// create the module and name it scotchApp
// also include ngRoute for all our routing needs
var scotchApp = angular.module('scotchApp', ['ngRoute']);
// configure our routes
scotchApp.config(function($routeProvider) {
$routeProvider
// route for the home page
.when('/', {
templateUrl : 'pages/home.html',
controller : 'mainController'
})
// route for the about page
.when('/about', {
templateUrl : 'pages/about.html',
controller : 'aboutController'
})
// route for the contact page
.when('/contact', {
templateUrl : 'pages/contact.html',
controller : 'contactController'
});
});
// create the controller and inject Angular $scope
scotchApp.controller('mainController', function($scope) {
// create a message to display in our view
$scope.message = 'Everyone come and see how good I look!';
});
scotchApp.controller('aboutController', function($scope) {
$scope.message = 'Look! I am an about page.';
});
scotchApp.controller('contactController', function($scope) {
$scope.message = 'Contact us! JK. This is just a demo.';
});
Этот исчерпывающий стиль предлагает создавать папки и оцифровывать ваше приложение на основе функций. https://github.com/johnpapa/angular-styleguide/blob/master/a1/README.md#application-structure
Я рекомендую прочитать весь раздел "Структура приложения", который действительно помог мне организовать мои угловые проекты