I am using .NET MVC Razor as my view engine and attached an Angular controller to that view. This view is functional. However, it contains a strange behavior when the page got loaded or refreshed.
For example, if I put something like {{vm.FirstName}} into the view. When the page got loaded, I can see the pure text of "{{vm.FirstName}}" for a very short time. The text will soon be disappeared and then I will see the actual value of that property.
Any idea how to fix this problem?
Thank you guys.
If you place your curly braces {{}} in the main index.html, it will show up before angular has time to start up and parse the scope variables into the DOM.
You can use the ng-bind directive to overcome this so the text will only show after angular parses the variables.
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app ng-init="foo='hello world!'">
<h1 ng-bind="foo"></h1>
</div>
Related
I am trying to have my kendo options in angularjs model and the grid is not loading.
I would like to store the options like (vm.test.mainGridOptions={}), which is not working. Whereas if the options are stored like vm.mainGridOptions={} it's working.
Failing version:
https://dojo.telerik.com/iPiTIVOY/2
Please help me out.
Angularjs is throwing an error in console, at least in that URL
TypeError: Cannot set property 'mainGridOptions' of undefined
This sounds like a typo. You should check that "test" variable not to be undefined.
Bonus: ngCloak directive
The ngCloak directive is used to prevent the AngularJS html template
from being briefly displayed by the browser in its raw (uncompiled)
form while your application is loading. Use this directive to avoid
the undesirable flicker effect caused by the html template display.
In this question why ng-bind is better than {{}} in angular?
I understand the differences between {{}} and ng-bind. On the other hand, I can use ng-cloak instead of ng-bind.
Now my question is what are the differences between ng-bind and ng-cloak?
They do the same job relatively.
Looking at api docs, you may find what are they exactly.
ngCloak
The ngCloak directive is used to prevent the Angular html template from being briefly displayed by the browser in its raw (uncompiled) form while your application is loading. Use this directive to avoid the undesirable flicker effect caused by the html template display.
The ng-cloak directive is a built-in angular directive that hides all of the elements on the page that contain the directive.
<div ng-cloak>
<h1>Hello {{ foo }}</h1>
</div>
After the browser is done loading and the compile phase of the template is
rendering, angular will delete the ngCloak element attribute and the element
will become visible.
ngBind
The ngBind attribute tells Angular to replace the text content of the specified HTML element with the value of a given expression, and to update the text content when the value of that expression changes.
Using ng-bind instead of {{ }} will prevent the unrendered {{ }} from showing up instead of empty elements being rendered. The example from above can be rewritten to the following which will prevent
the page from flickering with {{ }}:
<div>
<h1>Hello <span ng-bind="foo"></span></h1>
</div>
You can look up things like that in the Angular Api Docs.
ng-cloak is just a css rule that sets the style to display: none !important so your {{}} expression is not visible until replaced with actual data.
https://docs.angularjs.org/api/ng/directive/ngCloak
While ng-bind is an expression itself.
When you use ng-bind, browser do ignore this while after angular is loaded , it binds the value in the view.
While if you use ng-cloak, {{}} will still appear for a short time, but as soon as angular is loaded and parsed, it will omit the {{}} till the compilation occurs.
From documentation
The ngCloak directive is used to prevent the Angular html template
from being briefly displayed by the browser in its raw (uncompiled)
form while your application is loading. Use this directive to avoid
the undesirable flicker effect caused by the html template display.
https://docs.angularjs.org/api/ng/directive/ngCloak
In a practical sense, if you pass your model into a view from the server, then ng-cloak is fine -- when the page renders, your view data is populated. However, if you're using a more mobile-friendly approach of loading your html and loading your data and perhaps localization with an additional call, then ng-model prevents {{}} flicker between when your page loads and your data arrives. However, I find ng-model insufficient as it can't be used universally, so I generally put an ng-show on a container that exposes the view after the data has been retrieved and a flag has been set.
My problem is that when I use ng-cloak in pages that include elements which make use of directives with template code, ng-cloak does not wait for this template code to load and the page is shown incrementally and not as a whole (page elements first and after a while template code pops out).
I have tried to make a custom ng-cloak directive so that it won't remove element's ng-cloak class while any child element contains ng-cloak class but with no success. I thought this one would be a common issue, but I have not managed to find a solution online. Any help appreciated!
I don't think ngCloack was designed to cloak your content until everything is loaded. It is designed to prevent your content to be rendered in its raw form, what with expressions and all.
However, according to the documentation, it might work on the body element, but I haven't verified it myself:
The directive can be applied to the <body> element, but the preferred
usage is to apply multiple ngCloak directives to small portions of the
page to permit progressive rendering of the browser view.
I have an angular multi-step form in a modal window. It has a few different views and works great but at the end of it I just want to display a tiny snippet of HTML along the lines of 'Thank you, we will be in touch shortly'
However, I thought about creating a view for this with a partial but it seems incredibly over-engineered for what it is. Is there any way in angular of just replacing the view with that sentence without creating a whole new view? This will be called from a function in the final controller
Use ng-show and ng-hide to do this in your view. Suppose if your view is no longer needed you can hide it and show the Thank you snippet at its place by using ng-show.
ng-switch is what you are looking for.
From the docs:
"The directive itself works similar to ngInclude, however, instead of
downloading template code (or loading it from the template cache),
ngSwitch simply choses one of the nested elements and makes it visible
based on which element matches the value obtained from the evaluated
expression."
http://docs.angularjs.org/api/ng.directive:ngSwitch
you can this code, if you have one area of content
<ng-view></ng-view>
good method you can find in LINK
I am currently working on an AngularJS project with Twitter Bootstrap, and am trying to shift my Bootstrap directives into Angular. I decided on AngularStrap as it provided support for Bootstrap-Select (which I wasn't sure was the same for AngularUI). The tabs example only covered static html though. Is there any way via AngularStrap or AngularJS to load html fragments dynamically, so that it is only called when the tab is clicked? My html fragments need to execute javascript as well.
My reason for doing so is two-fold. First is that each tab contains quite a lot of content, and I do not wish to load all the tabs at once, which will slow down the loading. The second reason is that I prefer a more modular approach to my source code and not put everything on the same html file.
You can use the ng-include directive to load html fragments.
Using the AngularStrap Tab's example you can switch out the static content with the url to retrieve the html fragment. Here is an example based on the AngularStrap Tab example with these key changes:
1) $scope.tabs now has a page property instead of content pointing to either template1.html, template2.html, or template3.html.
$scope.tabs = [
{title:'Home', page: 'template1.html'},
{title:'Profile', page: 'template2.html'},
{title:'About', page: 'template3.html'}
];
2) An ng-include is added to display the currently selected tab's page.
<div ng-include src="tabs[tabs.activeTab].page"></div>
Note: I have the ng-include outside of the ng-repeat so each tab's page contents won't be loaded (even if not displayed).