AngularJS History
AngularJS version 1.0 was released in 2012.
Google’s employee Miško Hevery, started to work with AngularJS in 2009. The idea turned out very well, and the project is now officially supported and maintained by Google.
Introduction to AngularJS
AngularJS is an open-source JavaScript framework written in JavaScript. Its objective is to increase browser-based applications with MVC (Model–View–Controller) capability, in an effort to make both development and testing easier.
AngularJS extends HTML by adding new elements and custom attributes that carry special meaning. Called AngularJS because HTML uses angle brackets.
AngularJS is an MVW (Model-View-Whatever) framework and can be used to develop apps based on either:
- MVC (Model-View-Controller)
- MVVM (Model-View-ViewModel)
Downloading AngularJS – If you want to download AngularJS, go to angularjs.org, and follow the instructions there.
AngularJS CDN – If you don’t want to download AngularJS, you can include it from a CDN (Content Delivery Network).
As a JavaScript file, AngularJS is distributed and can be added to a web page with a script tag, as shown below.
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.8/angular.min.js"></script>
Key Points of AngularJS
- AngularJS is a client-side JavaScript framework and runs in the web browser.
- AngularJS is used to make single-page web applications. It means the browser only loads the page once, and to fetch new information it makes asynchronous calls to the server.
- It helps you to build front-ends for web-based applications.
- It makes creating a UI (User Interface) easier through data-binding.
- It helps you to organize and architect an application means it is prescribing a way for you to divide your application up into smaller parts.
AngularJS Components
Model – Can Bind the value of an input field into a variable.
View – This is what the users can see (generated HTML).
Controller – The business logic behind an application.
Scope – A context with available data models and functions.
Directives – Extend HTML with custom elements and attributes, using the ng- prefix.
Expressions – Represented by {{}} in the HTML, can access models and functions from the scope.
Templates – HTML with additional markup in the form of expressions and directives.
AngularJS Extends HTML
AngularJS extends HTML attributes with directives which are known as ng-directives:
ng-app – This directive is used to defines an AngularJS application.
ng-model – This directive is used to binds the value of HTML controls (input, select, textarea) to application data.
ng-bind – This directive is used to binds application data to the HTML view.
Example
Open the Example1.html file and add the code in it.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.8/angular.min.js"></script>
<title></title>
</head>
<body>
<div ng-app="">
<p>Name: <input ng-model="name"></p>
<p ng-bind="name"></p>
</div>
</body>
</html>
Example explained:
- When the web page has loaded, AngularJS starts automatically.
- The ng-app directive tells that the <div> element is the “owner” of an AngularJS application.
- The ng-model directive binds the value of the input field to the variable name.
- The ng-bind directive binds the content of the <p> element to the variable name.
Output:
