Services
Technology Web App Development Mobile App Development Windows App Development Database Development UI/UX Development Cloud Development SEO Digital Marketing Guest Posting Content Writing Artificial Intelligence Data Science ERP Development CRM Development CMS Development LMS Development Business Listing Blockchain Technology Startup Promotion AI Tools Integration
Products
Data Converter Cleaner TUC - Unit Converter Import Export Survey Manager Tweet Controller
Developer
Article Blog Forum Interview Beginner News Startup Quiz
Users
Career
Apply Job Internship
Pricing
Login Sign Up Get a Quote

interview

Home Interviews Building a simple AngularJS application – MindStick
Ask Question

2 Answers

ICSM Computer
ICSM Computer 13 Feb 2025
Report Abuse

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
Report Abuse
MindStick Training
Markdown for AI

A clean, structured version of this page for AI assistants and LLMs.

Open .md