We Keep Coding

how to write bunch of pages efficently using angular js ng-route

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);.

controller not a function AngularJS

I have a problem. my routes do not find my controllers except /vehicules
app.js
angular.module('myApp', ['ngRoute', 'ui.grid']);
angular.module('myApp').config(function($routeProvider) {
$routeProvider
// route for the home page
.when('/', {
templateUrl: 'views/main.html',
controller: ''
})
.when('/vehicules', {
templateUrl: 'views/vehicules.html',
controller: 'VehiculeCtrl'
})
.when('/vehicule/:id', {
templateUrl: 'views/vehicule.html',
controller: 'VoirVehiculeCtrl'
})
.when('/agents', {
templateUrl: 'views/agents.html',
controller: 'AgentsCtrl'
})
.when('/agences', {
templateUrl: 'views/agences.html',
controller: 'AgencesCtrl'
})
.when('/status', {
templateUrl: 'views/status.html',
controller: 'StatusCtrl'
})
.otherwise({
redirectTo: '/'
});
});
VoirVehiculeCtrl.js
angular.module('myApp').controller('VoirVehiculeCtrl', function($scope) {});
my tree:
Javascript
controllers
VehiculeCtrl.js
VoirVehiculeCtrl.js
App.js
Views
please help me !! and sorry for my english xD

Angular flickers when authenticating user

I need help eliminating a flicker with Angular. I am getting a flicker every time a new route is passed through. I have a login and logout button outside the ng-view which uses ng-if="authenticated". The problem is any time a menu item is clicked and a new view is displayed the logout or login button flickers. Is there a way to eliminate this? Below is the module, config and run function.
PS. I am very new to Angular. This was a script from a tutorial on using Angular, php and mysql for a login system.
var app = angular.module('myApp', ['ngRoute', 'ngAnimate', 'ui.bootstrap', 'toaster']);
app.config(['$routeProvider', function ($routeProvider) {
$routeProvider
.when('/login', {
title: 'Login',
templateUrl: 'views/login.html',
controller: 'authCtrl'
})
.when('/logout', {
title: 'Logout',
templateUrl: 'views/login.html',
controller: 'logoutCtrl'
})
.when('/signup', {
title: 'Signup',
templateUrl: 'views/signup.html',
controller: 'authCtrl'
})
.when('/dashboard', {
title: 'Dashboard',
templateUrl: 'views/dashboard.html',
controller: 'authCtrl'
})
.when('/posts', {
title: 'Posts',
templateUrl: 'views/posts.html',
controller: 'authCtrl'
})
.when('/stats', {
title: 'Stats',
templateUrl: 'views/stats.html',
controller: 'authCtrl'
})
.when('/ambas', {
title: 'Ambassadors',
templateUrl: 'views/ambassadors.html',
controller: 'authCtrl'
})
.when('/images', {
title: 'Images',
templateUrl: 'views/images.html',
controller: 'authCtrl'
})
.when('/', {
title: 'Login',
templateUrl: 'views/login.html',
controller: 'authCtrl'
})
.otherwise({
redirectTo: '/posts'
});
}])
.run(function ($rootScope, $location, Data) {
$rootScope.$on("$routeChangeStart", function (event, next, current) {
$rootScope.authenticated = false;
Data.get('session').then(function (results) {
if (results.uid) {
$rootScope.authenticated = true;
$rootScope.uid = results.uid;
$rootScope.name = results.name;
$rootScope.email = results.email;
} else {
var nextUrl = next.$$route.originalPath;
if (nextUrl == '/signup' || nextUrl == '/login') {
} else {
$location.path("/login");
}
}
});
});
});

