interview

home / developersection / interviews / building a simple angularjs application

Ask Question
ICSM Computer

IT-Hardware & Networking

Ravi Vishwakarma is a dedicated Software Developer with a passion for crafting efficient and innovative solutions. With a keen eye for detail and years of experience, he excels in developing robust software systems that meet client needs. His expertise spans across multiple programming languages and technologies, making him a valuable asset in any software development project.

Follow
Can you answer this question?
Answer

2 Answers

ICSM Computer

ICSM Computer

13-Feb-2025

AngularJS is an older JavaScript framework, but if you're looking to build a simple application with it, here's a step-by-step guide:

 

Step 1: Set Up the Project

You don’t need a build system; you can include AngularJS via CDN in an HTML file.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Simple 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="MainController">
        <h2>{{ message }}</h2>
        <input type="text" ng-model="name" placeholder="Enter your name">
        <p>Hello, {{ name }}!</p>
        
        <ul>
            <li ng-repeat="item in items">{{ item }}</li>
        </ul>

        <input type="text" ng-model="newItem" placeholder="Add item">
        <button ng-click="addItem()">Add</button>
    </div>

    <script>
        var app = angular.module("myApp", []);

        app.controller("MainController", function($scope) {
            $scope.message = "Welcome to AngularJS!";
            $scope.name = "";
            $scope.items = ["Item 1", "Item 2", "Item 3"];

            $scope.addItem = function() {
                if ($scope.newItem) {
                    $scope.items.push($scope.newItem);
                    $scope.newItem = "";
                }
            };
        });
    </script>

</body>
</html>

 

Explanation of the Code:

  • Include AngularJS - Loaded via Google CDN.
  • Define an AngularJS App (ng-app="myApp") - This initializes the AngularJS application.
  • Create a Controller (ng-controller="MainController") - Manages the application's data and behavior.
  • Two-Way Data Binding (ng-model) - Updates the UI dynamically as the user types.
  • ng-repeat to Loop Through an Array - Displays a list of items dynamically.
  • Event Handling (ng-click) - Adds new items to the list when clicking the button.

 

Next Steps

  • If you need more functionality, you can add routing using ngRoute.
  • Consider migrating to Angular (2+) if you're starting a new project since AngularJS is no longer maintained.
ICSM Computer

ICSM Computer

13-Feb-2025
advertising
advertising

Liked By

We use cookies to ensure you have the best browsing experience on our website. By using our site, you acknowledge that you have read and understood our Cookie Policy & Privacy Policy