AngularJS/Javascript code formating

Question

В настоящее время я работаю над небольшим моим проектом, небольшим веб-приложением, используя HTML5, JavaScript, Angularjs, Bootstrap, некоторые PHP и API. Это неважно, просто какая-то практика. Во всяком случае, как я узнал, я сделал свой php, используя соглашение MVC (использование рабочего и контроллера, разделение вещей, например, логин с соединением DB и остальное ...), и поэтому мне было интересно, можно ли это сделать то же самое с моими сценариями: в конце я увидел, что я писал все свои сценарии на моей индексной странице, и мне было интересно, могу ли я записать их в рабочий файл и просто сделать вызовы в индексе, так как я «Я не очень хорошо разбираюсь в угловом/javascript, я прошу немного помочь, потому что я понятия не имею, как это сделать ^^» (я знаю Java, PHP, HTML, CSS, поэтому, если вы хотите проиллюстрировать что-то вы говорите, используя тот язык, я понимаю) Вот мои скрипты:

var tag = document.createElement('script'); 

tag.src = "https://www.youtube.com/iframe_api"; 
var firstScriptTag = document.getElementsByTagName('script')[0]; 
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag); 

var player; 
function onYouTubeIframeAPIReady() { 
    player = new YT.Player('player', { 
     height: '390', 
     width: '640', 
     videoId: '9qfb3IlH56I', 
     events: { 
      'onReady': onPlayerReady, 
      'onStateChange': onPlayerStateChange 
     } 
    }); 
} 


function onPlayerReady(event) { 
    event.target.playVideo(); 
} 

var done = false; 
function onPlayerStateChange(event) { 
    if (event.data == YT.PlayerState.PLAYING && !done) { 
     done = true; 
    } 
} 

function stopVideo() { 
    player.stopVideo(); 
} 

//Roads 
var module = angular.module("animeNet", ['ngRoute']); 
module.config(['$routeProvider', 
    function($routeProvider) { 
    $routeProvider. 
     when('/', { 
      templateUrl: 'Login.php' 
     }). 
     when('/anime', { 
      templateUrl: 'anime.html' 
     }). 
     when('/logInFail', { 
      templateUrl: 'logInFail.php' 
     }). 
     when('/api', { 
      controller: 'SpecificPageController', 
      templateUrl: 'Api.html' 
     }). 
     when('/home', { 
      templateUrl: 'home.php'}). 
     when('/inscription', { 
      templateUrl: 'inscription.php'}). 
     when('/test', { 
      controller: 'SpecificPageController', 
      templateUrl: 'test.html' 
     }). 
     otherwise({ 
      redirectTo: '/' 
     }); 
}]); 

//Controller 
module.controller("RouteController", function($scope, $rootScope, $routeParams, $location) { 
    $scope.param = $routeParams.param; 

    $rootScope.$on('$routeChangeStart', function(event, next, current) { 
     $scope.routeShow = $location.path() != '/' && $location.path() != '/inscription'; 
    }); 

}); 

module.controller('SpecificPageController', function($scope, $routeParams) { 
    onYouTubeIframeAPIReady(); 
}); 

//AnimationsOnIndex 
var _gaq = _gaq || []; 
_gaq.push(['_setAccount', 'UA-43092768-1']); 
_gaq.push(['_trackPageview']); 
(function() { 
    var ga = document.createElement('script'); 
    ga.type = 'text/javascript'; 
    ga.async = true; 
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; 
    var s = document.getElementsByTagName('script')[0]; 
    s.parentNode.insertBefore(ga, s); 
})(); 

Answer 1

Angular Style Guide, вероятно, будет хорошим читать. Некоторые примеры упомянутых передовых методов включают в себя:

Правило 1: Определите только 1 компонент на JS-файл. В вашем случае, вы должны отделить свои контроллеры таким образом, что каждый контроллер имеет свой собственный файл JS и импортируется как модуль в приложение

Названные функции: Использование имени функции (например, в контроллерах) вместо анонимных функций увеличить читаемость

angular 
.module('app') 
.controller('DashboardController', DashboardController); 

function DashboardController() { } 

Что касается отделяющих вещей, проверить demo project named modular. app.js выглядит следующим образом:

(function() { 
    'use strict'; 
    angular.module('app', [ 
     'app.core', 
     'app.widgets', 
     'app.avengers', 
     'app.dashboard', 
     'app.layout' 
    ]); 

})(); 

директив и контроллеры поэтому объявлены в виде модулей, которые очень аккуратным:

(function() { 
    'use strict'; 

    angular 
     .module('app.widgets') 
     .directive('ccSidebar', ccSidebar); 

    function ccSidebar() {...} 
})();