Views, Controllers and Scope in Angular

Hi friends,

In this section we will see that how Views, Controllers and Scope are tied together. Scope is basically another term for ViewModel. In angular, we term it as scope. If i have to summarize scope, it’s basically a pipeline between view and controller. The way it works like we have a view, so instead of maintaining the in memory objects in there in the view, we will have one controller which will be injected in the page, and with this scope, we will fetch the data from the controller. So, it’s a basically nice separation which is required indeed because it will promise maintainability and test-ability of the code.

The glue between the View and the Controller is called the Scope, and in Angular we’re going to see a lot of objects  that start with $. $scope represents the scope object. Frankly speaking, Views really don’t know anything about the controller and vice versa. But, when it comes to the data association, there should be a medium so that data can be transferred that is termed as scope here. we’ll see that view can know about the controller by using the directive @ the top of the page.

Creating a basic Controller

angular12

You’ll notice here in the parameter signature we pass $scope. This is dependency injection that’s built into AngularJS. What is going to happen is it will automatically inject a scope object in. and on the top of that you can add different kinds of properties in there.

so, when this controller gets initialized, the scope gets automatically passed in. so, basically when you see the below snippet i have called the controller explicitly by using data-ng-controller attribute so that controller gets initialized and then in the ng-repeat directive I looped in the property name which i made using $scope object, in this case it is $scope.employee. Also, i have retained the filtering option. so you can see that both the directives are working simultaneously.

angular13 angular14 angular15

 

 

Now, in the next section we will see that how to use Modules, Routes and Factories. Till then stay tuned.

Thanks,
Rahul
Happy Coding