To create a To-Do list using AngularJS, you will need to follow these steps:
1. Set up your AngularJS project by including the AngularJS library in your HTML file.
html
<!DOCTYPE html>
<html ng-app="todoApp">
<head>
<title>To-Do List</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.9/angular.min.js"></script>
</head>
<body>
<div ng-controller="todoController">
<!– Your to-do list HTML code goes here –>
</div>
<script src="app.js"></script>
</body>
</html>
2. Create an AngularJS module and controller in your JavaScript file (app.js).
javascript
var app = angular.module(‘todoApp’, []);
app.controller(‘todoController’, function($scope) {
// Your to-do list logic goes here
});
3. Inside the controller, define an array to store the to-do items and a function to add new items to the list.
javascript
app.controller(‘todoController’, function($scope) {
$scope.todoList = [];
$scope.addItem = function() {
$scope.todoList.push($scope.newItem);
$scope.newItem = ”;
};
});
4. In your HTML file, bind the input field to the `newItem` variable and use the `ng-repeat` directive to display the list of items.
html
<div ng-controller="todoController">
<input type="text" ng-model="newItem">
<button ng-click="addItem()">Add</button>
<ul>
<li ng-repeat="item in todoList">{{ item }}</li>
</ul>
</div>
Now, when you enter a new item in the input field and click the "Add" button, it will be added to the to-do list and displayed on the page.