Geek Answers Handbook

What is the difference between these 2 Angular code snippets?

I am heading for AngularJS at Coursera.

The code that the teacher demonstrated in the videos, but for some reason I could not work in my environment:

Page Layout (Partial):

<div class="media-body"> <h2 class="media-heading">{{dish.name}} <span class="label label-danger">{{dish.label}}</span> <span class="badge">{{dish.price | currency}}</span></h2> <p>{{dish.description}}</p> </div>

Fragment A (demonstrated by the professor that I could not work):

 var app = angular.module('confusionApp',[]); app.controller('dishDetailController', function() { var dish={ //attributes here; }; this.dish = dish; });

When I run this function, I get no errors in the console, but I get nothing on the display.

Fragment B:

 var app = angular.module('confusionApp',[]); app.controller('dishDetailController', function($scope) { var dish={ //attributes here;}; $scope.dish = dish; });

When I do this, it works. Is there any difference?

+7
javascript angularjs
source share
3 answers

Fragment A does not work, most likely due to the way the controller is connected. I accept wild assumptions here.

Where you add ng-controller , it should look something like this:

  <body ng-controller="dishDetailController as dish">

Where could you do this:

  <body ng-controller="dishDetailController">

It cannot be a body tag, it can be a div or something else.

And to better understand it inside the fragment, the Controller tried:

 var app = angular.module('confusionApp',[]); app.controller('dishDetailController', function() { this = {//attributes here} });

Otherwise, you may need to write: {{dish.dish.stuff}} inside the template.

+5
source share

The second snippet (B) is more or less directly from the documentation https://docs.angularjs.org/guide/controller and most likely what you are looking for.

In fragment A, assigning a value via this will apply the value directly to the controller itself. This will make it difficult to access in other contexts and most likely not what you want.

Conversely, fragment B uses the dependency injection provided by AngularJS to ensure that the appropriate amount is injected into the method. $scope has a much more complex life cycle, but it’s important to note that this will make dish accessible outside the context of your controller, for example, in an HTML template.

If you need more info, this guy has a better answer: 'this' vs $ scope in AngularJS controllers

+1
source share
 chech this code it is working <div ng-app='confusionApp' ng-controller='dishDetailController' class="media-body"> <h2 class="media-heading">{{dish.name}} <span class="label label-danger">{{dish.label}}</span> <span class="badge">{{dish.price}}</span></h2> <p>{{dish.description1}}</p> </div> <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.0-rc.2/angular.min.js"></script> <script type="text/javascript"> var app = angular.module('confusionApp',[]); app.controller('dishDetailController', function($scope) { var dish={ label:'name',name:'afzal',price:'10',description1:'this is the price'}; $scope.dish = dish; }); </script>
0
source share

More articles:


All Articles