AngularJS controller as syntax

controller as syntax not working with promises
controller as syntax not working $http
controller as syntax not working then
controller as syntax angularjs
angularjs controller as example
angularjs controlleras syntax
angularjs controlleras example

In this video we will discuss AngularJS controller as syntax. This is continuation to Part 31. Please watch Part 31 from AngularJS Tutorial before proceeding.

Healthy diet is very important both for the body and mind. If you like Aarvi Kitchen recipes, please support by sharing, subscribing and liking our YouTube channel. Hope you can help.

So far in this video series we have been using $scope to expose the members from the controller to the view.

});

In the example above we are attaching message property to $scope, which is automatically available in the view.

[h1 ng-controller="mainController"]{{message}}[/h1]

Another way that is available to expose the members from the controller to the view, is by using CONTROLLER AS syntax. With this syntax, there is no need to inject $scope object in to the controller function, instead you simply use this keyword as shown below.

});

In the view, you use, CONTROLLER AS syntax as shown below.

Now, let us see how we can use this CONTROLLER AS syntax in the example that we worked with in Part 31.

1. In the when() function, notice that we are using CONTROLLER AS syntax
2. With in each controller() function we are using this keyword to set the properties that we want to make available in the view
3. Notice in studentsController and studentDetailsController we are assigning this keyword to variable vm. vm stands for ViewModel. You can give it any meaningful name you want.
4. If you use this keyword in then() function as shown below, you would not get the result you expect. That's because 'this' keyword points to the window object when the control comes to then() function.
.controller("studentsController", function ($http) {
.then(function (response) {
})
})

At this point we also need to modify all our partial templates

[h1]Courses we offer[/h1]
[ul]
{{course}}
[/li]
[/ul]

[h1]List of Students[/h1]
[ul]
[/a]
[/li]
[/ul]

[h1]Student Details[/h1]
[table style="border:1px solid black"]
[tr]
[td]Id[/td]
[/tr]
[tr]
[td]Name[/td]
[/tr]
[tr]
[td]Gender[/td]
[/tr]
[tr]
[td]City[/td]
[/tr]
[/table]
[h4][a href="students"]Back to Students list[/a][/h4]

You can also use CONTROLLER AS syntax when defining routes as shown below

var app = angular
.module("Demo", ["ngRoute"])
.config(function ($routeProvider, $locationProvider) {
$routeProvider
.when("/home", {
controller: "homeController",
controllerAs:"homeCtrl"
})
})

In our next video we will discuss, how the CONTROLLER AS syntax can make our code more readable as opposed to using $scope when working with nested scopes.

Link for all dot net and sql server video tutorial playlists

Link for slides, code samples and text version of the video

[TellaTrix]

I spent almost 2 days for this issue, finally I got it the solution here.

[codegreenie]

Bro, you r the best. Thanks to you i am becoming an AngularJS ninja daily

[nikolaivanov]

By far the best angular series on yt :)

[persistencej]

Your Tutorials are so helpful to the beginners ... Thanks a lot

[nayanamtanuj]

This channel is Netflix for Developers.

[sijimathew]

Wow. Something very useful I have learned :)

[ravitejakankatala]

Hi Venkat,

If the result is same for the "scope" and "controller as syntax" what is the need of using the later.? Is there any reasons or any scenarios that we need to use the later one.?

[GraceLordGaming]

Whats the benefit of doing so, if we can do all those with just $scope.

[ashfaqadib]

The next video has the ans why we should use Controllers as syntax.

[phani]

can we use a super keyword instead of this keyword..as said this points to curent object thats y it cant be used in then().., so to point parent obj ie.., ctrl instance can we use super key word...same as in java..? thanx in advance, ., ...very nice xplanation as well

[divewithshubham]

Is there any scene where this part is useful?

[syedbasha]

Hey
Can we achieve 2 way data binding using controller as syntax
Thanks

[nagarajunagam]

sirr
what is the difference after creating variable for this and directly we are using the this keyword

[ravishankarchaubey]

Hi Venkat sir,
I developed the same project using controller as a syntax and removing scope variable, but i am facing the problem on reload, it is showing 404 error after refreshing the page.

[robinpoulose]

Everything is covered .. pls tell me wht is resource of the such great details
is it ngbook or there are other resource .

$ctrl - is default value when alias is not given for controller .

[NavneetThePrakash]

How can I create two objects of same controller for the same view?

E.g

<div ng-controller="dashboard as vm">
<div ng-controller="healthcare as vm>
/* Here I have to access some properties of dashboard controller, Of course I can access using $parent or create a controller of specific name like 'dashboardCtrl' in stead of vm, despite I wish to know whether is it possible to create two objects? */
</div>
</div>

[digvijayghatage]

Hello Sir. Please give me answers of below question.

in singleton object if page refresh data will refresh or object will recreate
How to pass data from one controller to another controller
How to navigate from one view to anither view
how many ng-app drective we can define in single page

[papai]

So why we are going to use controller as syntax instead of using $scope object

[buskilamaor]

i did exactly the same and for some reason i keep getting {{message }} and i even tested it on an other earlier very simple angular test from earlier videos and it works fine, i copied the same thing and just changed the name of the module and it doesn't work again...note that when i set the specific page as StartPage it works fine but not when i just browse the page in the browser by right clicking on view in browser, its frustrating and weird, any ideas?

[robinpoulose]

this is more readable is ES2015 where you create class 'xyzcontroller' then constructor then use this keyword and dinfe all functon in the class and then use the class name as controller..
like
class xyz {
constructor() {
}

function abc () {

}
}

angular.module('app'')
.controller('xyz', xyz);
})();