Перемещение с JSFiddle на фактический код использования

Question

Я нашел очень полезный сайт под названием jsfiddle.net, и я играл с ним, чтобы понять, как работают разные части кода. В частности, я нашел this code:

HTML

<div ng-app> 
    <h2>Todo</h2> 
    <div ng-controller="TodoCtrl"> 
    <span>{{remaining()}} of {{todos.length}} remaining</span> 
    [ <a href="" ng-click="archive()">archive</a> ] 
    <ul class="unstyled"> 
     <li ng-repeat="todo in todos"> 
     <input type="checkbox" ng-model="todo.done"> 
     <span class="done-{{todo.done}}">{{todo.text}}</span> 
     </li> 
    </ul> 
    <form ng-submit="addTodo()"> 
     <input type="text" ng-model="todoText" size="30" 
      placeholder="add new todo here"> 
     <input class="btn-primary" type="submit" value="add"> 
    </form> 
    </div> 
</div> 

CSS

.done-true { 
    text-decoration: line-through; 
    color: grey; 
} 

Javascript

function TodoCtrl($scope) { 
    $scope.todos = [ 
    {text:'learn angular', done:true}, 
    {text:'build an angular app', done:false}]; 

    $scope.addTodo = function() { 
    $scope.todos.push({text:$scope.todoText, done:false}); 
    $scope.todoText = ''; 
    }; 

    $scope.remaining = function() { 
    var count = 0; 
    angular.forEach($scope.todos, function(todo) { 
     count += todo.done ? 0 : 1; 
    }); 
    return count; 
    }; 

    $scope.archive = function() { 
    var oldTodos = $scope.todos; 
    $scope.todos = []; 
    angular.forEach(oldTodos, function(todo) { 
     if (!todo.done) $scope.todos.push(todo); 
    }); 
    }; 
} 

Единственное, что меня смутило, хотя в том, что она распадается на CSS, HTML, и JavaScript. Насколько я понимаю, это были компоненты, которые все работали вместе в одном блоке кода, а не в отдельных файлах. Существуют ли на самом деле среды разработки, которые представляют код как JSFiddle? Это просто для учебных целей и ничего больше? Благодарю.

Answer 1

было моим пониманием, что это были компоненты, которые все работали вместе в одном блоке кода, а не в отдельных файлах.

Если вы собираетесь повторно использовать Javascript и стили, тогда они лучше всего разбиваются на отдельные файлы, поэтому вам не нужно повторно писать один и тот же код более одного раза.

Я всегда считаю, что лучше всего разделить html, css и js на отдельные файлы и включить их в свой HTML по мере необходимости.

Answer 2

Вы можете добавить /show в конец URL-адреса JSFiddle, чтобы получить отдельную страницу с общим кодом.

Here это с вашим кодом

JSFiddle отделил их, потому что это делает его гораздо легче разделить ваш код. То есть все ваши CSS входят в раздел CSS.

Вы всегда можете поместить Javascript и CSS в свои собственные файлы и добавить их на страницу HTML, но это не имеет никакого значения.