I'm using Bootstrap's single page view template, specifically this one:
http://www.bootply.com/85746
I'm at the point where I have almost 500 lines of code in my view and I'm going to have many more.
Is there a way to create partial views with Angularjs where every section in the view will render from a partial view? I understand that I can only use one ng-view directive in a page so using it is not going to work. I could not find any solution for it on the web.
Thank you,
Mila
Try ui-router, which is a great solution to flexible routing with nested views.
Related
I'm starting using Angularjs. I have a simple project (HTML + javascript/Angular js). When I visualize the HTML file on my browser I see a second hidden elements. Do you maybe know the reason? How can I solve this?
This problem is caused by the way Angular works. I guess that you are able to see the skeleton of angular (something like {{"your variable"}}) for a second and then the data is rendered to it.
Your angular scripts are called once the page is loaded, so the delay in fetching data from server by your $http.get() methods causes the elements to appear without data.
Thankfully, AngularJS has a simple solution to the problem in the form of ng-cloak directive. Refer the documentation for details.
https://docs.angularjs.org/api/ng/directive/ngCloak
I am using ui-router of angularjs in my SPA. When i add an style to my view pages, angularjs loads them when switching to than view. Thats actually pretty cool that it can be done in runtime.
The problem is i do not want it to do so. for example i want to use bootstrap css in my view. it is already inserted in the main page, so it is not needed to get loaded again form child view. but for my IDE to auto-complete class names, it is needed to be added to html page of subview.
Is there any way to ask Angularjs to ignore Head part and just load Body part of my html?
I have ASP.Net MVC 5 application with Layout.cshtml and I have included the HTML view page. But I want to keep the consistent look and feel across multiple views in my application. I know I can do this if I have a Razor view page:
#{
Layout = "~/Views/Shared/_Layout.cshtml";
}
If I'm also using the same above code on the HTML View page, it doesn't pick up the Layout as it does in Razor page.
In html page you can't call '_Layout.cshtml' file directly to use layout , you have to add style and html tags manually in new created html file which you have in '_Layout.cshtml'. There is an option to call '_Layout.cshtml' using iframe but it is useful only if you don't want to apply server side logic, which is of less possibility.
I'm very sorry If I don't explain myself very well, so here goes. Basically I'm having trouble trying to work this issue out. I am using Yeoman to generate my angular project. I have a header and footer, footer will be static and header will need its own controller. The problem I am having is, I don't particularly want the header to be outside other controllers. Maybe I'm wrong and it's not actually a problem and best practice would obviously be to have the header outside ng-view? This is what I have so far:
<head>
<!-- head stuff here -->
</head>
<body ng-app="dscover.me">
<div ng-include src="'partials/header.html'"></div>
<div ng-view="">
</div>
<div ng-include src="'partials/footer.html'"></div>
</body>
Is this a correct way of including a header and footer outside the MainCtrl? It makes sense to me only because, if I was to create a new controller / page, I'd still have access to the controllers outside it? The problem again is I want to refrain myself from using rootScope and unfortunately this seems to be the only way when it comes to having the header outside the MainCtrl?
I'm sorry for the terrible explanation, but I hope you guys understand. If there is a better way of doing this, please let me know. Any help will be appreciated!
First of all, I would try to rely on the given functionality of AngularJS as possible. There are three ways to implement the header and footer in the app:
ng-include
The reason why you'd like to use it is simplicity and less to code. From docs:
Fetches, compiles and includes an external HTML fragment
So, it simply includes an external chunk of html.
ng-view
This is a default router in Angular (before 2.0) and there is a better option called ui-router.
The UI-Router is a routing framework for AngularJS built by the AngularUI team. It provides a different approach than ngRoute in that it changes your application views based on state of the application and not just the route URL.
It supports features like nested views etc. The main reason to use it would be to separate controllers and scopes of those views. In terms of headers and footers, if you want to have a completely separate logic inside, then go for it.
custom directive
This option should be used in case if you have a logic overlapping in the main content scope and header / footer. Also you get additional perks with it like reusability etc.
So, your choice to pick one, but don't be lazy to search and read (here, here, here or here) before you write.
I created a mvc4 web app. with razor view engine. There are Layout page and content pages(Home, Contact, About, etc.) you know. But there is no reference to layout from content pages.
Should do not content pages include this:
Layout = "~/Views/Shared/_Layout.cshtml";
In content pages this code is missing.And they works.
How does it do this without layout reference?
It's because partial views are included into a 'non-partial' page, which does have a layout defined.. So they make use of that and just become a part of that page
EDIT
I'm sorry for the late reply, I just checked it out and it appears to be cause of the _ViewStart.cshtml page, this is a page that runs before any view is rendered, read more here:
weblogs.asp.net/gunnarpeipman/archive/2010/10/10/…
thats your masterpage if you want a partial view
#Html.Partial("partialviewname". "controller")
and the partial view doesnt use the masterpage since it is inserted to a place you desire