AngularJS

This tutorial blog will primarily focus on what data binding is and its types - Property Binding. Event Binding. Two Way Binding. Data binding is one of the most powerful and important features in a software development language. In AngularJS, it is the automatic and instantaneous synchronization between model and view (different layers of Angular.JS). Consider the situation where we need to transfer the data from the component(model) to the view or vice versa. You can very easily tackle this problem with the concept of data binding.Let’s discuss different types of data binding with examples. What Is Property Binding? Before...

This blog will help you learn how to integrate bootstrap in your Angular.JS projects and apps. Follow the steps listed below in order to integrate Bootstrap in Angular.JS - 1. For using Bootstrap in our Angular.JS app, we have to use our registration form app which we have created using custom component. 2. Our first step will be to inherit Bootstrap in our angular.js project. So, to integrate, write down the following code line in the terminal tab of your editor -[php]npm install bootstrap --save[/php] This code line means install bootstrap through node package manager and save it. 3. As soon...

After gaining the knowledge about how components are created in angular.js manually, this blog will help you learn how to create components automatically. If you are unfamiliar with the manual component creation, visit the blog - Creating Registration Form With Custom Component In AngularJS for detailed information. Follow these basic steps in order to create components automatically - 1. In the terminal tab of Visual Studio Code editor write the following code line for starting up the local server [php]ng serve[/php] 2. Again, in the terminal tab make sure you are in the myapp directory (notice the path on the command...

Before starting with the registration form, you should be aware of basic file rendering and server setup in AngularJS. If not then quickly glance over the blog - Creating First App In AngularJS With Basic File Setup & Configuration. This blog will also be helpful for you to learn how to call a custom component in AngularJS. Follow these steps to create a registration form with custom component - 1. Open your Visual Studio Code editor and establish connection with the local server. 2. Follow the flow, Explorer tab (left sidebar) → myproject → myapp → src → app. In this...

Firstly, we need to choose a decent IDE (Integrated Development Environment) in order to write our codes and compile it. There are several good IDEs available on the web but we will be using Microsoft’s Visual Studio Code editor. Steps For Basic File Setup - Open Visual Studio Code and switch to its terminal tab. Make sure you are in correct directory by checking the file path (in our case \Desktop\myproject\myapp). Since the server isn’t active now, type [php]ng serve[/php] to initiate the connection. After the compilation ends type localhost:4200 in your browser to see the app’s web page/front end....

AngularJS is commonly used for creating a single page application. So, it becomes challenging for users to interact their application with the database and perform CRUD operation in it. In this tutorial, we are going to create an AngularJS CRUD Example and will also explain each CRUD operation in detail. For storing of data, we are going to use MySQLi database. We will learn: Read data from the database. Insert data into the database. Update existing data in the database. Delete data from the database. In order to understand easily and effectively, we are going to create an application which will perform...

We have already learned that how to apply animation using specified directives of AngularJS. AngularJS also provide the facility to apply animation to custom directives. Now, we are going to learned that how to  apply animation in our own directives. We will do this by using the methods of $animate service of AngularJS. $animate Service $animate service belongs to the ngAnimate module of AngularJS. And to use ngAnimate you have to include angular-animate.js file in your page. To use $animate service, we need to inject $animate services in our own directive after injecting this, we can use its method to apply animation...

Along with various important features, AngularJS also provides the functionality of animation. AngularJS provides some inbuilt directives especially created for animation which you can directly use in your application. Or you can use $animate service with the custom directive for animation purpose. In this tutorial, we are covering animation via inbuilt directives. Animation using $animate service will be cover in our next blog. To achieve the animation, angular uses some classes with some defined directives or custom directive, which are automatically added by angular, when that particular event occurs. Some of these directives are ngRepeat, ngSwitch, ngView, ngClass. watch the live demo or...

AngularJS provides the lots of important features with their easy uses. But, when we talk about transclusion, which is one of the important features of angular, it creates some confusion among users regarding its proper uses. So, in this blog, we are going to explain transclusion from the very basic level so that you can easily catch up the concepts and uses of transclusion. Transclusion Transclusion is a process of including the content of one template into another. It provides us the flexibility to use a custom directive in more efficient manner. Need of Transclusion: Let's understand the need of transclusion...

Provider works in the same way as the service or factory works. It has an additional functionality that could be configured during the module configuration phase. We can configure a provider according to our requirement. We applied this configuration when we want that our configuration must be set, before the application start. The provider usually defined with the implementation of  $get method and this $get is a factory function. In fact, when you create a factory function, an empty provider with $get function is set to your factory function automatically. Watch the live demo or download code from the link given below....

In the last two tutorial blogs, AngularJS Custom Directive and AngulaJS Isolate Scope, we have learnt about creating our own custom directives and isolate their scopes from their parent scopes. In this tutorial, we are going to dive deep into the custom directive and will learn some of the important concepts and tricks of the AngularJS custom directive. link function link function is basically used to manipulate the DOM( Document Object Model ) element using custom directive.  link option in custom directive registers DOM listener and also update the DOM. Watch the live demo or download code from the link...

In this blog, we are going to learn about creating popup modal using AngularJS and UI Bootstrap. UI Bootstrap is a library written by Angular UI team. It contains bootstrap component written in pure AngularJS. AngularJS allows data binding. It means, just set a variable and you can access it from all places where the variable is referred. UI Bootstrap contains a repository of the angular directive for the different task performed over the bootstrap component. Watch the live demo or download code from the link given below. First, download and include  UI Bootstrap and AngularJS file in the application's main HTML...

In this tutorial, we will have a look at the advanced concept of AnguarJS custom directive. If you are new/starter to angular and want to know about the basics of custom directive, read our article AngularJS Custom Directive. Isolate scope: Isolated scopes are the scopes which are fully dedicated to a particular custom directive only. It means that the scope inside a directive gets separated from the scope outside. Directive's inner scope have been mapped with the outer scope in order to access and use their property. By default, custom directives access the shared scope of their parents, i.e $scope in controller. In such...

AngularJS provides an additional functionality to validate a form in a very simple way. So, in this tutorial, we will explain how you can validate your forms using AngularJS. In the previous blog, we have already learnt about how to create a form using angular. Now, we'll talk about validating a form at the client side. Note:- While performing client side validation,  it's also necessary to apply server side validation because of security reasons. In AngularJS, there are some special properties of form by using which validation can be performed. Watch the live demo or download code from the link given below. In...

Directives are one of the core features of AngularJS. Angular provides a large number of built-in directives and makes it easier for the user to add and control various functionality in their application. But, sometimes users have their own demands and they want to add a different functionality to their application. In such condition, built-in directive can't help them. But there is no need to worry because angular allow their users to create their own custom directives and use them in their application whenever and wherever they want. To create a custom directive, angular provides a guideline for the user to...

In angular, a form is a collection of controls. Controls (such as, input, select, textarea, button) are the ways to interact with the form. In AngularJS, we use ng-model to access user's data. We bind input field to a model property using ng-model. ng-model binds input fields of the form to the object of the model ($scope) synchronously, means the value in the scope object of the model and in the form of view will be same. Watch the live demo or download code from the link given below. Note: ng-model: ng-model provides two-way data binding. It binds the value of the form to...

Dependency Injection is the pattern of designing software in which one or more services (known as dependencies) can be injected in the component (dependent object). It makes our code more maintainable, testable and usable. There are many components in which dependency can be applied like controllers, directives, filter,  service, factory, provider, value, constant. But some of them are But, some of them are non-injectable. It means you can't inject them into a component such as controllers, directives, filter. Rest of them are injectable and they are also called service creators. Watch the live demo or download code from the link given below. when...

You have noticed that whenever you write the URL of an Angular application, a hashtag, i.e /#/, always appear after the application root folder. For Example: - [php] https://www.formget.com/tutorial/angularjs/#/emp_details/0[/php] It happens because AngularJS is a javascript framework which work at front-end rather than back-end. So, angular adds a hashtag, by default, after the application root folder name. In this tutorial, we will explain you how to remove hashtag from the routing URL. Watch the live demo or download code from the link given below. To demonstrate this, we are using the same application that we had created in our last blog...