Angularjs routeprovider pass parameters to controller

Angularjs routeprovider pass parameters to controller

Angularjs routeprovider pass parameters to controller

Welcome to the In website! You will Step By Step learn web programming, easy and very fun. This website allmost provides you with a complete web programming tutorial presented in an easy-to-follow manner. Each web programming tutorial has all the practical examples with web programming script and screenshots available.For Angularjs routeprovider pass parameters to controller Example

AngularJS Routing Syntax

var appvar = angular.module("yourappsname", ['ngRoute']);

appvar.config(function($routeProvider) {
		.when('/viewpage1', {
			templateUrl: 'viewpage1.html',
			controller: 'myFirstlevelController'
		.when('/view2', {
			templateUrl: 'viewpage2.html',
			controller: 'mySecondlevelController'
			redirectTo: '/viewpage1'

<title>angularjs routeprovider pass parameters to controller</title>
<a href="http://angular.min.js">http://angular.min.js</a>
<a href="http://angular-route.js">http://angular-route.js</a>

<p><a href="#/">Main</a></p>
<a href="#Home">Home</a>
<a href="#About">About</a>
<a href="#Contact">Contact</a>

var wapp = angular.module("infinityknow", ["ngRoute"]);
wapp.config(function($routeProvider) {
    .when("/", {
        templateUrl : "index.htm"
    .when("/Home", {
        templateUrl : "Home.htm"
    .when("/About", {
        templateUrl : "About.htm"
    .when("/Contact", {
        templateUrl : "Contact.htm"

<p>Simple Click on the all the links to navigate to "Home.htm", "About.htm", "Contact.htm", or back to "main.htm"</p>

E-junkie: Sell digital downloads online

E-junkie Provides a Copy-paste buy-now, and cart buttons for selling downloads, codes and tangible products on any website, blog, social media, email and messenger!

Also see:

  1. The Top 10+ Best Webinar Software Platforms For 2020-2021
  2. Build Your Future Godaddy Careers And Jobs
  3. Introduction To Web Hosting Services

Route Parameters


angularjs routeprovider pass parameters to controller

Here is a very simple full example of AngularJS route with parameter example:

READ :  VueJs Format Date Filter Example - Vue Custom Filters

    <title>AngularJS Routes with parameters example</title>
    <a href="http://angular.min.js">http://angular.min.js</a>
    <a href="http://angular-route.min.js">http://angular-route.min.js</a>

<a href="#/route1/abcd">click to Route 1 + parameter</a><br />
<a href="#/route2/1234">click to Route 2 + parameter</a><br />

    var mywApp = angular.module("infinityknowApp", ['ngRoute']);

        function($routeProvider) {
                    when('/route1/:param', {
                        templateUrl: 'angularpost1.html',
                        controller: 'MyfirstroutCtrl'
                    when('/route2/:param', {
                        templateUrl: 'angularpage.html',
                        controller: 'MyfirstroutCtrl'
                        redirectTo: '/'

    mywApp.controller("MyfirstroutCtrl", function($scope, $routeParams) {
		//store in param variable to parameters
        $scope.param = $routeParams.param;



We hope you get an idea about Angularjs routeprovider pass parameters to controller
We would like to have feedback on my Information blog .
Your valuable any feedback, Good question, Inspirational Quotes, or Motivational comments about this article are always welcome.
If you liked this post, Please don’t forget to share this as Well as Like FaceBook Page.

READ :  AngularJS Nested ng-repeat Get Multiple checkbox value

We hope This Post can help you…….Good Luck!.