A Real Team’s First Project - FadiZahhar/AngularJs GitHub Wiki

AngularJS for Beginners

A Real Team’s First Project

Introduction: Meet the Team

At StartApp, a new web agency, three friends are ready to launch their very first app:

  • Sara – Junior Developer, new to JavaScript frameworks but eager to learn
  • Mike – Team Lead, has classic JS experience, wants to modernize
  • Lina – Designer, excited to add interactivity to her layouts

Their mission?

Build a web-based Task Manager that updates instantly, with zero page reloads.

Sara finds [W3Schools AngularJS tutorial](https://www.w3schools.com/angular/default.asp) and suggests they try it out together.

Chapter 1: The Project Brief & First Problem

The team gathers around the whiteboard.

Lina: “I want users to type their name and see it in the greeting—live, not after clicking submit!”

Mike: “In classic JS, we need event listeners and a lot of code. Isn’t there a framework to make this easier?”

Sara (Googling): “AngularJS says it can help! It lets us bind data directly in HTML.”

The team agrees to try AngularJS. First step? Adding it to their project.

Chapter 2: Adding AngularJS to the Project

Sara finds the AngularJS CDN link:

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>

She adds it inside the <head> of index.html:

<!DOCTYPE html>
<html>
<head>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
</head>
<body>
  <!-- App will go here -->
</body>
</html>

Sara: “That’s all? Now what?”

Chapter 3: Telling AngularJS Where to Work (ng-app)

Sara reads:

“You need to declare an AngularJS application by adding the ng-app attribute.”

They wrap the main content in a <div ng-app>:

<div ng-app>
  <!-- AngularJS controls this area -->
</div>

Chapter 4: Your First Binding – Showing Dynamic Data

Sara experiments with a simple binding:

<div ng-app>
  <p>2 + 3 = {{ 2 + 3 }}</p>
</div>

They reload. The browser shows: 2 + 3 = 5

Mike: “So, anything inside {{ }} is dynamic! Can we show variables too?”

Chapter 5: Two-Way Data Binding with ng-model

The Problem: Instantly greet the user by name as they type.

Solution: Sara uses ng-model:

<div ng-app>
  <label>Your Name: <input ng-model="userName"></label>
  <p>Hello, {{ userName }}!</p>
</div>

Now, as anyone types in the input, the greeting updates instantly!

Lina: “This feels so modern—no page reload, no submit button!”

Chapter 6: Adding Logic with Controllers

Mike wants more structure. He finds that AngularJS uses controllers to manage app logic.

They define a controller called greetCtrl:

<div ng-app="myApp" ng-controller="greetCtrl">
  <label>Your Name: <input ng-model="userName"></label>
  <p>Hello, {{ greeting }} {{ userName }}!</p>
</div>

<script>
  angular.module('myApp', [])
    .controller('greetCtrl', function($scope) {
      $scope.greeting = "Welcome";
    });
</script>

Now they can easily update the greeting logic inside the controller.

Chapter 7: Making a Task List with ng-repeat

Sara’s next idea: “Let’s list tasks, so users can see all their work!”

They add a sample array of tasks inside the controller and use ng-repeat:

<div ng-app="myApp" ng-controller="taskCtrl">
  <h3>Task List</h3>
  <ul>
    <li ng-repeat="task in tasks">{{ task }}</li>
  </ul>
</div>

<script>
  angular.module('myApp', [])
    .controller('taskCtrl', function($scope) {
      $scope.tasks = ["Design logo", "Setup database", "Write docs"];
    });
</script>

Tasks display automatically—no manual HTML repetition.

Chapter 8: Adding New Tasks Dynamically

Mike wants users to add tasks themselves.

They update their controller and HTML:

<div ng-app="myApp" ng-controller="taskCtrl">
  <h3>Task List</h3>
  <input ng-model="newTask" placeholder="New Task">
  <button ng-click="addTask()">Add Task</button>
  <ul>
    <li ng-repeat="task in tasks">{{ task }}</li>
  </ul>
</div>

<script>
  angular.module('myApp', [])
    .controller('taskCtrl', function($scope) {
      $scope.tasks = ["Design logo", "Setup database", "Write docs"];
      $scope.addTask = function() {
        if ($scope.newTask) {
          $scope.tasks.push($scope.newTask);
          $scope.newTask = "";
        }
      };
    });
</script>

Now, typing in a new task and clicking Add Task updates the list immediately!

Chapter 9: Using Filters to Format Data

Lina wants completed tasks to appear in green. For now, Sara demonstrates a filter:

<!-- Display task count and filter by search -->
<input ng-model="searchTask" placeholder="Search tasks">
<p>Total Tasks: {{ tasks.length }}</p>
<ul>
  <li ng-repeat="task in tasks | filter:searchTask">{{ task }}</li>
</ul>

Now, the list updates as you type in the search field.

Chapter 10: Wrapping Up – What Did We Learn?

Mike: “AngularJS let us build a live, interactive app in less than a day. No complicated JS—just attributes and templates.”

Sara: “Two-way data binding is so powerful. ng-repeat and controllers make it easy to manage logic and lists.”

Lina: “The UI responds instantly. I love it!”

Final Working Example (Try this!)

<!DOCTYPE html>
<html>
<head>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
</head>
<body>
<div ng-app="myApp" ng-controller="taskCtrl">
  <h2>Welcome to StartApp's Task Manager</h2>
  <label>Your Name: <input ng-model="userName"></label>
  <p>Hello, {{ userName }}!</p>

  <h3>Task List</h3>
  <input ng-model="newTask" placeholder="New Task">
  <button ng-click="addTask()">Add Task</button>
  <input ng-model="searchTask" placeholder="Search tasks">
  <p>Total Tasks: {{ tasks.length }}</p>
  <ul>
    <li ng-repeat="task in tasks | filter:searchTask">{{ task }}</li>
  </ul>
</div>

<script>
  angular.module('myApp', [])
    .controller('taskCtrl', function($scope) {
      $scope.tasks = ["Design logo", "Setup database", "Write docs"];
      $scope.addTask = function() {
        if ($scope.newTask) {
          $scope.tasks.push($scope.newTask);
          $scope.newTask = "";
        }
      };
    });
</script>
</body>
</html>

Try it in the [W3Schools AngularJS TryIt Editor](https://www.w3schools.com/angular/angular_tryit.asp?filename=tryangular_intro).

⚠️ **GitHub.com Fallback** ⚠️