AngularJS — Introduction

What is AngularJS?

AngularJS is a structural framework for dynamic web apps.

Key Features

Feature	Description
Two-way binding	Automatic sync
Directives	Extend HTML
Dependency Injection	Modular services
Templates	HTML-based
MVC	Model-View-Controller

MVC Pattern

// Model
$scope.user = { name: 'John', age: 30 };

// View
<h1>{{user.name}}</h1>

// Controller
app.controller('UserController', function($scope) {
  $scope.user = { name: 'John', age: 30 };
});

Directives

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

<!-- ng-repeat -->
<ul>
  <li ng-repeat="item in items">{{item}}</li>
</ul>

<!-- ng-show/ng-hide -->
<div ng-show="isVisible">Visible</div>
<div ng-hide="isVisible">Hidden</div>

Expressions

<p>{{5 + 5}}</p>
<p>{{name.toUpperCase()}}</p>
<p>{{price | currency}}</p>

Mini Practice

1. Create an AngularJS app
2. Use expressions
3. Implement MVC pattern
4. Use basic directives

Up Next

Continue with Get Started — setting up AngularJS.