AngularJS/Javascript代码格式化

我目前正在做我的一个小项目，一个小web应用程序，使用HTML5、JavaScript、Angularjs、Bootstrap、一些PHP和一个API。没什么大不了的，只是一些练习的东西。无论如何，据我所知，我使用MVC约定（使用一个工人和一个控制器，将事情分开，比如使用DB连接登录和其他…）来编写php，因此我想知道是否可以对我的脚本执行同样的操作：最后，我看到我在索引页上编写了所有脚本，我想知道我是否可以把它们写在一个工作文件中，然后只对索引进行调用，因为我不太擅长angular/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);
})();

可能是一本不错的读物。提到的一些良好做法包括：

规则1:每个JS文件只定义一个组件。在您的情况下，您应该分离控制器，以便每个控制器都有自己的JS文件，并作为模块导入到您的应用程序中

命名函数：使用命名函数（例如在控制器中）而不是匿名函数，以提高可读性

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

function DashboardController() { }

关于分隔内容，请查看。

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 () {...}
})();