Moving from JSFiddle to Actual Usable Code -

Moving from JSFiddle to Actual Usable Code -

i found helpful website called jsfiddle.net, , playing around understand how different pieces of code work. in particular, found 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 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; }); homecoming count; }; $scope.archive = function() { var oldtodos = $scope.todos; $scope.todos = []; angular.foreach(oldtodos, function(todo) { if (!todo.done) $scope.todos.push(todo); }); }; }

one thing confused me though splits css, html, , javascript. understanding these components worked in 1 block of code rather in separate files. there development environments nowadays code jsfiddle does? instructional purposes , nil else? thanks.

you can add together /show end of jsfiddle url standalone page has code combined.

here code

jsfiddle separated them because makes much easier split code. i.e. css goes css section.

you set javascript , css in own files , add together them html page not create difference.

jsfiddle