AngularJS / Javascript кодирование

Question

AngularJS / Javascript кодирование

0

В настоящее время я работаю над небольшим моим проектом, небольшим веб-приложением, использующим 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);
})();

Florian Hofer 05 окт. 2015, в 13:27

Источник

Теги:

php

javascript

angularjs

1 ответ

Ещё вопросы

Huey · Answer 1 · 2015-10-05T10-29-00.000Z

Руководство по угловому стилю, вероятно, будет хорошо прочитано. Некоторые примеры упомянутой передовой практики включают:

Правило 1: Определить только 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 () {...}
})();