What is AngularJS and Why we use AngularJS ?
AngularJS is a JavaScript framework which is designed for developing Single page web applications. If we don’t have such kind of a framework, the traditional way of developing web site is to modify or to alternate the DOM. DOM is the structural representation or the logical structure of the web page. By manipulating DOM, we can change how the complete structure of the web page is arranged and as well as to add functionalities to the web page.
Let’s see what is meant by DOM :-
In AngularJS, it allows users to separate all the DOM manipulations from the view. These DOM manipulation units are called as “Directives” which are reusable and then developers can focus on UI designing and application logic developing as two separated things.
Some of the Features of AngularJS :-
What is MVC ?
MVC stands for Model, View and Controller which is the architecture used by AngularJS. Let’s see the main components of MVC architecture….
Let’s create a simple AngularJS Application :
You can use whatever the Code Editor you prefer to create this application and I am using VS-Code throughout this application. Then you need to have separate JavaScript file(with .js extension) and HTML file (with .html) for this application. You can use whatever the file names you want.
Common Steps to be followed,
- Including AngularJS :- Here I’m using AngularJS CDN. You can download AngularJS libraries and store them on your local machine as well. But if we refer AngularJS libraries as AngularJS CDN Integration, we can retrieve AngularJS libraries from the CDN server which is the most effective method. We can include AngularJS JavaScript file inside the <head> tag of the HTML document to use it. Check the official site and refer the latest version. ( https://angularjs.org/ )
2. Adding the root element :- ng-app (Bootstrap the App you want ) → Actually, here we are pointing to the AngularJS app by using the “ng-app” attribute. This attribute can be added to the <html> tag based on your preferences. So, First define a module inside the JavaScript file as shown below :
“StudentModule” is the name of the module which is the first parameter and “StudentApp” is the variable name which is used to assign the module. The second parameter represents the dependencies for the module. Since we don’t have any dependencies, I have passed it as empty.
Then point the module (root element) you created inside the <html> tag of the HTML document as follows :
3. Attaching the View :- ng-controller → In this step, we combine the controller to be used. Defining the controller is done inside the JavaScript file we created. Let’s see how to define a controller….
Inside the controller, I have created a JavaScript object called student and attached it to the scope. Here, “stdController” is the name given to the controller of the StudentApp and we have assigned it to the variable called “stdController” . When we call the controller, the function is getting called and $scope object is used to manage the data between the Controller and the View.
4. Then inside the <head> tag of the HTML file, you should add the JavaScript file to be used in databinding as follows,
5. To bind the model to the view, I am going to use “ng-model” on HTML controls, since in this application, I am using HTML components like <input>, <select> and <textarea> . See how it has done in the HTML document……
6. For use “Two-way-data binding”, you need to specify the controller which you have created inside the JavaScript file in the HTML file, and within the view I have created a table to display the data. Also in the view, I have used “Double-braces” — {{}} to display the content from the model.
Now, Let’s see the complete JavaScript file and HTML file…
HTML File :- In this file I have used some Bootstrapping as well.
Now, Let’s see how the final application works :- Visit the following link to see how it is working…
Conclusion
In this article, I have discussed very basic theories of AngularJS with a practical demonstration. There are more advanced things on AngularJS. I hope you will definitely get some basic understanding about AngularJS and 2-way-databinding by reading this article. It’s better if you can implement the application by yourselves. If you have any questions to ask or things to be clarified, feel free to post them. Thank you for reading.
Cheers !!!
