AngularJS Tutorial for Beginners – Learn AngularJS with Examples W3Office.com

Estimated reading: 3 minutes 106 views

🌟 What is AngularJS?

AngularJS is a powerful JavaScript-based open-source front-end framework developed by Google. It allows developers to build dynamic web applications with a Model-View-Controller (MVC) architecture.

✅ Two-way data binding
✅ Dependency Injection
✅ Templating engine
✅ Great for SPAs (Single Page Applications)

🔗 Official AngularJS Website

⚙️ Setting Up AngularJS

✅ Use CDN (Quick Start)

Add this in your HTML file:

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

🧪 Verify

<div ng-app>
  <p>{{ 10 + 5 }}</p>
</div>

If you see 15, AngularJS is working! 🎉

📦 AngularJS Architecture

AngularJS follows the MVC (Model-View-Controller) pattern.

Model – Data
View – UI
Controller – Business logic

🧩 Directives in AngularJS

Directives extend HTML with custom behavior.

Directive	Purpose
`ng-app`	Bootstraps Angular app
`ng-model`	Binds input fields to scope
`ng-repeat`	Repeats HTML elements
`ng-if`	Conditionally includes HTML
`ng-click`	Binds click events

🔗 Expressions and Data Binding

📌 AngularJS Expression

<p>{{ 5 + 5 }}</p>

🔁 Two-Way Data Binding

<input ng-model="name">
<p>Hello {{ name }}</p>

Changes reflect both in the model and view instantly.

📊 Controllers and Scope

<div ng-controller="MyCtrl">
  <h1>{{ message }}</h1>
</div>

<script>
  app.controller('MyCtrl', function($scope) {
    $scope.message = "Hello from Controller!";
  });
</script>

$scope connects your controller to the view.

📁 Modules in AngularJS

A module is a container for different parts of your app.

var app = angular.module('myApp', []);

Everything—controllers, services, filters—resides within a module.

📝 Forms and Validation

AngularJS makes form handling easy.

<form name="myForm">
  <input type="email" ng-model="user.email" required>
  <span ng-show="myForm.email.$error.required">Email is required</span>
</form>

💡 Real-time validation is built-in!

🔁 Filters in AngularJS

Used to format data in the view.

<p>{{ name | uppercase }}</p>

Popular filters:

uppercase
lowercase
currency
date
filter
limitTo

🧠 Services and Dependency Injection

Services are singleton objects used for logic that needs to be shared.

app.service('GreetService', function() {
  this.sayHi = function(name) {
    return "Hello " + name;
  };
});

Inject service into a controller:

app.controller('MainCtrl', function($scope, GreetService) {
  $scope.greeting = GreetService.sayHi("AngularJS");
});

🔄 Routing in AngularJS

Use ngRoute module for SPA routing.

npm install angular-route

<script src="angular-route.min.js"></script>

Configure routes:

app.config(function($routeProvider) {
  $routeProvider
    .when("/", {
      templateUrl: "home.html"
    })
    .when("/about", {
      templateUrl: "about.html"
    });
});

⚡ AJAX and HTTP Services

$http.get("data.json").then(function(response) {
  $scope.myData = response.data;
});

$http service helps fetch data from APIs or servers.

🧰 Custom Directives

Build your own custom directive:

app.directive('myWelcome', function() {
  return {
    template: "<h1>Welcome to AngularJS!</h1>"
  };
});

Use as:

<my-welcome></my-welcome>

✅ Best Practices

✔️ Always use ng-strict-di for dependency safety
✔️ Organize app by features
✔️ Avoid $scope where possible (use controllerAs)
✔️ Use services for business logic
✔️ Follow AngularJS Style Guide

🏁 Conclusion

AngularJS may be older, but it’s still powerful for developing robust and dynamic single-page applications. With easy binding, directives, routing, and built-in services, you can develop structured apps in no time. 🚀