Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html ng-app="app">
<head lang="en">
  <meta charset="utf-8">
  <title>ngRoute super simples</title>
 
  
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.14/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.14/angular-route.min.js"></script>
</head>
<body>
​
  <div ng-view>  </div>
 
</body>
</html>
 
var app = angular.module("app", ["ngRoute"]);
​
app.config(function($routeProvider) {
    $routeProvider.when('/',{
        template: 'Lista de Tasks:'+
          '<div >'+
        '<div ng-repeat="task in tasks">'+
      '{{task.id}} - {{task.name}}'+
        '<div><a ng-href="#/{{task.id}}">detalhes</a>'+
    '</div></div>'+
  '</div>',
        controller: "TaskListCtrl"
      }).
    when('/:taskId',
      {
        template: 'Detalhes da Task {{task.id}}:'+
          '<h4>Nome: {{task.name}}</h4>'+ 
  '</div>'+'<a ng-href="#/"> Voltar</a>',
        controller: "TaskDetailCtrl"
      }
    )
    .otherwise({redirect:'/'})
    ;
});
​
​
app.factory("TaskFactory",function(){
 var tasklist =  [
    {name:"terminar meu app",id:0},
    {name:"comprar presente para minha irmã",id:1}
    ]; 
  return{
    get : function(){
   return tasklist;
    }
  };
});
​
app.controller('TaskListCtrl', function ($scope,TaskFactory) {
  (function(){$scope.tasks=TaskFactory.get();})();
});
​
app.controller('TaskDetailCtrl', function ($scope,TaskFactory,$routeParams) {
  (function(){$scope.task=TaskFactory.get()[$routeParams.taskId];})();
});
​
​
​
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
AnisanWesleypro
0viewers