Loading...

Today we are going to see how to start AngularJS in our project. Any web developer can use AngularJS without any hassle means you don't need to install anything, just add a reference of AngularJS that you can find online. You just add the reference by pasting online path or you can download it and use it.

Below is the online reference just add it on your page where you want to use angularJS.

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>

Or you can same this file in your project also.

You will find multiple version of AngularJS. Anyone you can use as per requirement.

Below is the steps, by follow these steps you can use it.

1. You have to add a root directive by calling its predefined directive called ng-app. It's the root directive. Means inside this (ng-app), you can use AngularJS. You must remember only one ng-app can be use in a page.

<div ng-app="appName">
</div>


2. You have to add another directive called ng-controller. It's not mandatory but if you inject scope and predefined or  custom services then it's important to add ng-controller. This ng-controller will come inside the root directive ng-app. Ng-controller can be used more than one as your requirement. 

<div ng-app="appName">
       <div ng-controller="controllerName">
       </div>
</div>


3. Now, we register this ng-app and ng-controller with AngularJS inside the script like

<script>
var app = angular.module("appName", []);
app.controller("controllerName", function($scope) {
  $scope.firstName = "Mamta";
  $scope.lastName = "Kumari";
});
</script>

In the above code, module name and controller name should be same as you defined ng-app and ng-controller in HTML div.

4. Now, we will bind this $scope.firstName and $scope.lastName to the HTML View like

<div ng-app="appName">
       <div ng-controller="controllerName">
            My name is {{firstName}} {{lastName}}
       </div>
</div>