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

Estimated reading: 3 minutes 493 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.