I am a newbie, trying to understand routing, I read the documentation and i injected ngRoute module, but still when i am trying to click on Employee Name its not showing any thing, i have wasted lot of time on this, but no luck. Can some one help.
No errors in the console.
Code:
Plunker
app.js
var app = angular.module('demoApp', ['ngRoute']);
app.config(function ($routeProvider) {
$routeProvider
.when('/employeedetail/:empid',
{
controller: 'empDetailController',
templateUrl: '/employeedetail.html'
})
.otherwise({ redirectTo: '/index.html' });
});
The $routeProvider have to be used in conjection with the ng-view directive.
In index.html, replace the employee list template with ng-view, and also remove the controller like this:
<body>
<h2>AngularJS Demo</h2>
<div ng-view></div>
</body>
Put the employee list template as a separate html file e.g. employeelist.html.
Then config the $routeProvider to render the employee list template and its controller by default:
app.config(function($routeProvider) {
$routeProvider
.when('/', {
controller: 'employeeController',
templateUrl: 'employeelist.html'
})
.when('/employeedetail/:empid', {
controller: 'empDetailController',
templateUrl: 'employeedetail.html'
})
.otherwise({
redirectTo: '/'
});
})
Example Plunker: http://plnkr.co/edit/mQIaJqZeOal77Z2RxG8z?p=preview
I think your problem come from the fact you don't use :
the ng-view attribute
Related
I am using the following code in the script file:
angular.module('app', ['ngRoute'])
.config(function ($routeProvider) {
$routeProvider
.when("/index", {
templateUrl: "Views/post.html"
})
.otherwise({
redirectTo:"/"
})
})
So when the URL is http://localhost:55657/index.html, it should show "Views/post.html" , i.e. the post.html view in the ng-view directive of index page. Following is a snippet from my index.html page:
<body>
<div class="container">
<ng-view></ng-view>
</div>
</body>
But it is not showing anything when I load index.html. Following error is shown on browser console:
Error: $injector:modulerr
Module Error
When you navigate to "http://localhost:55657/index.html" it will load up the "/" route. Because it looks up the '#/' part after the html. You don't have any routes that matches with that.
The otherwise path does not match with any of your routes either.
You can fix this by renaming your '/index' path definition to '/' or use '/index' in your otherwise path.
For example:
angular.module('app', ['ngRoute'])
.config(function ($routeProvider) {
$routeProvider
.when("/index", {
templateUrl: "Views/post.html"
})
.otherwise({
redirectTo:"/index"
})
})
Related pages:
Docs: https://docs.angularjs.org/api/ngRoute/provider/$routeProvider
Example: https://www.w3schools.com/angular/angular_routing.asp
Is it possible to use Angularjs's routing and controller without the templateURL?
For instance, below is my current routes, controllers, and template urls,
return app.config(['$routeProvider', function ($routeProvider) {
$routeProvider
.when("/",
{
templateUrl: "js/template/1.html",
controller: "controller1"
})
.when("/list1",
{
templateUrl: "js/template/2.html",
controller: "controller2"
})
...
And I have ng-view in my html,
<div ng-view></div>
I tested with the routes without templateUrl,
return app.config(['$routeProvider', function ($routeProvider) {
$routeProvider
.when("/",
{
//templateUrl: "js/template/1.html",
controller: "controller1"
})
.when("/view1",
{
//templateUrl: "js/template/2.html",
controller: "controller2"
})
...
the result - nothing is displayed on my screen. obviously the controller cannot be triggered anymore.
use template with empty string.
return app.config(['$routeProvider', function ($routeProvider) {
$routeProvider
.when("/",
{
template: "",
controller: "controller1"
})
Angular uses the $routeProvider Definition to attach a controller to your view. If you don't want to specify the details in $routeProvider config, other option is to let the application land on one page using something like -
.config(function ($routeProvider) {
$routeProvider
.when('/', {
templateUrl: 'views/main.html'
})
.when()
.otherwise({
redirectTo: '/'
});
});
This way user will land on main.html. Now on the main.html you can include several different html templates like -
<div ng-include src="'js/template/1.html'" ng-controller = 'Controller1'></div>
<div ng-include src="'js/template/2.html'" ng-controller = 'Controller2'></div>
Notice the syntax of using/including template above - "'<<Path>>'"
Hope this helps.
Setting template with empty string make error and cause recursion loading ; i solved it by just add the link of empty html file.
return app.config(['$routeProvider', function ($routeProvider) {
$routeProvider
.when("/",
{
template: "dummy.htm",
controller: "controller1"
})
While developing some SPA AngularJS Application I define the rooting with $routeProvider. Everythings works fine, but I get tired with clicking through the whole application to see particular changes I've done anytime I republish the application to the server. Is there a possibility to change this behaviour? I mean, when I hit refresh on my browser or use some tools for automatical refreshing (like LiveReload Server) is there a way to tell angularJS to not to navigate to the default page?
Regarding to the comments below, here is the routing content.
Below is the MainRoutingContent
'use strict'
angular.module('MainModule')
.config(['$routeProvider', function ($routeProvider) {
$routeProvider
.when('/login', {
controller: 'LoginController',
templateUrl: 'webapp/modules/authentication/views/login.html',
hideMenus: true
})
.when('/register', {
controller: 'RegistrationController',
templateUrl: 'webapp/modules/registration/views/register.html'
})
.when('/', {
controller: 'HomeController',
templateUrl: 'webapp/modules/home/views/home.html'
})
.otherwise({ redirectTo: '/login' });
}]);
The single html page has the ng-view defined:
<div>
<div ng-view></div>
</div>
And some additional for the RegistrationModule:
angular.module('RegistrationModule')
.config(['$routeProvider', function ($routeProvider) {
$routeProvider
.when('/register/user', {
controller: 'UserRegistrationController',
templateUrl: 'webapp/modules/registration/views/register-user.html'
})
.when('/register/company', {
controller: 'CompanyRegistrationController',
templateUrl: 'webapp/modules/registration/views/register-company.html'
});
}]);
Ok, I got it. I defined some run block in the main module of my application with the redirection to the /login page. Here is the code:
angular.module("app", [...])
.run(['$location',
function ($location) {
$location.path('/login');
}])
If someone will get such an issue with refreshing the page in the future, please look for some run block defined in your code.
Header contents=>main menu name is service and its submenu's are abc,def,pqr. This is in index.html
And service.html have 3 separate div's one shows contains of abc,two shows contains of def and three shows contains of pqr.
There is angularjs route call from index.html when I click header menu (i.e.service=>abc or def or pqr) then it should show its particular div other will not be shown.
Use the menu items as parameters passed in the url and then use a an ng-switch or ng-show to show the selected content.
app.config(function ($routeProvider) {
$routeProvider
.when('/', {
redirectTo : '/'
})
...
.when('/menu/:item', {
templateUrl: 'index.html',
controller: 'indexController'
})
in controler, inject $routeParams:
app.controller('indexController', function($scope, $routeParams) {
$scope.menuItem = $routeParams.item;
});
in index:
<div ng-show='menuItem == "abc">abc</div>
<div ng-show='menuItem == "def">def</div>
<div ng-show='menuItem == "pqr">pqr</div>
Added benefit, you do not have to create new routes to create new menus with content in the index.html
downside, gets crowded in index.html
put ng-view tag in index.html
download angular route and inject this dependency into your app.
put routing code like
app.config(function ($routeProvider) {
$routeProvider
.when('/', {
redirectTo : '/user'
})
.when('/register', {
templateUrl: 'client_assets/views/register.html',
controller: 'registerController'
})
.when('/login', {
templateUrl: 'client_assets/views/log_in.html',
controller: 'logInController'
})
})
Now according to the route decide html template and controller you want to add.
I'm stuck with routeProvider. my links keep opening a new page instead of loading the template in the view.
My code is the following
raceApp.config(['$routeProvider', '$locationProvider', function ($routeProvider, $locationProvider) {
$routeProvider
.when('/', {
templateUrl: 'raceApp/createChallenge_view.php',
controller: 'createChallenge'
})
.when('/createchallenge', {
templateUrl: 'raceApp/createChallenge_view.php',
controller: 'createChallenge'
})
.when('/findchallenge', {
templateUrl: 'raceApp/findChallenge_view.php',
//controller: 'findChallenge'
})
.otherwise({
redirectTo: '/'
});
}]);
My HTML looks like
<base href="/runkinlocal/wp-content/themes/wordpress-bootstrap-master/" />
<a class="menu-item select-runner0" href="#/createChallenge">
<a class="menu-item select-runner0" href="#/findchallenge">
When the page loads, the initial template is loaded, but then when I click on one of the links, a new page loads instead of loading the template in the view
( the page looks like http://test.com:8888/runkinlocal/wp-content/themes/wordpress-bootstrap-master/#/createChallenge)
I am working with Wordpress.
I'm looking forward to your help!
Working Example
plnkr
Suggestions
1. Your hrefs should not have #/
Create |
Find
2. Otherwise doesn't need redirectTo
.config(function($routeProvider, $locationProvider) {
$routeProvider
.when('/', {
templateUrl: 'home.html'
})
.when('/createChallenge', {
templateUrl: 'create.php',
controller: 'CreateChallengeController'
})
.when('/findChallenge', {
templateUrl: 'find.php',
controller: 'FindChallengeController'
})
.otherwise("/");
// configure html5 to get links working on jsfiddle
$locationProvider.html5Mode(true);
});
3. Extra comma after last .when()
You have:
.when('/findchallenge', {
templateUrl: 'raceApp/findChallenge_view.php',
//controller: 'findChallenge'
})
The controller is commented out but there is still a comma.
4. You might need to configure html5
(see script.js in the plnkr)
// configure html5 to get links working on jsfiddle
$locationProvider.html5Mode(true);
5. You can add the base href like so
<script type="text/javascript">
angular.element(document.getElementsByTagName('head')).append(angular.element('<base href="' + window.location.pathname + '" />'));
</script>
Relevant Resources
I suggest checking these out:
$routeProvider docs
$route example
Let me know if that works!