AngularJS is a popular JavaScript framework developed by Google for building dynamic web applications. It provides a structured way to organize and manage your code, making it easier to develop and maintain complex applications.
In this step-by-step tutorial, we will guide you through the process of setting up a basic AngularJS application and building a simple todo list.
Step 1: Set up your development environment
Before you can start building AngularJS applications, you need to set up your development environment. Here are the steps to follow:
1. Install Node.js: AngularJS requires Node.js to run. You can download and install Node.js from the official website (https://nodejs.org).
2. Install a code editor: You can use any code editor of your choice, such as Visual Studio Code, Sublime Text, or Atom.
Step 2: Create a new AngularJS project
Once you have set up your development environment, you can create a new AngularJS project. Here’s how:
1. Open your command prompt or terminal and navigate to the directory where you want to create your project.
2. Run the following command to create a new AngularJS project:
npm init
This command will initialize a new Node.js project and create a `package.json` file.
3. Install AngularJS: Run the following command to install AngularJS:
npm install angular
This command will download and install AngularJS in your project.
Step 3: Create the HTML file
Next, you need to create an HTML file that will serve as the entry point for your AngularJS application. Here’s an example:
html
<!DOCTYPE html>
<html>
<head>
<title>AngularJS Todo List</title>
<script src="node_modules/angular/angular.js"></script>
</head>
<body ng-app="todoApp">
<div ng-controller="todoController">
<h1>Todo List</h1>
<input type="text" ng-model="newTodo" placeholder="Add a new todo">
<button ng-click="addTodo()">Add</button>
<ul>
<li ng-repeat="todo in todos">{{ todo }}</li>
</ul>
</div>
<script>
var app = angular.module(‘todoApp’, []);
app.controller(‘todoController’, function($scope) {
$scope.todos = [];
$scope.addTodo = function() {
$scope.todos.push($scope.newTodo);
$scope.newTodo = ”;
};
});
</script>
</body>
</html>
Save this file with a `.html` extension, for example, `index.html`.
Step 4: Run the application
To run your AngularJS application, open the HTML file you created in a web browser. You should see a simple todo list with an input field and a button. You can add new todos by typing in the input field and clicking the "Add" button.
Congratulations! You have successfully created a basic AngularJS application.
This tutorial only scratches the surface of what you can do with AngularJS. There are many more features and concepts to explore, such as data binding, directives, services, and routing. We encourage you to continue learning and experimenting with AngularJS to build more complex and powerful applications.