В настоящее время я работаю над небольшим моим проектом, небольшим веб-приложением, использующим 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);
})();
Руководство по угловому стилю, вероятно, будет хорошо прочитано. Некоторые примеры упомянутой передовой практики включают:
Правило 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 () {...}
})();