5

I've been learning angularJs for the past few weeks and been looking at a number of large scale apps to see how things work in the real world. In most of them I have noticed when a view is loaded :

ng-init="init()"

i.e. the function init() is called in the relevant controller. Is used to set the initial values.

BUT(big but) when reading through the angular docs on ngInit i came to a rather stern looking description:

"The only appropriate use of ngInit for aliasing special properties of ngRepeat, as seen in the demo below. Besides this case, you should use controllers rather than ngInit to initialize values on a scope."

so my question is, Is it bad practise to use ngInit to initialise the values in a scope when the view is loaded? if so , why is this ? and what is the correct way?

Aidan Gee
  • 578
  • 1
  • 11
  • 26

1 Answers1

7

It is bad practice because the view is initialized at a different time than the controller AND the digest cycle has to process that function, which is an unnecessary addition to that cycle. I assume you have something like:

View:

<div ng-init="init()">
 <span>{{thing}}</span>
</div>

Controller:

Module.controller('viewController', function(scope){
    ...
    var init = function(){
     scope.thing = "123";
     ...
    }
    ...
})

The better practice is to do this:

View:

<div>
 <span ng-bind="thing"></span>
</div>

Controller:

Module.controller('viewController', function(scope){
 scope.thing = "123";
})
Fourth
  • 9,163
  • 1
  • 23
  • 28
  • 2
    Actually, I would recommend you to use the ngBind directive inside the span to avoid the blinking effect is the javascript is not fully loaded when the page is rendered (e.g :) – Alexandre Nucera Dec 12 '13 at 15:15
  • While you are correct, from the angular documentation: "It is preferrable to use ngBind instead of {{ expression }} when a template is momentarily displayed by the browser in its raw state before Angular compiles it." This indicates to me that you are better off waiting to see if you actually have that problem before switching to ng-bind. – Fourth Dec 12 '13 at 15:16
  • You might never see the problem because your browser might be running on a topnotch computer. I suggest to use it in a preventing way since there is no downside. – Alexandre Nucera Dec 12 '13 at 15:20
  • 1
    ng-bind is only really useful in your index page. Any html that gets loaded after won't have that blinking effect. – NicolasMoise Dec 12 '13 at 15:21
  • There must be SOME difference if they have different behaviors. The angular documentation says that typically you WANT to use the {{}} notation. While I have used ng-bind to defeat the issue you are discussing, I typically use {{}} until I see a problem. Also, usually the problem is less to do with computer performance and more to do with the data you are loading into the DOM and how quickly angular can bind. – Fourth Dec 12 '13 at 15:22
  • @NicolasMoise you're right, assuming you have a one page application – Alexandre Nucera Dec 12 '13 at 15:26
  • @Fourth What one should do if he wants to do things the other way round - set the value in the HTML instead, and have it attached to scope within the controller? I'm in such a situation - I need to pass PHP's session value into the controller (namely, user's ID) so I can further use it in my service. – developer10 May 27 '14 at 15:58