Does anyone know how I can route using a search query in Angular? I have tried working with $routeProvider but it doesn't work with search queries.
This is the code I wrote for routing with $routeProvider:
app.config(['$routeProvider', function ($routeProvider){
$routeProvider.when('/?table=table1', {
controller:'PostsCtrl',
templateUrl: 'table1.html'
})
$routeProvider.when('/?table=table2', {
controller: 'PostsCtrl',
templateUrl: 'table2.html'
})
$routeProvider.otherwise({redirectTo: '/?table=table1'});
}]);
app.config(['$locationProvider', function($locationProvider){
$locationProvider.html5Mode(true).hashPrefix('!');
}]);
and the templates they are referring to:
<script type="text/ng-template" id="table1.html">
some code
</script>
and
<script type="text/ng-template" id="table2.html">
some code
</script>
Related
AngularJS v1.7.4
I am new to AngularJS and creating a simple app but not sure why one route works (shows the static html from a partial file as well as {{message}} correctly), but the other two routes only show static html and not {{message}} which is being set using $scope.message.
Additionally errors such as
The controller with the name 'ContactController' is not registered.
and
The controller with the name 'AboutController' is not registered.
Are seen in the console when trying to go to 'Contact' and 'About' pages respectively.
For the three routes I have three html files and three controller files. I have made sure to include <body ng-app="gmsApp">.
Files are being loaded as
<script src="./js/bootstrap.bundle.min.js"></script>
<script src="./js/angular.js"></script>
<script src="./js/angular-route.js"></script>
<script src="./js/controllers/about.controller.js"></script>
<script src="./js/controllers/contact.controller.js"></script>
<script src="./js/controllers/home.controller.js"></script>
<link href="./css/bootstrap.min.css" rel="stylesheet" />`
Following advise from other posts I am using the 'regular' js files and not 'minified' versions of angular and angular-route.
The code in main html file is:
var app = angular.module("gmsApp", ['ngRoute', 'gmsApp.controllers']);
app.config(['$routeProvider', function($routeProvider) {
$routeProvider.
when('/home', {
templateUrl: 'partials/home.html',
controller: 'HomeController'
}).
when('/about', {
templateUrl: 'partials/about.html',
controller: 'AboutController'
}).
when('/contact', {
templateUrl: 'partials/contact.html',
controller: 'ContactController'
}).
otherwise({
redirectTo: '/home'
});
}]);
/js/controllers/home.controller.js
angular.module('gmsApp.controllers', [])
.controller('HomeController', function ($scope) {
$scope.message = 'Main page of the app';
});
/js/controllers/about.controller.js
angular.module('gmsApp.controllers', [])
.controller('AboutController', function ($scope) {
$scope.message = 'This is about us page';
});
/js/controllers/contact.controller.js
angular.module('gmsApp.controllers', [])
.controller('ContactController', function ($scope) {
$scope.message = 'Contact Us page ...';
});
/partials/home.html
<div ng-controller="HomeController">
<h3>Home page</h3>
<p>{{message}}</p>
</div>
/partials/about.html
<div ng-controller="AboutController">
<h3>About Us</h3>
<p>{{message}}</p>
</div>
/partials/contact.html
<div ng-controller="ContactController">
<h3>Contact Us</h3>
<p>{{message}}</p>
</div>
The error come from the fact that you are recreating your module in each of your controller. This line should be present in only one of your files (could be your main file):
angular.module('gmsApp.controllers', [])
Then in "/js/controllers/home.controller.js,"/js/controllers/about.controller.js" and "/js/controllers/contact.controller.js", you should use it like this:
angular.module('gmsApp.controllers')
Note that this time you don't use the "[]". The difference between the two is that here you will access the already created module.
From angularjs docs:
Beware that using angular.module('myModule', []) will create the
module myModule and overwrite any existing module named myModule. Use
angular.module('myModule') to retrieve an existing module.
I am new to angularJS. I tried to and practice some examples and met a very tricky error. I spent a couple of hours to figure out RangeError,but I failed to overcome it. Can anyone help me get out from this trap?
In app.js
var sampleApp = angular.module('phonecatApp', ['ngRoute']);
sampleApp .config(['$routeProvider','$locationProvider',
function($routeProvider,$locationProvider)
{
$routeProvider.
when('/', {
templateUrl: 'index.html',
}).
when('/addOrder', {
templateUrl: 'add-order.html',
controller: 'AddOrderController'
}).
when('/showOrders', {
templateUrl: 'show-orders.html',
controller: 'ShowOrdersController'
}).
otherwise({
redirectTo: '/addOrder'
});
$locationProvider.html5Mode({
enabled: true,
requireBase: false
});
}]);
sampleApp.controller('AddOrderController', function($scope) {
$scope.message = 'This is Add new order screen';
});
sampleApp.controller('ShowOrdersController', function($scope) {
$scope.message = 'This is Show orders screen';
});
In index.html
<!DOCTYPE html>
<head>
</head>
<h1>weclome to test!</h1>
<body ng-app="phonecatApp" >
<div ng-view></div>
<script src="//code.angularjs.org/1.2.20/angular.js"></script>
<script src="//code.angularjs.org/1.2.20/angular-route.js"></script>
<script src="static/app.js"></script>
</body>
</html>
In add_order.html
<h2>Add New Order</h2>
{{ message }}
In show_order.html
<h2>Show Orders</h2>
{{ message }}
In addition, the wrong source directory of folder that store js and html files cause the RangeError?
This is error that shows in chrome console
I think you are browsing to /, which is probably index.html, which includes app.js, which will need index.html due to the route, which will require app.js, etc... You may need to put your / template in another html file (let's call it home.html), and change the template for / to home.html
I also had the same issue. Then I tried with putting 'script' tags to 'head' tag. It works fine now.
<!DOCTYPE html>
<html>
<head>
<script src="//code.angularjs.org/1.2.20/angular.js"></script>
<script src="//code.angularjs.org/1.2.20/angular-route.js"></script>
<script src="static/app.js"></script>
</head>
<body ng-app="phonecatApp" >
<h1>weclome to test!</h1>
<div ng-view></div>
</body>
</html>
Split the routing scripts in to a different file.
angular.module('phonecatApp').config(['$routeProvider','$locationProvider',
function($routeProvider,$locationProvider)
{
$routeProvider.
when('/', {
templateUrl: 'index.html',
}).
when('/addOrder', {
templateUrl: 'add-order.html',
controller: 'AddOrderController'
}).
when('/showOrders', {
templateUrl: 'show-orders.html',
controller: 'ShowOrdersController'
}).
otherwise({
redirectTo: '/addOrder'
});
$locationProvider.html5Mode({
enabled: true,
requireBase: false
});
}]);
then refer it in your index file may be like :
<script src="static/router.js"></script>
that should fix it.
I was facing similar problem/ error. What worked for me was I used the routes with # . i.e I removes this part from app.js
$locationProvider.html5Mode({
enabled: true,
requireBase: false
});
Here is the code I have, greatly simplified,
and my question is - why am I getting this error message?
[ng:areq] Argument 'SearchController' is not a function, got undefined
http://errors.angularjs.org/1.5.8/ng/areq?p0=SearchController&p1=not%20aNaNunction%2C%20got%20undefined
index.cshtml
<!DOCTYPE html>
<html ng-app="app">
<head>
<script src="~/Components/angular/angular.min.js"></script>
<script src="~/Scripts/Common/app.js"></script>
</head>
<body>
<div ng-view></div>
</body>
</html>
app.ts
namespace App {
export let app = angular.module("app", ["ngRoute", "ngSanitize"]);
// Defined custom routes for using "ng-view" directive,
// enable single page application (SPA) functionality
app.config(function ($routeProvider) {
$routeProvider
.when("/", {
templateUrl: "/RealSuiteApps/RealForm/-1/MyForm/Search/",
controller: "SearchController",
controllerAs: "vm"
})
.when("/Detail/:id", {
templateUrl: "/RealSuiteApps/RealForm/-1/MyForm/Detail/",
controller: "DetailController",
controllerAs: "vm"
})
.otherwise({ redirectTo: "/" });
});
}
search.cshtml - the HTML returned by calling templateUrl defined above: /RealSuiteApps/RealForm/-1/MyForm/Search/ (simplified for this demo)
<script src="~/Scripts/MyForm/search.controller.js"></script>
<div class="container">
<h1>Hello from Search Controller</h1>
</div>
the controller search.controller.js
namespace App {
/**
* SearchController
*/
class SearchController {
static $inject: string[] = ["DataService"];
constructor(private dataService: DataService) { }
}
app.controller("SearchController", SearchController);
}
Looks like you're loading the search.controller.js file only in your search view, but the route instantiates the controller even before that, and he can't do that if you haven't loaded the script yet.
The solution is to load it at the beginning of your app.
I am not sure why the routing isnt working. View1.html consists of a simple web page and the same goes with view2.html. Both view1.html and view2.html are in a folder called partials and "angular-route.js" and "angular-route.min.js" are in a folder called node_modules in home folder. I am using ubuntu 14.04.
<script src="scripts/angular.min.js"></script>
<script src="/node_modules/angular-route/angular-route.js"></script>
<script src="/node_modules/angular-route/angular-route.min.js"></script>
<script>
var demoApp = angular.module('demoApp', ['ngRoute']);
demoApp.config( function ($routeProvider) {
$routeProvider
.when('/',
{
controller: 'SimpleController' ,
templateUrl: 'partials/view1.html' //
})
.when('/view2',
{
controller: 'SimpleController' ,
templateUrl: 'partials/view2.html'
})
.otherwise({ redirectTo : '/' })
})
demoApp.controller('SimpleController', function ($scope)
{
$scope.customers = [{name:'nihal',city:'hyderabad'},{name:'nihal',city:'mumbai'}, {name:'john',city:'bangalore'}]
$scope.addCustomer = function() {
$scope.customers.push({name: newCustomer.name , city: newCustomer.city })
}
})
</script>
</body>
</html>
You have incorrect syntax in routes, comma is missing after controller property.
I have a really weird bug, I have set my routes and my controllers. Now I have just a blank page with no errors?
index.html;
<!DOCTYPE html>
<html ng-app="RekenTalent" lang="nl">
<head>
<title>Rekentalent.nl: Ben jij een talent in Rekenen?</title>
<!-- Stylesheets -->
<link rel="stylesheet" type="text/css" href="/app/front/assets/stylesheets/style.css">
<!-- AngularJS -->
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.16/angular.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.16/angular-route.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.16/angular-animate.min.js"></script>
<!-- Controllers -->
<script src="/app/front/controllers/controller.js"></script>
<!-- Router -->
<script src="/app/front/router.js"></script>
</head>
<body ng-view></body>
</html
>
Controller.js:
/**
* RekenTalent
*
* Copyright 2014 - Rekentalent.nl
*/
var RekenTalent = angular.module('RekenTalentControllers', []);
RekenTalent.controller('rekenCtrl', ['$scope', function($scope){
}]);
Router.js:
var RekenTalent = angular.module('RekenTalent', [
'ngRoute', 'RekenTalentControllers'
]);
RekenTalent.config(['$routeProvider', function($routeProvider) {
$routeProvider.
when('/index', {
templateUrl: '/templates/index.html',
controller: 'rekenCtrl'
}).
otherwise({
redirect: '/index'
});
}]);
And /templates/index.html says just 'hi'. Does anyone know why I get a blank page? It should redirect me to /index.html and /index.html should use /templates/index.html as the template. Whats the problem and the fix?
UPDATE:
when I go to /index it works, so the otherwise param doesn`t work, why not?
change redirect to redirectTo
And it's better to use home.template to avoid all this kind of problems, I mean consider:
You have an index.html that contains your whole included scripts, like angular, jquery , ..., and in the body tag there is ng-view, ok?
Now, if you have any templates such as welcome or whatever for index, write that template in a home.html, OK? Like this:
index.html :
<body ng-app="yourapp">
<div ng-view>
</div>
</body>
Home.html
<div>
Welcome, user. This is index.
</div>
Your app configuration:
yourapp.config(function($routeProvider) {
$routeProvider
.when('/', {
templateUrl: 'partials/home.html',
controller: 'homeCtrl'
})
.otherwise({redirectTo:'/'});
}
And it is a good practice to put all of your templates inside a partials folder, where the father folder contains index.html like this
root
yourAppFolder
1-Assets
Css
Js
2-Partials
home.html
login.html
3-index.html
Found it; redirect should be redirectTo;
var RekenTalent = angular.module('RekenTalent', [
'ngRoute', 'RekenTalentControllers'
]);
RekenTalent.config(['$routeProvider', function($routeProvider) {
$routeProvider.
when('/index', {
templateUrl: '/app/front/templates/index.html',
controller: 'rekenCtrl'
}).
otherwise({
redirectTo: '/index'
});
}]);
I have this sample of code for example:
.config(['$routeProvider',
function($routeProvider) {
console.log('routeando');
//alert('otherwise' + $routeProvider.route);
$routeProvider.
when('/', { templateUrl: 'home'}).
when('/route1', { templateUrl: 'route1'}).
/*Without the next line, redirectTo doesnt work*/
when('/error', { templateUrl: 'error'}).
otherwise({ redirectTo: '/error'});
}]);
Otherwise is only going to work if you have already a "when" parameter for that route.
Excuse me for my english and have a nice day.