Building a Complete AngularJS Application - FadiZahhar/AngularJs GitHub Wiki

The StartApp Team Brings It All Together

Scene: From Pieces to a Real App

After weeks of adding features, the client gives the StartApp team the ultimate green light:

“Let’s put everything together into a single, professional, working app. Show me how all the AngularJS features you’ve built can combine into one complete solution!”

Mike (Team Lead): “Let’s build a real, maintainable AngularJS application: modular, DRY, organized, and beautiful.”

Sara (Junior Dev): “Time to use modules, controllers, services, filters, routing, reusable HTML includes, forms, validation, and even W3.CSS for a stylish UI!”

1. Organizing with Modules

Start with a single app module and declare your dependencies:

var app = angular.module('startApp', ['ngRoute', 'ngAnimate']);

2. Project Structure Example

Organize your files for maintainability:

/index.html
/app.js
/controllers/
    dashboardCtrl.js
    tasksCtrl.js
    profileCtrl.js
/services/
    taskService.js
/templates/
    dashboard.html
    tasks.html
    profile.html
/includes/
    header.html
    sidebar.html
    footer.html

3. Main HTML Layout

Use ng-include and ng-view for reusable layouts and SPA routing:

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>StartApp AngularJS Application</title>
  <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular-route.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular-animate.js"></script>
  <script src="app.js"></script>
</head>
<body ng-app="startApp">
  <div ng-include="'/includes/header.html'"></div>
  <div class="w3-row">
    <div class="w3-col m2">
      <div ng-include="'/includes/sidebar.html'"></div>
    </div>
    <div class="w3-col m10 w3-container">
      <div ng-view></div>
    </div>
  </div>
  <div ng-include="'/includes/footer.html'"></div>
</body>
</html>

4. Routing and Controllers (app.js)

Configure routes for each app section:

app.config(function($routeProvider) {
  $routeProvider
    .when("/", {
      templateUrl: "/templates/dashboard.html",
      controller: "dashboardCtrl"
    })
    .when("/tasks", {
      templateUrl: "/templates/tasks.html",
      controller: "tasksCtrl"
    })
    .when("/profile", {
      templateUrl: "/templates/profile.html",
      controller: "profileCtrl"
    })
    .otherwise({
      redirectTo: "/"
    });
});

5. Reusable HTML Includes (header.html, sidebar.html, footer.html)

header.html

<div class="w3-container w3-blue">
  <h2>StartApp AngularJS Demo</h2>
</div>

sidebar.html

<div class="w3-sidebar w3-light-grey w3-bar-block" style="width:150px">
  <a href="#!/" class="w3-bar-item w3-button">Dashboard</a>
  <a href="#!/tasks" class="w3-bar-item w3-button">Tasks</a>
  <a href="#!/profile" class="w3-bar-item w3-button">Profile</a>
</div>

footer.html

<footer class="w3-container w3-dark-grey">
  <p>© 2024 StartApp Team</p>
</footer>

6. Example of a View Template (tasks.html)

<h2>Tasks</h2>
<form class="w3-container w3-light-grey w3-card-4" ng-submit="addTask()">
  <div class="w3-section">
    <input class="w3-input w3-border" ng-model="newTask" placeholder="New Task" required>
  </div>
  <button class="w3-button w3-blue">Add Task</button>
</form>
<ul class="w3-ul w3-card-4 w3-margin-top">
  <li ng-repeat="t in tasks" class="animate-repeat w3-display-container">
    {{ t.name }}
    <button class="w3-button w3-red w3-small w3-display-right" ng-click="removeTask($index)">Remove</button>
  </li>
</ul>

7. Example Controller (tasksCtrl.js)

app.controller('tasksCtrl', function($scope, taskService) {
  $scope.tasks = taskService.getTasks();
  $scope.addTask = function() {
    if ($scope.newTask) {
      taskService.addTask($scope.newTask);
      $scope.newTask = "";
    }
  };
  $scope.removeTask = function(index) {
    taskService.removeTask(index);
  };
});

8. Example Service (taskService.js)

app.factory('taskService', function() {
  var tasks = [
    { name: "Design logo" },
    { name: "Setup database" },
    { name: "Write docs" }
  ];
  return {
    getTasks: function() { return tasks; },
    addTask: function(name) { tasks.push({ name: name }); },
    removeTask: function(index) { tasks.splice(index, 1); }
  };
});

9. Bringing It All Together

  • Data binding updates views instantly.
  • ng-include makes layouts reusable.
  • Services share and persist data across controllers and views.
  • Routing enables a true single page app (SPA).
  • Validation and filters enhance UX.
  • W3.CSS gives a polished look, and ngAnimate adds motion!

Team Reflection: What They Learned

  • Sara: “AngularJS helps us keep everything modular and maintainable.”
  • Lina (Designer): “W3.CSS and AngularJS combine for a fast, beautiful UI.”
  • Mike: “This is a real app—easy to update, extend, and ship!”

Key Takeaways

  • A complete AngularJS application uses modules, controllers, services, routing, includes, and form validation—all working together.
  • Keep code organized for scalability and teamwork.
  • AngularJS is still a great choice for simple, robust SPAs!

Team Conclusion

Lina: “It feels good to see it all working together. Ready for user testing and deployment!”

Mike: “And if the client wants more, we can add features easily!”

Try building your own full AngularJS app using these patterns, or see live examples in the [W3Schools AngularJS Application TryIt Editor](https://www.w3schools.com/angular/angular_tryit.asp?filename=tryangular_application).

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