Create To Do List Using AngularJS

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.

<code>html
&lt;!DOCTYPE html&gt;
&lt;html ng-app=&quot;todoApp&quot;&gt;
&lt;head&gt;
&lt;title&gt;To-Do List&lt;/title&gt;
&lt;script src=&quot;https://ajax.googleapis.com/ajax/libs/angularjs/1.7.9/angular.min.js&quot;&gt;&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;div ng-controller=&quot;todoController&quot;&gt;
&lt;!– Your to-do list HTML code goes here –&gt;
&lt;/div&gt;

&lt;script src=&quot;app.js&quot;&gt;&lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;
</code>

2. Create an AngularJS module and controller in your JavaScript file (app.js).

<code>javascript
var app = angular.module(‘todoApp’, []);

app.controller(‘todoController’, function($scope) {
// Your to-do list logic goes here
});
</code>

3. Inside the controller, define an array to store the to-do items and a function to add new items to the list.

<code>javascript
app.controller(‘todoController’, function($scope) {
$scope.todoList = [];

$scope.addItem = function() {
$scope.todoList.push($scope.newItem);
$scope.newItem = ”;
};
});
</code>

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.

<code>html
&lt;div ng-controller=&quot;todoController&quot;&gt;
&lt;input type=&quot;text&quot; ng-model=&quot;newItem&quot;&gt;
&lt;button ng-click=&quot;addItem()&quot;&gt;Add&lt;/button&gt;

&lt;ul&gt;
&lt;li ng-repeat=&quot;item in todoList&quot;&gt;{{ item }}&lt;/li&gt;
&lt;/ul&gt;
&lt;/div&gt;
</code>

Now, when you enter a new item in the input field and click the &quot;Add&quot; button, it will be added to the to-do list and displayed on the page.