I have three views:
nav, main content, footer.
Im using ui-router and when the page is loaded the nav and the footer are loaded immiditaly, but in the main content i have a request to get some data and the view delayed a one second after the nav and footer so i stuck with empty middle content to a second. How can i do that all the views will show at the same time?
<div ng-include="'client/template/nav.tpl.html'"></div>
<div class='main-wrapper'>
<div ui-view='' class='view'></div>
</div>
<div ng-include="'client/template/footer.tpl.html'"></div>
main content controller:
function HomeController( $scope, promos ) {
$scope.products = products.data; // this is come from the server directly, not ajax
}
One thing to notice that the data that requested to main content is not from ajax request it came from server request and its global.
Use ng-cloak on your template:
<div ng-cloak>
<div ng-include="'client/template/nav.tpl.html'"></div>
<div class='main-wrapper'>
<div ui-view='' class='view'></div>
</div>
<div ng-include="'client/template/footer.tpl.html'"></div>
</div>
Related
Login page (partial/login.html)
Includes a login form that will be shown using (ng-view)
Member page (partial/main.html)
Includes a nav bar
Includes the main container for contents (ng-view)
Question is how can I "hide" the nav bar in the Login page and only show it after the user has logged in?
Both my login page and member page shared the same index.html ng-view.
Sample index.html
<html ng-app>
<!-- LOGGED IN, SHOW NAV AND CONTENT-->
<div ng-if="logged" class="main_container">
<nav>
... nav bar contents here...
</nav>
<div class="main_container">
<div ng-view>... show partials ...</div>
</div>
</div><!-- end of LOGGED IN, SHOW NAV AND CONTENT-->
<!-- NOT LOGGED IN -->
<div ng-if="!logged" class="main_container">
<div ng-view></div>
</div>
<footer>...</footer
</html>
Tried using ng-if, but controllers are being called twice. May I know what others alternatives do I have?
ng-view should only be used once.
$routeProvider will help you load different view when $route changed, like:
app.config(function($routeProvider){
$routeProvider.when('/login', {
controller: 'LoginController',
templateUrl: 'partial/login.html'
})
.when('/', {
controller: 'MainController',
templateUrl: 'partial.main.html'
});
});
So now you only need to show/hide nav by your root controller, which can be injected in more top div in your page.
<div ng-controller="RootController" class="main_container">
<nav ng-if="logged">
... nav bar contents here...
</nav>
<div class="main_container">
<div ng-view>... show partials ...</div>
</div>
</div>
Next, you can set/get logged in RootController or its child controllers. Notice setting variables in child controller may create a new variable in child scope, so I suggest add a function in RootController to set logged or use a service/factory to store logged status.
You can do this using the ng-show directive, with the help of a function inside your controller.
<nav ng-show="loginStatus()">
... nav bar contents here...
</nav>
And inside your controller, you can add a function as such...
$scope.loginStatus= function() {
return $loginVariable;
}
Use the loginVariable to return true/false based on the users login status.
Similarly, you can use the ng-hide directive to hide the main_container div.
My app gets the views from an ajax request by navigation.
So when i click a link in my menu i retrieve all the Html that my view contains.
My javascript is included inside the main template and of course all my calls works.
But once i need for example to create an animated filter gallery inside a specific view, the javascript for that view doesn't work.
This is how i've organized my app:
My template
<!-- !Doctype -->
#include('partials.doctype')
<!-- Menu -->
#include('partials.menu')
<!-- Cont -->
<section id="content-wrapper">
#include('ajax.index')
</section>
<!-- Footer -->
#include('partials.footer')
<!-- Javascript -->
#include('partials.javascript')
</body>
</html>
My Controller (if there's an ajax call i retrieve the view without #extends() and #section(), otherwise i retrieve my full view):
// load page
public function loadPage($page){
return (\Request::ajax()) ? view('ajax.'.$page)->render() : view('pages.'.$page);
}
My views:
For my purpose i've created 2 type of views, one extended and one with only the html i need from my ajax calls.
a) extended, it's inside "pages" folder:
#extends('main')
#section('cont')
#include('ajax.shop')
#stop
b) only html, for ajax calls, inside "ajax" folder:
<div class="content">
<div class="container-fluid">
<div class="row page-title-box">
<h3 class="page-number">N. 67</h3>
<h1 class="page-title">Shop</h1>
</div>
</div>
</div>
I don't understand where to put my javascript for this view if i need to implement an animated filter gallery. I've tried to put javascript inside the view but my app crashed.
Your javascript should be in your public folder in a folder like public/js.
Then in your partials.javascript include your js:
<script src="/js/main.js"></script>
flow:
List exists Inside Ng-View as a view called SelectCustomer.html
when a user clicks an A href link on my list inside SelectCustomer.html, route to my other view to be loaded inside the ng-view.
For some reason the route isn't being recognized. Below is the code.
App.js snippet:
.when('/CcxMain/Shared/CreateNewContact',
{
templateUrl: "/App/Shared/Views/CreateNewContact.html",
controller: "NewContactController"
})
.otherwise({ template: "this doesnt exist" });
SelectCustomer.Html snippet:
<div class="col-sm-3 col-md-3 col-lg-3" ng-show="showme">
<a href="/CcxMain/Shared/CreateNewContact">
<div class="odd-btn">
Create New Contact...
</div>
</a>
</div>
LogCase.cshtml snippet :
<div class="row">
<div class="">
<div ng-view class="view-animation">
</div>
</div>
</div>
When the a href is called it displays the default cant find route. No js errors in browser, any suggestions?
UPDATE: flushed the JS cache and now works...strange. However refreshing causes 404
I am working on a site using angularjs. I divide the page into two section: menu and content.
for example
this a page: /mainpage
<div>
<div id="menu">
<div ng-click="setTemplate('firstPage.html')">Page 1</div>
<div ng-click="setTemplate('secondPage.html')">Page 2</div>
<div ng-click="setTemplate('thirdPage.html')">Page 3</div>
</div>
<div id="content" ng-template="template">
</div>
</div>
controller:
$scope.template = 'firstPage.html';
$scope.setTemplate = function(value){
$scope.template = value;
}
So after click on Page 1 Then Page 2 Then Page 3. So when i click on the back button, it load the last page / but not /mainpage with the right template. How would i handle the back button to not go back to previous page and go to previous template if there was a template change?
Thanks.
You should look at https://github.com/angular-ui/ui-router. You could build the functionality yourself, but ui-router is pretty much where you will end up.
The problem is you have nothing for it to default to. When you click back, it's just loading /mainpage, but it has no template to load in. Usually you use a $routeprovider for this:
$routeProvider
.when('/',
{
controller: 'yourControllerName.js',
templateUrl:'mainpage.html'
})
.otherwise(
{
redirectTo : '/'
});
I am building an Angular app and hitting a bit of a snag in how to handle the home page. The home page is 90% different - only the header stays the same - in there I have directives that show user login state for ex.
To make use of routing/templates etc I'd ideally like to have my ngview in the white area of sample shown - that all works fine - just not sure how to build the home page. It doesn't need an ngview area persay since it's the only one of it's kind. I don't want to make it as a second apps however as that seems wasteful and would reload everything.
Googling this brings up suggestions of replacing the white area with a directive but then I think I would lose the whole routing/template benefit.
Alternatives I have seen have code to determine if on home and load a body CSS class etc but that is not ideal either as the content is so different.
UI Router is a possibility but I'd like to avoid prebeta stuff if possible.
Suggestions?
You could have this:
index.html:
<body>
...header..
<div ng-if="isHomePage()">
<div ui-view></div>
</div>
<div ng-if="!isHomePage()">
<div ng-include="'shell.html'"></div>
</div>
...footer..
</body>
home.html (with route '/')
...your home page html...
shell.html (any route different than '/')
<div>
<div>
<div ui-view></div>
</div>
<aside><aside>
</div>
finally, add isHomePage() to your root scope
$rootScope.isHomePage = function() {
return $location.path() == '/';
};