search

linnovate / mean

The MEAN stack uses Mongo, Express, Angular(6) and Node for simple and scalable fullstack js applications
http://mean.io
12.12k stars 3.45k forks source link

Use ng-bind where possible instead of {{}} #492

Closed pribeh closed 9 years ago

pribeh commented 10 years ago

Using ng-bind instead of {{}} is more performant and reduces the need for ng-cloak. See: http://stackoverflow.com/a/23382400

It's also easier to get into the habit of using ng-bind-html or other filters where needed to render, strip or sanitize HTML. Using ng-bind-html and other custom filters would require the (noncore) lib ngSanitize. With the example article content type it would be beneficial to use ng-bind-html="article.content" instead of {{article.content}}.

Is this something others approve?

pribeh commented 10 years ago

See: https://github.com/pribeh/mean/commit/809525c5d1c3e56f6c20b9576266236b7b2531d3

fyockm commented 10 years ago

Link PR #498

liorkesos commented 10 years ago

Drew, I'm not sure about this - the {{}} shorthand is widely documented and very comfortable. This is a development style issue. I'd like to consult with @ellman and @oritpersik about this..

fyockm commented 10 years ago

@liorkesos didn't merge into master yet. Just merged with the dynamic-dropdown branch if you want to check it out. I closed this issue because pull request #498 is the same.

pribeh commented 10 years ago

Just wanted to mention that using ng-bind where possible is not just personal preference. It's definitely preferable to use ng-bind for development and on production sites for the following reasons:

See https://docs.angularjs.org/api/ng/directive/ngBind: "It is preferable to use ngBind instead of {{ expression }} when a template is momentarily displayed by the browser in its raw state before Angular compiles it. Since ngBind is an element attribute, it makes the bindings invisible to the user while the page is loading." ()

And see: http://stackoverflow.com/a/23382400 "I am currently building a big single page app (~500 bindings per view). Changing from {{}} to strict ng-bind did save us like 20% in every scope.$digest."

Through internal testing and development I can confirm ng-bind is more performant and reduces markup flicker in certain browsers. You can verify the performance difference by comparing them with the Google Chrome Batarang extension.

It's also handy to start using ng-bind for when you need to filter content via ng-bind-html.