Skip to content

Instantly share code, notes, and snippets.

@praveenkishor123

praveenkishor123/AngularToDoApp.html

Created March 16, 2017 16:33
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save praveenkishor123/9980c4526729951744b146ff0fd25ee2 to your computer and use it in GitHub Desktop.
Save praveenkishor123/9980c4526729951744b146ff0fd25ee2 to your computer and use it in GitHub Desktop.
Download ZIP
ToDo app using AngularJS
Raw
AngularToDoApp.html
<html ng-app="app">
<head>
<title>ngTodo</title>
</head>
<body>
<ng-view></ng-view>
<!-- Libraries -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular-route.min.js"></script>
<!-- Template -->
<script type="text/ng-template" id="/todos.html">
Search: <input type="text" ng-model="search.name">
<ul>
<li ng-repeat="todo in todos | filter: search">
<input type="checkbox" ng-model="todo.completed">
<a href="#/{{$index}}">{{todo.name}}</a>
</li>
</ul>
</script>
<script type="text/ng-template" id="/todoDetails.html">
<h1>{{ todo.name }}</h1>
completed: <input type="checkbox" ng-model="todo.completed">
note: <textarea>{{ todo.note }}</textarea>
</script>
<script>
angular.module('app', ['ngRoute'])
//---------------
// Services
//---------------
.factory('Todos', function(){
return [
{ name: 'AngularJS Directives', completed: true, note: 'add notes...' },
{ name: 'Data binding', completed: true, note: 'add notes...' },
{ name: '$scope', completed: true, note: 'add notes...' },
{ name: 'Controllers and Modules', completed: true, note: 'add notes...' },
{ name: 'Templates and routes', completed: true, note: 'add notes...' },
{ name: 'Filters and Services', completed: false, note: 'add notes...' },
{ name: 'Get started with Node/ExpressJS', completed: false, note: 'add notes...' },
{ name: 'Setup MongoDB database', completed: false, note: 'add notes...' },
{ name: 'Be awesome!', completed: false, note: 'add notes...' },
];
})
//---------------
// Controllers
//---------------
.controller('TodoController', ['$scope', 'Todos', function ($scope, Todos) {
$scope.todos = Todos;
}])
.controller('TodoDetailCtrl', ['$scope', '$routeParams', 'Todos', function ($scope, $routeParams, Todos) {
$scope.todo = Todos[$routeParams.id];
}])
//---------------
// Routes
//---------------
.config(['$routeProvider', function ($routeProvider) {
$routeProvider
.when('/', {
templateUrl: '/todos.html',
controller: 'TodoController'
})
.when('/:id', {
templateUrl: '/todoDetails.html',
controller: 'TodoDetailCtrl'
});
}]);
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment