Suppose you are using routes:
// bootstrap
myApp.config(['$routeProvider', '$locationProvider', function ($routeProvider, $locationProvider) {
$routeProvider.when('/home', {
templateUrl: 'partials/home.html',
controller: 'HomeCtrl'
});
$routeProvider.when('/about', {
templateUrl: 'partials/about.html',
controller: 'AboutCtrl'
});
...
And in your html, you want to navigate to the about page when a button is clicked. One way would be
<a href="#/about">
... but it seems ng-click would be useful here too.
<div ng-click="/about">
This question is related to
angularjs
routes
angularjs-routing
angularjs-ng-click
angularjs-ng-route
Here's a great tip that nobody mentioned. In the controller that the function is within, you need to include the location provider:
app.controller('SlideController', ['$scope', '$location',function($scope, $location){
$scope.goNext = function (hash) {
$location.path(hash);
}
;]);
<!--the code to call it from within the partial:---> <div ng-click='goNext("/page2")'>next page</div>
I used ng-click directive to call a function, while requesting route templateUrl, to decide which <div> has to be show or hide inside route templateUrl page or for different scenarios.
AngularJS 1.6.9
Lets see an example, when in routing page, I need either the add <div> or the edit <div>, which I control using the parent controller models $scope.addProduct and $scope.editProduct boolean.
RoutingTesting.html
<!DOCTYPE html>_x000D_
<html lang="en">_x000D_
<head>_x000D_
<meta charset="UTF-8">_x000D_
<title>Testing</title>_x000D_
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>_x000D_
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular-route.min.js"></script>_x000D_
<script>_x000D_
var app = angular.module("MyApp", ["ngRoute"]);_x000D_
_x000D_
app.config(function($routeProvider){_x000D_
$routeProvider_x000D_
.when("/TestingPage", {_x000D_
templateUrl: "TestingPage.html"_x000D_
});_x000D_
});_x000D_
_x000D_
app.controller("HomeController", function($scope, $location){_x000D_
_x000D_
$scope.init = function(){_x000D_
$scope.addProduct = false;_x000D_
$scope.editProduct = false;_x000D_
}_x000D_
_x000D_
$scope.productOperation = function(operationType, productId){_x000D_
$scope.addProduct = false;_x000D_
$scope.editProduct = false;_x000D_
_x000D_
if(operationType === "add"){_x000D_
$scope.addProduct = true;_x000D_
console.log("Add productOperation requested...");_x000D_
}else if(operationType === "edit"){_x000D_
$scope.editProduct = true;_x000D_
console.log("Edit productOperation requested : " + productId);_x000D_
}_x000D_
_x000D_
//*************** VERY IMPORTANT NOTE ***************_x000D_
//comment this $location.path("..."); line, when using <a> anchor tags,_x000D_
//only useful when <a> below given are commented, and using <input> controls_x000D_
$location.path("TestingPage");_x000D_
};_x000D_
_x000D_
});_x000D_
</script>_x000D_
</head>_x000D_
<body ng-app="MyApp" ng-controller="HomeController">_x000D_
_x000D_
<div ng-init="init()">_x000D_
_x000D_
<!-- Either use <a>anchor tag or input type=button -->_x000D_
_x000D_
<!--<a href="#!TestingPage" ng-click="productOperation('add', -1)">Add Product</a>-->_x000D_
<!--<br><br>-->_x000D_
<!--<a href="#!TestingPage" ng-click="productOperation('edit', 10)">Edit Product</a>-->_x000D_
_x000D_
<input type="button" ng-click="productOperation('add', -1)" value="Add Product"/>_x000D_
<br><br>_x000D_
<input type="button" ng-click="productOperation('edit', 10)" value="Edit Product"/>_x000D_
<pre>addProduct : {{addProduct}}</pre>_x000D_
<pre>editProduct : {{editProduct}}</pre>_x000D_
<ng-view></ng-view>_x000D_
_x000D_
</div>_x000D_
_x000D_
</body>_x000D_
</html>TestingPage.html
<!DOCTYPE html>_x000D_
<html lang="en">_x000D_
<head>_x000D_
<meta charset="UTF-8">_x000D_
<title>Title</title>_x000D_
<style>_x000D_
.productOperation{_x000D_
position:fixed;_x000D_
top: 50%;_x000D_
left: 50%;_x000D_
width:30em;_x000D_
height:18em;_x000D_
margin-left: -15em; /*set to a negative number 1/2 of your width*/_x000D_
margin-top: -9em; /*set to a negative number 1/2 of your height*/_x000D_
border: 1px solid #ccc;_x000D_
background: yellow;_x000D_
}_x000D_
</style>_x000D_
</head>_x000D_
<body>_x000D_
_x000D_
<div class="productOperation" >_x000D_
_x000D_
<div ng-show="addProduct">_x000D_
<h2 >Add Product enabled</h2>_x000D_
</div>_x000D_
_x000D_
<div ng-show="editProduct">_x000D_
<h2>Edit Product enabled</h2>_x000D_
</div>_x000D_
_x000D_
</div>_x000D_
_x000D_
</body>_x000D_
</html>both pages -
RoutingTesting.html(parent), TestingPage.html(routing page) are in the same directory,
Hope this will help someone.
just do it as follows in your html write:
<button ng-click="going()">goto</button>
And in your controller, add $state as follows:
.controller('homeCTRL', function($scope, **$state**) {
$scope.going = function(){
$state.go('your route');
}
})
Another solution but without using ng-click which still works even for other tags than <a>:
<tr [routerLink]="['/about']">
This way you can also pass parameters to your route: https://stackoverflow.com/a/40045556/838494
(This is my first day with angular. Gentle feedback is welcome)
Remember that if you use ng-click for routing you will not be able to right-click the element and choose 'open in new tab' or ctrl clicking the link. I try to use ng-href when in comes to navigation. ng-click is better to use on buttons for operations or visual effects like collapse. But About I would not recommend. If you change the route you might need to change in a lot of placed in the application. Have a method returning the link. ex: About. This method you place in a utility
Using a custom attribute (implemented with a directive) is perhaps the cleanest way. Here's my version, based on @Josh and @sean's suggestions.
angular.module('mymodule', [])
// Click to navigate
// similar to <a href="#/partial"> but hash is not required,
// e.g. <div click-link="/partial">
.directive('clickLink', ['$location', function($location) {
return {
link: function(scope, element, attrs) {
element.on('click', function() {
scope.$apply(function() {
$location.path(attrs.clickLink);
});
});
}
}
}]);
It has some useful features, but I'm new to Angular so there's probably room for improvement.
You can use:
<a ng-href="#/about">About</a>
If you want some dynamic variable inside href you can do like this way:
<a ng-href="{{link + 123}}">Link to 123</a>
Where link is Angular scope variable.
Source: Stackoverflow.com