AngularJS extends HTML attributes with Directives, and binds data to HTML with Expressions.
What is AngularJS and its features?
AngularJS is a structural framework for dynamic web applications. It lets you use HTML as your template language and lets you extend HTML’s syntax to express your application components clearly and succinctly. Its data binding and dependency injection eliminate much of the code you currently have to write.
AngularJS is a JavaScript framework written in JavaScript. AngularJS is distributed as a JavaScript file, and can be added to a web page with a script tag:<
What AngularJS used for?
AngularJS is a structural framework for dynamic web apps. With AngularJS, designers can use HTML as the template language and it allows for the extension of HTML’s syntax to convey the application’s components effortlessly. Angular makes much of the code you would otherwise have to write completely redundant.
Is Angular hard to learn?
Angular has a high learning curve whereas React has a low which takes time for the developer to master initially. The data flow control in React is one way whereas in Angular it is two-way which makes it complex when dealing with the large application. Debugging sometimes can be the toughest thing to do
AngularJS Extends HTML
AngularJS extends HTML with ng-directives. The ng-app directive defines an AngularJS application. The ng-model directive binds the value of HTML controls (input, select, textarea) to application data. The ng-bind directive binds application data to the HTML view.
AngularJS Example
<!DOCTYPE html> <html> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script> <body> <div ng-app=""> <p>Name: <input type="text" ng-model="name"></p> <p ng-bind="name"></p> </div> </body> </html>
Example explained:
AngularJS starts automatically when the web page has loaded. The ng-app directive tells AngularJS that the <div> element is the “owner” of an AngularJS application. The ng-model directive binds the value of the input field to the application variable name. The ng-bind directive binds the content of the <p> element to the application variable name.
AngularJS Directives
As you have already seen, AngularJS directives are HTML attributes with an ng prefix. The ng-init directive initializes AngularJS application variables.
AngularJS Example
<div ng-app="" ng-init="firstName='John'"> <p>The name is <span ng-bind="firstName"></span></p> </div>
Alternatively with valid HTML:
AngularJS Example
<div data-ng-app="" data-ng-init="firstName='John'"> <p>The name is <span data-ng-bind="firstName"></span></p> </div>
You can use data-ng-, instead of ng-, if you want to make your page HTML valid. You will learn a lot more about directives later in this tutorial.
AngularJS Expressions
AngularJS expressions are written inside double braces: {{ expression }}. AngularJS will “output” data exactly where the expression is written:
AngularJS Example
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>
<div ng-app="">
<p>My first expression: {{ 5 + 5 }}</p>
</div>
</body>
</html>
AngularJS expressions bind AngularJS data to HTML the same way as the ng-bind directive.
AngularJS Example
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>
<div ng-app="">
<p>Name: <input type="text" ng-model="name"></p>
<p>{{name}}</p>
</div>
</body>
</html>
You will learn more about expressions later in this tutorial.
AngularJS Applications
AngularJS modules define AngularJS applications. AngularJS controllers control AngularJS applications. The ng-app directive defines the application, the ng-controller directive defines the controller.
AngularJS Example
<div ng-app="myApp" ng-controller="myCtrl">
First Name: <input type="text" ng-model="firstName"><br>
Last Name: <input type="text" ng-model="lastName"><br>
<br>
Full Name: {{firstName + " " + lastName}}
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.firstName= "John";
$scope.lastName= "Doe";
});
</script>
AngularJS modules define applications:
AngularJS Module
var app = angular.module('myApp', []);
AngularJS Controller
app.controller('myCtrl', function($scope) {
$scope.firstName= "John";
$scope.lastName= "Doe";
});
AngularJS is perfect for Single Page Applications (SPAs).
AngularJS Example
DOCTYPE html>;
html lang="en-US">;
script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9
/angular.min.js">;/script> ;
div ng-app=""> ;
p>Name ;input type="text" ng-model="name"> ;/p> h1>
Hello {{name}};/h1>/div>
/html>
Advantages of AngularJS
Following are the reasons behind increasing popularity of AngularJS –
- Easy Language – Learning and working on AngularJS is quite easy as few simple modifications can let you achieve the benefits of AngularJS in minimum possible time.
- Two-way binding of data – Angular JS allows you to do two-way data binding that enables view and model to coordinate with the changes in one another.
- No need of observable functions – With Angular JS you would not have to use observable functions as it analyzes the DOM and creates the bindings on the basis of Angular-specific element attributes. This saves times in writing lengthy codes.
- Automatically joins the components – Most of the framework require the developers to divide the application into multiple small MVC components and write codes to join them again. However AngularJS solves this issue as it combines the components automatically.
Disadvantages of AngularJS
- Not Secure – Its applications are not safe. Server side authentication and authorization is necessary to keep an application secure.
- Not Degradable – If user of your application disables the JavaScript then it displays nothing except basic page.
- Complex at times – At times AngularJS becomes complex to handles as there are multiple ways to do the same thing. This creates confusion and requires considerable efforts.
