In the 4th day of AngularJS article series, we are going to learn next concept of AngularJS, that is understanding the concept of Views in AngularJS.

Before moving to key players/concepts of AngularJS, please read my previous articles:

Views

View is nothing but what user sees means user interface (UI).

view in AngularJS

View is HTML template, it render the user interface. It contains HTML and CSS and binds data or property defined in controller using the $scope object. $scope is nothing but bridge between the view and controller it helps to bind the controller properties. It uses directives to enhance HTML and render data to the view.

The following example illustrate how HTML uses directives to render data to the view,

  1. <div ng-controller="viewController">
  2. <h1>Welcome to C# Corner!</h1>
  3. <h3>List of Employees</h3>
  4. <ul ng-repeat="emp in employees">
  5. <li>{{ emp }}</li>
  6. </ul>
  7. </div>
The above code is nothing but View. The code is HTML template and it uses directives like ‘ng-controller’, ‘ng-repeat’ and {{expression}} and $scope it binds with controller.

The full code of example is here:
  1. <!DOCTYPE html>
  2. <html ng-app="myApp">
  3. <head>
  4. <title>Views in AngularJS</title>
  5. <script src="Scripts/angular.min.js"></script>
  6. </head>
  7. <body>
  8. <div ng-controller="viewController">
  9. <h1>Welcome to C# Corner!</h1>
  10. <h3>List Of Employees</h3>
  11. <ul ng-repeat="emp in employees">
  12. <li>{{ emp }}</li>
  13. </ul>
  14. </div>
  15. <script type="text/javascript">
  16. //Creating Module
  17. var app = angular.module("myApp", []);
  19. //Creating Controller using object of module 'app'
  20. app.controller("viewController", function ($scope) {
  21. $scope.employees = [
  22. 'Varsha Chaudhari', 'Sameer Rajigare', 'Makarand Borawake',
  23. 'Paritosh M', 'Prasad Kulkarni', 'Monika Kamble', 'Reshu B'
  24. ];
  25. });
  26. </script>
  27. </body>
  28. </html>
The above code ‘ng-app’ directive tells the AngularJS which module is used with this view. Same as ‘ng-controller’ tells which controller use with this view and here one more directive is used i.e. ‘ng-repeat’ directive used for looping. Using this directive we fetch one by one element from array on ‘employees’ declared in controller using the $scope object and it bind using the {{expression}} to the view. When you run the application output or view will be visible like the following image,

Run

Great, your Views in AngularJS example created successfully!

Summary

I hope that beginners as well as students understood the concept of Views in AngularJS with example. If you have any suggestion regarding this article, then please contact me. Stay tuned for other concepts of AngularJS coming soon!

Thanks for reading. Learn it! Share it!