I have used recently the ng-view in partial view and it looks much like the use of ng-include. Is there a difference between the two: ng-view directive and ng-include or when is it better to use which?
Basicly ng-View creates a new View which works with States or Routing, saying this view gets his own Controller and Stuff like it would be a html file. And ng-include is if you have like a html template which u need to show on different views and include it to not duplicate code.
So for example you can ng-include your header html where you have your navigation, and you could ng-view a register form or smth where you need it to have its own Route/ State and Controller
Related
Is there a tool or some way to view the hierarchy use of directives in your html templates? Something like react-component-hierarchy but for angular. Or maybe AngularJSGraph but showing directives pointing to other directives that use them
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>
I have created a website using angularJS and a menu with ng-routing. Now I need to open up a modal which has navigation paths to load different content on the same modal. How can I accomplish this thing? can I use ng-view?
you could use a combination of ng-if and ng-include something like
<div ng-if="mode == 'grid'" ng-include="gridUrl">
I have added ng-include to the current view and then through the controller I have changed the necessary views according to the need.
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 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).