Angular JS for Beginners | MVW pattern| Angular Binding Model data with HTML

In this video I have explained how to start AngularJS. What is the need of AngularJS and how a beginner can start of. Also explained the concept by transforming old JS based object data transfer to Angular based data binding with the HTML elements.

Angular JS can be downloaded from below link
https://ajax.googleapis.com/ajax/libs/angularjs/1.7.9/angular.min.js

If you need any help please mail me @
[email protected]
[email protected]

The source code used in this tutorials is pasted with the below changes. Please replace all (lt) and (gt) and experiment

(lt) is here meant start tag character which is not allowed to be pasted in youtube
(gt) is here meant end tag character which is not allowed to be pasted in youtube

(lt)!-- HTML forms and Javascript Object Mapping --(gt)
(lt)html(gt)
(lt)head(gt)
(lt)title(gt)My Javascript Excercise(lt)/title(gt)
(lt)script src="./angular.min.js"(gt)(lt)/script(gt)
(lt)script(gt)

function Student($scope)
{
$scope.roll_no="1";
$scope.first_name="Kuntal";
$scope.last_name="Chakraborty";
$scope.dept="IT";
}

var myApp=angular.module("htmlMapApp",[]);
myApp.controller("StudentOneController",Student);

myApp.controller("StudentTwoController",Student);
(lt)/script(gt)
(lt)/head(gt)
(lt)body ng-app="htmlMapApp"(gt)

(lt)form name="studentForm" ng-controller="StudentOneController"(gt)

Roll No(lt)input type="text" name="roll_no" id="roll_noId" ng-model="roll_no"(gt)(lt)br(gt)
First Name(lt)input type="text" name="first_name" id="first_nameId" ng-model="first_name"(gt)(lt)br(gt)
Last Name(lt)input type="text" name="last_name" id="last_nameId" ng-model="last_name"(gt)(lt)br(gt)
Dept(lt)input type="text" name="dept" id="deptId" ng-model="dept"(gt)(lt)br(gt)

(lt)/form(gt)

(lt)form name="newStudentForm" ng-controller="StudentTwoController"(gt)

Roll No(lt)input type="text" name="n_roll_no" id="n_roll_noId" ng-model="roll_no"(gt)(lt)br(gt)
First Name(lt)input type="text" name="n_first_name" id="n_first_nameId" ng-model="first_name"(gt)(lt)br(gt)
Last Name(lt)input type="text" name="n_last_name" id="n_last_nameId" ng-model="last_name"(gt)(lt)br(gt)
Dept(lt)input type="text" name="n_dept" id="n_deptId" ng-model="dept"(gt)(lt)br(gt)
{{roll_no}}(lt)br(gt)
{{first_name}}(lt)br(gt)
{{last_name}}(lt)br(gt)
{{dept}}(lt)br(gt)
(lt)/form(gt)
(lt)/body(gt)
(lt)/html(gt)