You are setting the authenticated value to false on every route change start. So every time a user clicks to change the route you set it to false, and then a few moments later you set it to true if authentication is fine. That will cause a flicker.
So, remove the $rootScope.authenticated = false; from the $routeChangeStart callback.
$rootScope.$on("$routeChangeStart", function (event, next, current) {
//$rootScope.authenticated = false; <--- *remove this*
Data.get('session').then(function (results) {
...........

Possible to dynamically load controllers in Angular

When I go to a specific view in my Angular project, every controller code is being load.
I understand that it's possible to prevent this. But is it possible in the following situation?
App.js config:
app.config(['$stateProvider', '$urlRouterProvider', '$httpProvider',
function($stateProvider, $urlRouterProvider, $httpProvider, $locationProvider) {
$httpProvider.interceptors.push('AuthInterceptor');
$stateProvider.state('home', {
url: "/home",
templateUrl: 'views/Home.html',
controller: "MainController",
onEnter: ['$state', 'auth', function($state, auth) {
if (auth.isLoggedIn()) {
$state.go('challenge');
}
}]
}).state('login', {
url: '/login',
templateUrl: 'views/Login.html',
controller: 'UserCtrl',
onEnter: ['$state', 'auth', function($state, auth) {
if (auth.isLoggedIn()) {
$state.go('home');
} else {
//console.log("Niet ingelogd")
}
}]
}).state('register', {
url: '/register',
templateUrl: 'views/Register.html',
controller: 'UserCtrl',
onEnter: ['$state', 'auth', function($state, auth) {
if (auth.isLoggedIn()) {
$state.go('home');
}
}]
}).state('challenge', {
url: '/challenges',
templateUrl: 'views/Challenges.html',
controller: 'ChallengeCtrl',
onEnter: ['$state', 'auth', function($state, auth) {
if (!auth.isLoggedIn()) {
$state.go('login');
}
}]
}).state('profile', {
url: '/profile',
templateUrl: 'views/Profile.html',
controller: "ProfileCtrl",
onEnter: ['$state', 'auth', function($state, auth) {
if (!auth.isLoggedIn()) {
$state.go('login');
}
}]
}).state('policy', {
url: '/policy',
templateUrl: 'views/Policy.html',
controller: 'AppCtrl'
}).state('cookie', {
url: '/cookie',
templateUrl: 'views/Cookie.html',
controller: 'AppCtrl'
}).state('challengesdone', {
url: '/challengesdone',
templateUrl: 'views/Challengesdone.html',
controller: 'ChallengesDoneCtrl',
onEnter: ['$state', 'auth', function($state, auth) {
if (!auth.isLoggedIn()) {
$state.go('login');
}
}]
}).state('forgot', {
url: '/forgot',
templateUrl: 'views/Forgot.html',
controller: 'UserCtrl'
}).state('reset', {
url: '/reset?sptoken',
templateUrl: 'views/Reset.html',
controller: 'UserCtrl'
});
$urlRouterProvider.otherwise('home');
}]);
Can this be accomplished without the use of external libraries and are there alot of adjustments needed?

You need to use $controllerProvider in your config.
app._controller = app.controller
app.controller = function (name, constructor){
$controllerProvider.register(name, constructor);
return (this);
};
And then resolve this method in your route.
.state('reset', {
url: '/reset?sptoken',
controller: 'UserCtrl',
resolve: {
deps : function ($q, $rootScope) {
var deferred = $q.defer();
require(["js/userCtrl"], function (tt) {
$rootScope.$apply(function () {
deferred.resolve();
});
deferred.resolve()
});
return deferred.promise;
}
},
templateUrl: 'views/Reset.html'
});
I have put together a CodePen for your.

Issue in passing url parameter

Here is my Controller
.when('/showprofile/:UserID', {
templateUrl: 'resources/views/layout/showprofdile.php',
controller: 'renameShowCtrl',
})
I have a url like this
http://192.168.1.58/myapp/#/showprofile/8
When I click the link it redirect me to
http://192.168.1.58/myapp/#/showprofile/:UserID
Here is my entire 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('/logout', {
title: 'Logout',
templateUrl: 'resources/views/layout/login.php',
controller: 'logoutCtrl'
})
.when('/signin', {
title: 'Signup',
templateUrl: 'resources/views/layout/signin.php',
controller: 'authCtrl'
})
.when('/registersuccess', {
title: 'Dashboard',
templateUrl: 'resources/views/layout/register-success.php',
controller: 'authCtrl'
})
.when('/dashboard', {
title: 'Dashboards',
templateUrl: 'resources/views/layout/dashboard.php',
controller: 'authCtrl'
})
.when('/profile', {
title: 'Profile',
templateUrl: 'resources/views/layout/profile.php',
controller: 'authCtrl'
})
.when('/contact', {
title: 'Contact',
templateUrl: 'resources/views/layout/contact.php',
controller: 'authCtrl'
})
.when('/travel', {
title: 'Travel',
templateUrl: 'resources/views/layout/travel.php',
controller: 'authCtrl'
})
.when('/subscription', {
title: 'Subscription',
templateUrl: 'resources/views/layout/subscription.php',
controller: 'authCtrl'
})
.when('/invite_friends', {
title: 'InviteFriends',
templateUrl: 'resources/views/layout/invite_friends.php',
controller: 'authCtrl'
})
.when('/liked_you', {
title: 'LikedYou',
templateUrl: 'resources/views/layout/liked_you.php',
controller: 'authCtrl'
})
.when('/favourites', {
title: 'Favourites',
templateUrl: 'resources/views/layout/favourites.php',
controller: 'authCtrl'
})
.when('/coins', {
title: 'Subscription',
templateUrl: 'resources/views/layout/coins.php',
controller: 'authCtrl'
})
.when('/forget', {
title: 'forget',
templateUrl: 'resources/views/layout/forget.php',
controller: 'authCtrl'
})
.when('/verify', {
title: 'verfiy',
templateUrl: 'resources/views/layout/verify.php',
controller: 'authCtrl'
})
.when('/verifyfb', {
title: 'verfiyfb',
templateUrl: 'resources/views/layout/verifyfb.php',
controller: 'authCtrl'
})
.when('/registration', {
title: 'verfiy',
templateUrl: 'resources/views/layout/registration.php',
controller: 'authCtrl'
})
.when('/showprofile/:UserID', {
templateUrl: 'resources/views/layout/showprofdile.php',
controller: 'renameShowCtrl',
})
.when('/', {
title: 'Login',
templateUrl: 'resources/views/layout/login.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('CheckSession', {}).then(function (results)
{
console.log(results.data);
var nextUrl = next.$$route.originalPath;
if (nextUrl == '/signin' || nextUrl == '/login' || nextUrl == '/verify' || nextUrl == '/registration' || nextUrl == '/forget' || nextUrl == '/invalidtoken' || nextUrl == '/registersuccess')
{
console.log('outpages');
}
else
{
if (results.data == 1)
{
console.log('loggedin');
console.log(nextUrl);
;
console.log('to be redirect');
$location.path(nextUrl);
}
else {
console.log('not logged in');
$location.path('login');
}
}
});
});
});
app.controller('ShowOrderController', function($scope, $routeParams) {
$scope.UserIDs = $routeParams.UserIDs;
});
$scope.customNavigate=function(msg){
$location.path("/view2"+msg)
}
How can I display the parameter 8 in my view ?
Here is my authCtrl.js
Help pls
I am helping my friend question..

You can use $routeParams to get route paramaters.
In your case, your code in controller might look like:
function ctrl($scope, $routeParams) {
$scope.userId = $routeParams.UserID
}
In your view use binding expression {{userId}}

the right way is to pass the id parameter in url is
/showprofile/{UserID}