Categories
AngularJS

HTML DOM – AngularJS

To bind application data to attributes of HTML DOM Elements directives are used: ng-disabled, ng-show, ng-hide, ng-click. HTML DOM Elements directives: ng-disabled:It is used for disabling a given control. <input type=”checkbox” ng-model=”enableDisable”>Disable <button ng-disabled=”enableDisable”>Click Me</button> ng-show:It is used for showing a given control. <input type=”checkbox” ng-model=”showHide”>Show <button ng-show=”showHide”>Click Me</button> ng-hide:It is used for hiding a […]

Categories
AngularJS

Expressions of AngularJS

In AngularJS, To bind application data to html expressions are used. It is written inside of double braces like {{expression}}. It uses same way as ng-bind. Following example will show all the expressions of AngularJS: <html> <title>My AngularJS Expressions</title> <body> <h1>AngularJS Expressions</h1> <div ng-app=”” ng-init=”quantity=2;cost=10; colleague={firstname:’Tim’,lastname:’Ererld’,salary:25000};Points=[10,20,30,40,50]”> <p>Welcome {{colleague.firstname + ” ” + colleague.lastname}}!</p> <p>Price(Rs) : […]

Categories
AngularJS

Directives of AngularJS

To extend html, AngularJS directives are used. Now We will discuss following directives: List of directives: ng-app : Directives of AngularJS that defines and links an AngularJS application to HTML. It defines the root element. <div ng-app=””> … </div> ng-init : To initializes application data. It is used to define values to the variables which […]

Categories
AngularJS

Embed external HTML page into AngularJS

You can embed external HTML pages into AngularJS. The most common way, is to use an ajax request to fetch data from the server, and then put the data to the innerHTML of an HTML element. Basically, ng-include fetches then compiles and includes an external HTML fragment. <ng-include src=”string” [onload=”string”] [autoscroll=”string”]> …</ng-include> Directive Info:– This […]

Categories
AngularJS

AngularJS First Application

An AngularJS First Application consists of following three important parts: ng-app : Directive that defines and links an AngularJS application to HTML. ng-model : Directive that binds the values of AngularJS application data to HTML input controls. ng-bind : Directive that binds the AngularJS Application data to HTML tags. First Application Steps: Add javascript framework […]

Categories
AngularJS

MVC Architecture of AngularJS

MVC Architecture of AngularJS is a software design pattern for developing web applications. MVC Architecture consists of the following three parts: The Model Model is the lowest level of the pattern responsible for managing application data. It responds to the request which gets from view and to the instructions from controller to update itself. The […]

Categories
AngularJS

Environment Setup of AngularJS

AngularJS is distributed and can be added to a web page using a script tag. So let’s write a simple example using AngularJS library and create an HTML file firstangularjs.html as below: <!doctype html> <html> <head> <script src=”https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.17/angular.min.js”></script> </head> <body ng-app=”myapp”> <div ng-controller=”WebController” > <h2>Welcome {{myweb.title}}! How are you feeling?</h2> </div> <script> var myapp = […]

Categories
AngularJS

What is AngularJS?

What is AngularJS? AngularJS, an open source web application framework, was originally developed in 2009. It was discovered by Misko Hevery and Adam Abrons. Currently it is maintained by Google. AngularJS definition as put by its official documentation is as follows:AngularJS is a structural framework for dynamic web apps. It lets you use HTML as […]

Categories
AngularJS

Avoid These Top 11 Common Mistakes That Every Angular JS Developer Make

Introduction Angular JS Developers may have the best practices in hand, but most of the time, the issues arrive because of the approach towards the practices. To put the best practices into life, they often do not follow the standard methods and make these common mistakes. According to a survey from Stack Overflow, Angular JS […]

Categories
AngularJS

What is Data Binding in Angular?

Being a Typescript based open-source framework, Angular has support for several super heroic features. It has given Module Federation support with Webpack, an excellent solution for micro-frontend development, impeccable data binding feature, differential loading, etc. In this blog, we will learn something about Angular Data Binding. Data binding is a basic concept in Angular 10 […]