MyApp.config([ '$routeProvider', function($routeProvider) {
$routeProvider
.when('/getAttributes', {
templateUrl : 'view/attributes.jsp',
controller : 'attributeController'
}).when('/mainMenu', {
templateUrl : 'view/mainmenu.jsp',
controller : 'mainMenuController'
}).otherwise({
redirectTo : '/mainMenu'
});
} ]);
We use the above routing configuration for implementing templates with Angular JS.
This gets called we we click on any anchor tag with some ID, its okay for dynamic pages but even for static links it tries to find the mapping.
For example in the below code we dont want the routing to be triggered. But it triggers and goes to the mainMenu. I tried location.path() in the controller but even then its the same, because we have defined the routerprovider it always redirects to mainmenu . Please suggest on how can control the trigger or is there any other way to implement this routing in AngularJS
<ul class="tabs promo-tabs" role="tablist" ng-repeat>
<li ><a target="_self" href="#staticTab1">tab1 </a></li>
<li ><a target="_self" href="#staticTab2">tab2</a></li>
</ul>
Updated it as per comment below still it didn't work after adding target="_self"
Add target="_self"
tab1
Related
If I have two list items
<li></li>
<li></li>
and based on which is clicked, to use ng-include to render in a div on the current page?
<div ng-controller="main-panel" class="main-panel">
<ng-include src="'clickedElement'"></ng-include>
</div>
I am confused as to how to use routes to render an html inside a div, which is decided by which element you click?
main.config(function ($routeProvider, $locationProvider, $httpProvider) {
$routeProvider
.when('/', {
controller: 'side-menu'
})
.when('/signup', {
templateUrl : 'signup.html',
controller: 'main-panel'
});
$locationProvider.html5Mode(true);
});
HTML
<li ng-repeat="oucampus in secondaryLinks.oucampus">
<a ng-href='{{oucampus.href}}'> {{oucampus.title}} </a>
</li>
<div class="main-panel" ng-view></div>
CONTROLLER FUNCTION
oucampus: [
{title: "Requests", href:"signup.html"},
],
Plunker
If you are trying to render HTML content based on routes, you would want to use a routing service such as ngRoute or ui-router. ng-include isn't the best option for implementing routing within your angular application.
With ngRoute, you use a directive ng-view to have angular load html/controllers/etc based on route specified/configured in your applications config() method into some DOM element. This is triggered when you click on an <a> that has an ng-href with a corresponding path or programatically in something like a controller using the $location service path() method.
Route Configuration:
app.config(function($routeProvider) {
$routeProvider
.when('/foo', {
templateUrl: 'foo.html',
controller: 'FooController'
})
.when('/bar', {
templateUrl: 'bar.html',
controller: 'BarController'
});
});
HTML:
<ul>
<li><a ng-href="#/foo">foo</a></li>
<li><a ng-href="#/bar">bar</a></li>
</ul>
<div ng-view></div>
Here is a plunker demonstrating the functionality of basic routing including loading specific controllers and HTML templates based on a specific route.
ng-include
If you absolutely need to use ng-include, you can using a function executed via ng-click attached to $scope or controllerAs to update the src property of ng-include to load a template based on a click element. I've updated the plunker.
Hopefully this helps!
I'm new to angularJS. I'm using angularjs to implement a website. The website has two pages. The first page list all items and if user click on it, it will redirect to detail information page.
I have my routes configure as below:
var app = angular.module('myApp', ["ngRoute"]);
app.config(function($routeProvider) {
$routeProvider
.when("/list", {
templateUrl : "list.html",
controller : "listCtrl"
})
.when("/detail/:id"){
templateUrl : "detail.html"
}
});
In the list.html. I use ng-repeat to display a list of items and a listener on to listen mouse click.
<ul class="list-group">
<li class="list-group-item" ng-repeat="i in items">{{i.name}}
<a href="#" ng-click="goToEdit($index)">
<span class="glyphicon glyphicon-pencil"></span>
</a>
</li>
</ul>
I want to redirect view to detail information in the ng-click function.
I tried $location.path() but it not working.
$scope.goToEdit = function(index){
console.log($location.path());
$location.path("/detail/" + index);
console.log($location.path());
}
This way won't work.
Even though the second log on console show location.path() has been changed to " /detail/id".
If I add $scope.$apply() after $location.path(); Then I will get a action already in progress error.
Do you have any solution???
Thanks
It might have something to do with use href="#" which is not good when using hash based routing
You could just set the href yourself and don't really need the controller function or ng-click
<a ng-href="#/detail/{{$index}}" >
Note that you should really give each item a unique identifier as $index could change due to using filters in ng-repeat or removing data from array
Also you don't have a controller identified for your second route
I have a Angular Application, in a main.js file i have defined the app routing but i have a doubt, for example, i have a accodion menu of bootstrap, when i click about the next button:
<img src="img/ico_menu_off.png" />
Due to the angular's configuration routes, the atributte href="#MainMenu", it recognizes it as a route and I not want to do anything.
This is the js code:
angularRoutingApp.config(function($routeProvider) {
$routeProvider
.when('/', {
templateUrl : 'pages/home.html',
controller : 'mainController'
})
.when('/customerSearch', {
templateUrl : 'pages/customer-search.html',
controller : 'customerSearchController'
})
.otherwise({
redirectTo: '/'
});
});
How could resolved this? thanks, (i'm new in Angular)
You shouldn't use href attribute to select accordion in your case, because it will change the URL directly as you are using anchor's href. To solve problem you should use data-target attribute instead of href
Markup
<a data-target="#MainMenu" data-toggle="collapse" data-parent="#MainMenu" class="dropdown-toggle">
<img src="img/ico_menu_off.png" />
</a>
You can remove the href and open it with JavaScript on click:
$("#MainMenuTrigger").click(function(){
$('#MainMenu').modal();
});
http://getbootstrap.com/javascript/#js-programmatic-api
I suggest you also to give a look to Angular UI Bootstrap.
you could remove hash from URL. find this URL it will help you
http://www.codeproject.com/Tips/1063634/Removing-the-sharp-Sign-from-AngularJS-URLs-with-I
I am using Kendo tabstrip with angular ng-repeat and ui-router. Now the tabstrip can have different combination and different number of tabs based on the input. I am able to give different ui-sref and ui-view names to each tab while adding tabs dynamically using angular ng-repeat.
<div class="demo-section k-content">
<div kendo-tab-strip="detailsTabStrip" k-ng-delay="Tabs">
<ul>
<li ng-repeat="tab in Tabs" ng-class="getClass($first,tab)" ui-sref="{{tab.sref}}">
{{tab.name}}
</li>
</ul>
<div ng-repeat="tab in Tabs" ui-view="{{tab.view}}"></div>
</div>
</div>
So, this code gives an individual ui-view to each tab. There can 150 different types of views possible in tabs. So, I cannot hard code the view names in the router file. I need the router to accept a parameter for view name or at least in some way I can let the router know which view to populate with the html.
$stateProvider
.state('details.tab', {
url:'/tab/:tabName',
views:{
// the view name should be able to either read the state param and
// accordingly assign template or should at least be able to read the state
// and accordingly assign the template or if views can be a function.
"details.tabName": {
templateUrl: 'resources/pages/grid.html',
controller: 'gridController'
}
}
});
Is it possible to make the views names dynamic in any way. There are other parts in the application which have absolute ui-view defined and work perfectly. The changes made to make views names dynamic for this part should not affect the other parts of application. Can I use relative views to achieve this in any way? Thanks for all the help.
Also, if I am adding tabs to kendo-tab-strip dynamically using ng-repeat, can i specify a single ui-view="details" for the tabstrip. Like for all the tab states, populate details view.
<div kendo-tab-strip="tabStrip">
<ul>
<li ng-repeat="tab in Tabs" ng-class="getClass($first,tab)" ui-sref="{{tab.sref}}">
{{tab.name}}
</li>
</ul>
<div ui-view="details"></div>
</div>
If I do this, all the tab loads up fine first time but if I try to deep dive into tabs, for ex: if I try to deep dive into fifth tab, then the content for fifth tab loads up fine but its not shown. Even though the tab is shown as active(I am using ng-class as a function to decide which tab should be shown active by sending k-state-active to the appropriate tab while adding it).
And if I define different views for different tabs dynamically like below,
<div kendo-tab-strip="detailsTabStrip" k-ng-delay="Tabs">
<ul>
<li ng-repeat="tab in Tabs" ng-class="getClass($first,tab)" ui-sref="{{tab.sref}}">
{{tab.name}}
</li>
</ul>
<div ng-repeat="tab in Tabs" ui-view="{{tab.view}}"></div>
</div>
then dont know, how to tell state router which view should be populated when a particular tab is clicked. Like when third tab is clicked, the corresponding ui-view specified is ui-view="third",when fourth tab is clicked, the corresponding ui-view specified is ui-view="fourth" and so on.How to configure the views dynamically in ui-router?
Thanks a lot for all the help.
Make a common view, use that view name on your state provider.
In that view include your desiered view as
<ng-include ng-src="'resources/pages' + tabname + '.html'" />
A cleaner solution is provided here:
app.js:
app.config(function ($locationProvider, $urlRouterProvider, $stateProvider) {
$urlRouterProviderRef = $urlRouterProvider;
$locationProvider.html5Mode(false);
$stateProviderRef = $stateProvider;
});
app.run(['$q', '$rootScope', '$state', '$http',
function ($q, $rootScope, $state, $http)
{
$http.get("myJson.json")
.success(function(data)
{
angular.forEach(data, function (value, key)
{
var state = {
"url": value.url,
"parent" : value.parent,
"abstract": value.abstract,
"views": {}
};
angular.forEach(value.views, function (view)
{
state.views[view.name] = {
templateUrl : view.templateUrl,
};
});
$stateProviderRef.state(value.name, state);
});
$state.go("home");
});
}]);
Reference from AngularJS - UI-router - How to configure dynamic views
I have a "Contact" link in my Navbar set to open a form as a modal when clicked. This is using Bootstrap. Recently I decided to add some AngularJS routing to my site and it works great for all links except this one. My route config looks like this:
asApp.config(function($routeProvider) {
$routeProvider
// route for the home page
.when('/', {
templateUrl : 'pages/home.html',
controller : 'mainController'
})
// route for the about page
.when('/about', {
templateUrl : 'pages/about.html',
controller : 'aboutController'
})
// route otherwise
.otherwise({
templateUrl : 'pages/home.html',
controller : 'mainController'
});
});
Since I don't have a dedicated page for the contact form (it's meant to open as a modal), I haven't added any specific routing for "/contact" in the above code which is why clicking that link triggers the "route otherwise" block and redirects opens up the home page. Is there any way to suppress this routing only for the "Contact" link? I want it to stay on the page that was open when the link was clicked and the modal opened. Not sure if I have been coherent enough so please feel free to ask me if you are lost.
In case it helps, here's the modal snippet along with some other relevant HTML parts:
/* Navbar snippet */
<div class="collapse navbar-collapse" ng-controller="HeaderController">
<ul class="nav navbar-nav navbar-right">
<li ng-class="{ active: isActive('/about')}">About</li>
<li ng-class="{ active: isActive('/blog')}">Blog</li>
<li>Contact</li>
</ul>
</div>
/* Main body snippet */
<div id="main"><div ng-view></div></div>
/* Modal snippet */
<div class="modal fade" id="contact" role="dialog">
<div class="modal-dialog">
/* Contact form code here... */
</div>
</div>
Thanks a ton for your attention and help.
You could try data-target to not mess with the angular routes (url after #)
<a href data-target="#contact" data-toggle="modal">Contact</a>
There is a great module ui.bootstrap by angularUI team for using angular with bootstrap:
https://angular-ui.github.io/bootstrap/
It has a $modal service to handle opening views as a modal.
However if you don't want to use that, you can try the following:
The most simple solution will be not to have the contact as a anchor tag.
Use a div with ng-click instead.
i.e., in place of <li>Contact</li>
use <li><div class="contact-modal" ng-click="functionThatOpensModal()">Contact</div></li>
And you can style this specific div to look same as the other links.
Hope this helps