AngularJS / Javascript代码格式

Question

I'm currently working on a little project of mine, a little web application, using HTML5, JavaScript, Angularjs, Bootstrap, some PHP and an API. It's nothing big, just a some practicing stuff. Anyway, as I learned, I did my php using the MVC convention (Using a worker and a controller, separating things, like a login with the DB connection and the rest...) and so I was wondering if it was possible to do the same with my scripts: in the end, I saw that I had been writing all my scripts on my index page, and I was wondering if I could write them in a worker file, and just do the calls on the index, since I'm not that good in angular/javascript, I'm asking for a little help, for I have no idea on how to do it ^^' (I know Java, PHP, HTML, CSS, so if you want to illustrate something you say using those language, I'd understand) Here are my scripts:

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

The Angular Style Guide will probably be a good read. Some examples of good practices mentioned include:

Rule of 1: Define only 1 component per JS file. In your case, you should separate your controllers such that each controller has its own JS file and is imported as a module into your app

Named functions: Use named functions (e.g. in your controllers) instead of anonymous functions to increase readability

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

function DashboardController() { }

With regards to separating things, check out the demo project named modular. The app.js looks like this:

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

})();

Directives and controllers are therefore declared as modules, which is pretty neat:

(function() {
    'use strict';

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

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