I have a simple angular JS app in which there is a main container html view page, a left menu for navigation between views.
//Left panel menu links
<li><a href ng-click="vm.showPanel('View1')">View1</a></li>
<li><a href ng-click="vm.showPanel('View2')">View2</a></li>
<li><a href ng-click="vm.showPanel('View3')">View3</a></li>
//JS function to load view
vm.showPanel = function (panelName) {
hideAllPanels();
if (panelName == 'View1') {
vm.isView1Visible = true;
}
}
The above is working fine, now what I want to do is add a button in View1.html called "Next" which will load next view that is view2.html & so on.
Please note both view1.html % view2.html are within a container html page.
Can anyone show me what is the angular way of doing this?
Regards
Maintain one variable which contains Views html list, like below, and that can be render it by using ng-repeat
Controller
$scope.viewList = ['View1','View2','View3'];
HTML
<li><a href ng-repeat="view in viewList" ng-click="vm.showPanel(view )">Next</a></li>
More elegant solution would be to re implement you whole show tab and hide tab logic using ui-router or angular-route as it looks like pure SPA thing.
Plunkr for Angular Route
Plunkr for Angular UI-Router
Related
I am going to design a website That should display the content of html when I click a button.
HTML
<a ui-sref="about">about</a>
<a href="" ng-click="home()" >home</a><div ng-include="templateURL"></div>
<ui-view></ui-view>
JS:
app.controller("home", hom); function hom($scope) {
$scope.home = function(){
$scope.templateURL = 'templates/hello.html'; }}
Answer to your problem is ngRoute / ui-route.
You can one of the above-mentioned solutions.
check demo here:
https://www.w3schools.com/angular/angular_routing.asp
Having this route in Laravel:
Route::get('post/{id}/comments','PostCommentsController#showComments');
I'am trying to access it from an anchor html tag href attribute in a php view which works with angular to render a list of items. This is a piece of code from this view (_post_content.php):
<ul class="media-list" >
<li class="media" ng-repeat="item in items" >
<div class="media-body">
<div class="row">
<div class="col-sm-9"><h5 class="media-heading">
{{ item.title }} </h5></div>
</div>
</div>
</li>
</ul>
The new view made by the controller PostCommentsController in the method showComments, is similar to _post_content.php but it shows comments by a post id (item.id in ng-repeat).
However, for other links all over the application, even in its main layout: navbars and logo anchors, image anchors, etc; its url's are prepended by the path /post/4/comments.
For example if i click in the item 4 of _post_content.php, a link called blog in the left nav bar in the main layout, shows this as url: /post/4/comments/blog
Of course this route does not exists and breaks all the application.
Please, any clue to solve this strange behavior? Is it possible angular is causing it, though i'm not using angular routes?
Thanks for your help.
If you are using relative paths for your other links, you should prepend them with a forward slash, so instead of:
<a href="blog">
your should have:
<a href="/blog">
That way the links will be relative to the root not to the current path (which in your case is /post/id/comments).
As an alternative you could also use the base meta tag, by including this in your pages' <head>:
<base href="http://yourdomain.com/">
But be aware that there are some side effects to using base which might affect your application. Read this for more info: Is it recommended to use the <base> html tag?.
I used button click to change the route to the next page. Angular JS retain the scroll position and doesn't scroll to the top of the ng-view.
1. Disabling $anchorScroll doesn't work
2. Using window scroll to doesn't work
$rootScope.on("$routeChangeSuccess", function(){
window.scrollTo(0,90);
})
However, to keep the fix header on iPad, the following window scroll works.
$(document).on('blur', 'input, textarea', function() {
setTimeout(function() {
window.scrollTo(document.body.scrollLeft,document.body.scrollTop);
}, 0);
});
Any suggestions? How to clear the stored scroll positions by angualar js view?
What you want is not disable anchorscroll, but enable it. You can achieve what you want using the following code:
<div data-ng-view data-autoscroll="true"></div>
or:
<div data-ng-view data-autoscroll></div>
as pointed in the AngularJS docs.
Minor update to #Rafael's answer.
Since Angular 1.3.14 you can use simpler syntax to enable autoscroll to the top when switching views with ngView:
<div ngView autoscroll></div>
Angular Docs
Have you tried setting autoscroll to false on your ng-view element?
<div data-ng-view data-autoscroll="false"></div>
I would like to create master page, that is main page which will be used in all views of the application.
For example, Left navigation and top men navigation. This navigation should be displayed in all the views, whenever url changes in application.
As per ng-view, it only renders given partial view and replace previous view. In the image above all my left and top navigation should be displayed by using angular Controller.
Controller code
angular.module('modelDemo').controller("authCtrl", ['$scope', function($scope) {
$scope.list;
}]);
Please let me know, how can i achieve this
You can use angular-route or Angular-ui-router, and setting your master, following this steps:
Step 1. Make your index.html your master page.
Step 2. Add the <header>, <footer>, <aside>, <div>, etc. referencing your templates by using ng-include
NOTE: your left and top navigation will be part of it
Step 3. The content of the view will be rendered using the directive attribute ng-view or ui-view
Step 4. Use your module app.config() to configure the children pages
Source:
using Angular Route: https://docs.angularjs.org/tutorial/step_07
template for a brand-new app: https://github.com/angular/angular-seed
using Angular UI Router: Angular Tutorial 30 mins
ng view should be able to do that just fine. Keep your top navigation / left navigation html intact and use ng view for the various display area. http://docs.angularjs.org/api/ng.directive:ngView
To use the controller from the top navigation inside ng-view you can use $parent to get access to that scope : https://stackoverflow.com/a/14700326/390330
Fiddle for parent scope : http://jsfiddle.net/ezhrw/2/
<button ng:click="$parent.letter = greek">Assignment expression {{ greek }}</button>
I was trying to create the same concept, but needed a way to define placeholders. I started experimenting in Plnkr.co and thus far, I resorted to using a LayoutManager that drives itself from settings within the routeProvider object.
Here is an example: http://embed.plnkr.co/4GPDfTSQCuqukJE7AniZ/
You'll see an example of how multiple routes use the same header and footer, I did not include an example with a sidebar.
Let me explain the LayoutManager.
I wanted to have placeholders that could be overridden. In this example, I have a toolbar that contains a title and provides a space to the right of the title for additional toolbar items. This gives views an opportunity to throw in additional functionality.
All of this is driven by the LayoutManager. The LayoutManager is a service that reads layout properties set on the $routeProvider. I wanted to implement this in a way keep things clean and self contained, per route. The LayoutManager is injected into the toolbar directive. The toolbar directive drives it's scope properties of the LayoutManager.
In turn, the LayoutManager has a dependency on the routeProvider as well as the rootScope $routeChange event.
I'm very new to Angular, open to suggestions.
I could not see any problem, if you are using bootstrap then use can easily divide your screen as you want
<div class="row">
<div class="col-lg-3">
Left panel
</div>
<div class="col-lg-9" style="border:1px solid #999; overflow-y:auto">
<div> Top Banner </div>
<!-- Main view to render all the page -->
<div ui-view> </div>
</div>
</div>
If you want complete demo and code on then see this link
Edited: 3 Nov. 2016:
If you are using ui-router then we can user abstract state to create different master pages.
You don't need to play show/hide, ng-if but just define the routing properly with you master pages and child pages
Better to see the detail
I know this is an old thread, but thought it should be noted that as of Angular 1.5+ we have been introduced to components. Instead of dealing with routes with named views and all that nonsense or using ngInclude you should be using a header component and footer component. Simply add these to your index.html (or whatever you call your master html template) and voila.
For example (this is using Angular Material and is missing the layout module but hopefully you get the point)
1. Added to index.html
<layout-header></layout-header>
2. header.component.js (you don't need all of this but I think it's helpful)
(function () {
'use strict';
angular
.module('layout')
.component('layoutHeader', {
templateUrl: 'layout/header.html',
bindings: {},
controller: Controller
});
Controller.$inject = [];
function Controller() {
var ctrl = this;
initialize();
////////////////////
function initialize(){
}
}
}());
3. header.html
<md-toolbar>
<div class="md-toolbar-tools">
<h2>
<span>Really Awesome Title!!!!</span>
</h2>
<span flex></span>
<md-button class="md-icon-button" aria-label="More">
<md-icon class="material-icons">more_vert</md-icon>
</md-button>
</div>
</md-toolbar>
AddThis button is not showing in my backbone.js template.
I have the following code in my backbone.js template file:
<!-- AddThis Button BEGIN -->
<div class="addthis_toolbox addthis_default_style ">
<a class="addthis_button_facebook sharebtn"></a>
<a class="addthis_button_twitter sharebtn"></a>
<a class="addthis_button_preferred_4 sharebtn"></a>
</div>
and I put the following in the header file.
<script type='text/javascript' src="https://s7.addthis.com/js/300/addthis_widget.js"></script>
The header file is rendered using django templates.
What can I do?
Edit:
I tried putting this in the backbone template:
<div id = "toolbox"></div>
and then putting this at the end of the render function in the backbone view:
tbx = that.$el.find("div#toolbox"),
svcs = {email: 'Email', print: 'Print', facebook: 'Facebook',
expanded: 'More'};
for (var s in svcs) {
tbx.innerHTML += '<a class="addthis_button_'+s+'">'+svcs[s]+'</a>';
}
addthis.toolbox(document.getElementById('toolbox'));
But addthis is still not rendering.
The AddThis plugin script parse the HTML at the moment it is loaded. Your template is loaded asynchronously, as so, AddThis isn't finding the relevant markup to render the buttons.
What you need to do, is to call the AddThis rendering function once your template have been render to screen.
Checkout Render with javascript section of their doc: http://support.addthis.com/customer/portal/articles/381263-addthis-client-api