Simple AngularJS example

Learn simple angularjs example with practical examples, diagrams, and best practices. Covers javascript, angularjs development techniques with visual explanations.
Tags:
Categories:

Getting Started with AngularJS: A Simple Example

Hero image for Simple AngularJS example

Explore the fundamentals of AngularJS with a straightforward example, covering core concepts like modules, controllers, and data binding.

AngularJS, a JavaScript-based open-source front-end web framework, was primarily maintained by Google and a community of individuals and corporations. It aimed to simplify both the development and the testing of web applications by providing a framework for client-side model–view–controller (MVC) and model–view–viewmodel (MVVM) architectures, along with components commonly used in rich internet applications. This article will guide you through a basic AngularJS example to help you understand its core principles.

Understanding the Core Components

At its heart, AngularJS applications are built around a few key components: modules, controllers, and data binding. A module defines your application, a controller manages the data and logic for a specific part of your application, and data binding automatically synchronizes data between the model and the view.

flowchart TD
    A[HTML Document] --> B["ng-app (Module Declaration)"]
    B --> C["ng-controller (Controller Scope)"]
    C --> D["Data Binding ({{ expression }})"]
    D --> E[View (HTML Elements)]
    E --> F[Model (JavaScript Data)]
    F -- Updates --> D

Basic AngularJS Application Flow

Setting Up Your First AngularJS Application

To create a simple AngularJS application, you'll need an HTML file and a JavaScript file. The HTML file will include the AngularJS library and define the application's view, while the JavaScript file will contain the application's module and controller logic.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>My First AngularJS App</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
</head>
<body ng-app="myApp">

    <div ng-controller="myController">
        <h1>Hello, {{ name }}!</h1>
        <input type="text" ng-model="name" placeholder="Enter your name">
    </div>

    <script src="app.js"></script>
</body>
</html>

index.html: The main HTML file for our AngularJS application.

// app.js

// 1. Create an AngularJS module named 'myApp'
var app = angular.module('myApp', []);

// 2. Create a controller named 'myController' within 'myApp'
app.controller('myController', function($scope) {
    // Initialize a variable 'name' on the $scope object
    $scope.name = 'World';
});

app.js: The JavaScript file containing our module and controller.

How It Works: Data Binding in Action

In the example above, ng-app="myApp" initializes our AngularJS application. The ng-controller="myController" directive assigns the myController to the div element and its children. Inside the controller, we set $scope.name = 'World';. The {{ name }} expression in the <h1> tag and the ng-model="name" directive on the input field demonstrate two-way data binding. Any change to the input field immediately updates the name variable in the $scope, and vice-versa, updating the <h1> tag automatically.

1. Save the Files

Save the HTML code as index.html and the JavaScript code as app.js in the same directory.

2. Open in Browser

Open index.html in your web browser. You should see 'Hello, World!' and an input field.

3. Interact with the App

Type your name into the input field. Observe how the greeting 'Hello, World!' changes in real-time to 'Hello, YourName!' as you type, demonstrating AngularJS's two-way data binding.