If I want to add more pages approximately to 100 so how can I write the below code? I just want the shortcut of "when" which is given below. I don't want to write the "when" 100 times.
var module = angular.module("sampleApp", ['ngRoute']);
module.config(['$routeProvider',
function($routeProvider) {
$routeProvider.
when('/route1', {
templateUrl: 'angular-route-template-1.jsp',
controller: 'RouteController'
}).
when('/route2', {
templateUrl: 'angular-route-template-2.jsp',
controller: 'RouteController'
}).
otherwise({
redirectTo: '/'
});
}]);
module.controller("RouteController", function($scope) {
})
module.config(['$routeProvider', 'routes'
function($routeProvider, routes) {
// routes is the list of my routes
// e.g.
// routes = [{
// url: '/about',
// options: {
// templateUrl: '/about.html',
// controller: 'AboutController as vm',
// }
// }]
routes.forEach(function(route) {
$routeProvider.when(route.url, route.options);
});
$routeProvider.
otherwise({
redirectTo: '/'
});
}
]);
You can alternatively use the ui-router module to achieve this more cleanly.
var myApp = angular.module('helloworld', ['ui.router']);
myApp.config(function($stateProvider) {
var helloState = {
name: 'hello',
url: '/hello',
template: '<h3>hello world!</h3>'
}
var aboutState = {
name: 'about',
url: '/about',
template: '<h3>Its the UI-Router hello world app!</h3>'
}
$stateProvider.state(helloState);
$stateProvider.state(aboutState);
});
You can save your 100 'state' objects inside an array (perhaps even in its own js file), and loop them through the $stateProvider.state(stateObject);.
Related
How to handle the situation when you enter an URL for example http://localhost/#!/somepage/ but the problem is that AngularJS doesn't handle it and doesn't load the page, otherwise if you go to somepage through the index file it works correctly.
I use ui-router and my routing script looks like:
angular.module('WEBAPP', ['ui.router', 'bw.paging'])
.config(function ($stateProvider, $urlRouterProvider, $locationProvider) {
$urlRouterProvider.when('', '/');
var states = [
{
name: 'home',
url: '/',
templateUrl: 'application/partials/home_header.html'
},
{
name: 'somepage',
url: 'somepage/',
templateUrl: 'application/partials/somepage.html',
},
{
name: '404',
url: '404/',
templateUrl: 'application/partials/404.html'
},
]
states.forEach(function (state) {
$stateProvider.state(state);
});
});
How to do the right routing, I want, when I enter url in browser http://localhost/#!/somepage/ AngularJS automatically redirect to that page.
Try it without the for each.I might be wrong but i Think when you are using for each in here only the last state gonna bind the $stateprovider instead of binding all the states. try it like this.
$urlRouterProvider.otherwise('/');
$stateProvider
.state('home', {
url: '/',
templateUrl: 'application/partials/home_header.html'
})
.state('somepage', {
url: 'somepage/',
templateUrl: 'application/partials/somepage.html',
})
.state('404', {
url: '404/',
templateUrl: 'application/partials/404.html'
})
edited
change the url this url: 'somepage/'
to this url: '/somepage'
and when you are calling remove the ! mark in the url.just http://localhost/#/somepage is enough.
var states = [
{
name: 'home',
url: '/',
templateUrl: 'application/partials/home_header.html'
},
{
name: 'somepage',
url: '/somepage',
templateUrl: 'application/partials/somepage.html',
},
{
name: '404',
url: '/404',
templateUrl: 'application/partials/404.html'
},
]
states.forEach(function (state) {
$stateProvider.state(state);
});
Use this
angular.module('WEBAPP', ['ngRoute'])
.config(function ($routeProvider) {
$routeProvider.when('/home', {
templateUrl: 'application/partials/home_header.html'
}).when('/somepage', {
templateUrl: 'application/partials/somepage.html'
}).otherwise({
templateUrl: '/home'
});
});
I am making a very basic angular app using ui-router, and I have 3 "modules" right now, which are home, login, and register. Here is how I have defined them:
'use strict';
var app = angular.module('exampleApp', [
'ui.router',
'ngAnimate',
'ui.bootstrap'
]);
app.config(function($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('/');
$stateProvider
.state('home', {
url: '/',
templateUrl: './main/home/home.html',
controller: './main/home/home-controller.js'
})
.state('login', {
url: '/login',
templateUrl: './main/login/login.html',
controller: './main/login/login-controller.js'
})
.state('register', {
url: '/register',
templateUrl: './main/register/register.html',
controller: './main/register/register-controller.js'
})
})
However, I think I am doing the controller: portion wrong. I want to define each controller for each "module", and I'm not sure how to go about doing that.
Here's my file structure -
First define your controller.
angular.module('exampleApp').controller('loginCtrl', function () {
// ctrl task goes here.
});
Mapping controller to a route.
$stateProvider.state('login', {
url: '/login',
templateUrl: 'path/to/login.html',
controller: 'loginCtrl'
})
I am using Laravel framework..
I can't able to use {{ symbol inside (As laravel consider's its as outputing )
I tried this code use interpolateProvider.. ie., to use <% instead of {{ in angularjs in single angualr js file. but how can i do this in my .run function or config file ?
var sampleApp = angular.module('sampleApp', [], function($interpolateProvider) {
$interpolateProvider.startSymbol('<%');
$interpolateProvider.endSymbol('%>');
});
Here is my app.js
var app = angular.module('myApp', ['ngRoute', 'ngAnimate', 'toaster']);
app.config(['$routeProvider',
function($routeProvider) {
$routeProvider.
when('/login', {
title: 'Login',
templateUrl: 'resources/views/layout/login.php',
controller: 'authCtrl'
})
.when('/', {
title: 'Login',
templateUrl: 'resources/views/layout/login-ang.php',
controller: 'authCtrl',
role: '0'
})
.when('/invalidtoken', {
title: 'Login',
templateUrl: 'resources/views/layout/invalidtoken.php',
controller: 'authCtrl',
role: '0'
})
}
])
.run(function($rootScope, $location, Data, $http) {
$rootScope.$on("$routeChangeStart", function(event, next, current) {
$http.post('resources/views/layout/calls/checkSession.php', {}).then(function(results) {
function($rootScope, $location) {
$rootScope.this_route = function() {
return $location.path().replace('/', '');
};
};
});
});
});
Within the config function of angular in app.js
var app = angular.module('myApp', ['ngRoute', 'ngAnimate', 'toaster']);
// inject interpolateProvider into config
app.config(['$routeProvider', '$interpolateProvider',
function ($routeProvider, $interpolateProvider) {
$interpolateProvider.startSymbol('<%');
$interpolateProvider.endSymbol('%>');
$routeProvider.
when('/login', {
title: 'Login',
templateUrl: 'resources/views/layout/login.php',
controller: 'authCtrl'
})
.when('/', {
title: 'Login',
templateUrl: 'resources/views/layout/login-ang.php',
controller: 'authCtrl',
role: '0'
})
.when('/invalidtoken', {
title: 'Login',
templateUrl: 'resources/views/layout/invalidtoken.php',
controller: 'authCtrl',
role: '0'
})
}
]);
Then within your template you use:
<h1><% my_angular_expression %></h1>
I have multiple routes that invoke the same Controller and I would like to pass different variables to it.
// Example
$routeProvider.
when('/a', {
templateUrl: 'test.html',
controller: 'MyController' // should get passed 'exampleA'
}).
when('/b', {
templateUrl: 'test.html',
controller: 'MyController' // should get passed 'exampleB'
});
I know that I could use the "resolve" object:
$routeProvider.
when('/a', {
templateUrl: 'test.html',
controller: 'MyController',
resolve: {test: function() { return true; }}
});
To pass a value as a dependency:
app.controller('MyController', ['$scope', 'test', function ($scope, test) {
console.log(test); // true
}
My problem with that approach is that my app crashes if the resolve object is missing on other routes and I would like to pass optional params.
Is there any way to pass specific params to the Controller (from the route provider)?
Thank you
Routing:
$routeProvider.
when('/a', {
templateUrl: 'test.html',
controller: 'MyController',
paramExample: 'exampleA'
}).
when('/b', {
templateUrl: 'test.html',
controller: 'MyController',
paramExample: 'exampleB'
});
Access: inject $route in your controller then use this
app.controller('MyController', ['$scope', '$route', function ($scope, $route) {
var paramValue = $route.current.$$route.paramExample;
console.log(paramValue);
}
You can use resolve and $route.currrent.params.test to pass the parameter like this:
$routeProvider
.when('/a', {
templateUrl: 'view.html',
controller: 'MainCtrl',
resolve: {
test: function ($route) { $route.current.params.test = true; }
}
})
.when('/b', {
templateUrl: 'view.html',
controller: 'MainCtrl',
resolve: {
test: function ($route) { $route.current.params.test = false; }
}
})
Then in your controller you can access it from the $routeParams:
app.controller('MainCtrl', function($scope, $routeParams) {
$scope.test = $routeParams.test;
})
http://plnkr.co/edit/ct1ZUI9DNqSZ7S9OZJdO?p=preview
The most natural way to do this is doing what you would normally do when you want to load a page with parameters: use query parameters: http://yoururl.com?param1=value¶m2=value
ngRoute comes with the service $routeParams which you can inject in your controller. Now you can simply retrieve the values like this $routeParams.param1.
Another way to do this is to retrieve the path with $location.path and set the variable there.
using $routeParams
in Main js file
routeApp.config(function($routeProvider) {
$routeProvider
.when('/home', {
templateUrl: '../sites/./home.html',
controller: 'StudentController'
})
.when('/viewStudents/:param1/:param2', {
templateUrl: '../sites/./viewStudents.html',
controller: 'StudentController'
})
.otherwise({
redirectTo: '/'
});
});
routeApp.controller('StudentController',['$filter','$routeParams', '$location',function($filter,$routeParams,$location){
var StudentCtrl = this;
StudentCtrl.param1 = $routeParams.param1;
StudentCtrl.param2 = $routeParams.param2;
}]);
calling from Home.html
<div class="container">
<h2> Welcome </h2>
Students
</div>
I know it's asked before, but can't find solution that works for me.
I get each controller start 3 times!
It's problematic for me because I have sound in my app and it's display 3 times.
I'm new to angular. i don't know if it's meaningful but i have all controllers defined in one file controllers.js. I check and the file app.js called only once.
this is my app.js:
'use strict';
/* App Module */
var phonecatApp = angular.module('phonecatApp', [
'ngRoute',
'phonecatAnimations',
'ui.router',
'phonecatControllers',
'phonecatFilters',
'phonecatServices',
'ui.utils',
'angularCircularNavigation',
'timer'
]);
phonecatApp.config(['$stateProvider',
function ($stateProvider, $urlRouterProvider) {
var home = {
name: 'home',
url: '',
views: {
'': {
templateUrl: 'partials/home.html',
controller: 'HomeCtrl'
}
}
};
var learn = {
name: 'learn',
url: '/learn',
views: {
'': {
templateUrl: 'partials/learn.html',
controller: 'learnCtrl'
}
}
};
var articles = {
name: 'articles',
url: '/articles',
views: {
'': {
templateUrl: 'partials/articles.html',
controller: 'articlesCtrl'
}
}
};
$stateProvider.state(articles);
$stateProvider.state(learn);
$stateProvider.state(home);
} ]);
thanks!
From my experience the most common issue that leads to controller double calling is:
You have controller call from $stateProvider state, at the same time you call controller from HTML.
For example consider:
$stateProvider
.state('sidemenu.groups', {
url: "/groups",
views: {
'mainContent': {
templateUrl: 'partials/groups/groups.html',
controller: 'GroupsCtrl' // <-- 1st call
}
}
})
and in HTML:
<div ng-controller="GroupsCtrl"></div> <!-- 2nd call -->
So remove ng-controller
Hope it will help you
decided to use $routeProvider instead and the problem solved..