AngularJS UI-Router one view utilised by multiple controllers separately - angularjs

I didn't exactly found an answer on this specific question here on stackoverflow.
In UI-Router can and may i specify the same view/templateUrl for 2 different states?
.state('app.dashboardLanding', {
url: '/dashboard-landing',
title: 'Dashboard Overview',
templateUrl: 'app/views/landing.html',
controller: 'DashboardLandingController',
})
.state('app.balanceSheetLanding', {
url: '/balance-sheet-landing',
title: 'Balance sheet Overview',
templateUrl: 'app/views/landing.html',
controller: 'BalanceSheetLandingController'
})
the code in app/views/landing.html is exactly the same, only the $scope properties are different.

app.js
'use strict';
// Declare app level module which depends on filters, and services
var app= angular.module('myApp', ['ngRoute']);
app.config(['$routeProvider', function($routeProvider) {
$routeProvider.when('/login', {templateUrl: 'partials/login.html', controller: 'loginCtrl'});
$routeProvider.when('/home', {templateUrl: 'partials/home.html', controller: 'homeCtrl'});
$routeProvider.when('/salesnew', {templateUrl: 'partials/salesnew.html', controller: 'salesnewCtrl'});
$routeProvider.when('/salesview', {templateUrl: 'partials/salesview.html', controller: 'salesviewCtrl'});
$routeProvider.when('/users', {templateUrl: 'partials/users.html', controller: 'usersCtrl'});
$routeProvider.when('/forgot', {templateUrl: 'partials/forgot.html', controller: 'forgotCtrl'});
$routeProvider.otherwise({redirectTo: '/login'});
}]);
app.run(function($rootScope, $location, loginService){
var routespermission=['/home']; //route that require login
var salesnew=['/salesnew'];
var salesview=['/salesview'];
var users=['/users'];
$rootScope.$on('$routeChangeStart', function(){
if( routespermission.indexOf($location.path()) !=-1
|| salesview.indexOf($location.path()) !=-1
|| salesnew.indexOf($location.path()) !=-1
|| users.indexOf($location.path()) !=-1)
{
var connected=loginService.islogged();
connected.then(function(msg){
if(!msg.data)
{
$location.path('/login');
}
});
}
});
});

Related

Simple ngRoute not working

Why this code not works?
angular.module('routers', ['ngRoute'])
.config(['$routeProvider', '$locationProvider', function ($routeProvider, $locationProvider) {
console.log('1. routes loaded!');
$routeProvider
.when('/', {
controller: 'HomeController'
})
.when('/about', {
controller: 'AboutController'
});
$locationProvider.html5Mode(true);
}])
.controller('HomeController', function () {
console.log('2. HomeController loaded!');
})
.controller('AboutController', function () {
console.log('3. AboutController loaded!');
});
When the page is loaded, the 1. routes loaded! log appears perfectly but the 2. HomeController... log not.
when I type localhost:8000/about in my browse, I receive the following return:
Cannot GET /about
What does this simple code not works?
Here are the changes,
var app = angular.module("app", ['ngRoute']);
app.config(['$routeProvider', function($routeProvider) {
$routeProvider.
when('/home', {
templateUrl: 'home.html',
controller: 'HomeController',
controllerAs: 'homeCtrl'
}).
when('/about', {
templateUrl: 'about.html',
controller: 'AboutController',
controllerAs: 'AboutCtrl'
});
}])
app.controller('HomeController', function () {
console.log('2. HomeController loaded!');
})
app.controller('AboutController', function () {
console.log('3. AboutController loaded!');
});
DEMO

Angular seo hashPrefix('!') google and yandex indexation

friends, can anybody help.
Angular 1.4.9 make links like this http://domain/#!/product,
but I need links like this http://domain/#!product with out slash.
Code:
var app = angular.module('myApp', [
'ngRoute'
])
.config([
'$routeProvider',
'$locationProvider',
function ($routeProvider, $locationProvider, ngMeta) {
'use strict';
$locationProvider.html5Mode(false);
$locationProvider.hashPrefix('!');
$routeProvider
.when('/', {
controller: 'HomeCtrl',
templateUrl: 'views/home.html',
})
.when('/article/:slug', {
controller: 'ArticleCtrl',
templateUrl: 'views/article.html'
})
.when('/catalog/:category/:subcategory', {
controller: 'CatalogCtrl',
templateUrl: 'views/catalog.html'
})
.when('/product/:category/:subcategory/:product', {
controller: 'ProductPageCtrl',
templateUrl: 'views/product.html',
reloadOnSearch: false
})
.when('/product/:category/:subcategory/:product/:texture', {
controller: 'ProductPageCtrl',
templateUrl: 'views/product.html',
reloadOnSearch: false
})
.otherwise({
redirectTo: '/'
});
}
]);
I don't think this is a valid URL - http://domain/#!product
It should be http://domain/#!/product or http://domain/product,
To transform your URLs in desired way, it gives you some heads up -
https://docs.angularjs.org/guide/$location

angularjs routing wrong link

I'm using cordova angularjs together. I will use the routeprovider.
index.js:
var appGenerator = angular.module('appGenerator', ['ngRoute', 'ngResource']);
appGenerator.config(function ($compileProvider) {
$compileProvider.aHrefSanitizationWhitelist(/^\s*(https?|ftp|mailto|file|tel):/);
});
appGenerator.config(['$routeProvider' function ($routeProvider) {
$routeProvider
.when('/', {
templateUrl: "partials/tablePage.html",
controller: "MainCtrl"
})
.when('/contacts', {
templateUrl: "partials/contacts.html",
controller: "ContactsCtrl"
}).otherwise({
redirectTo: '/'
}); }]);
html:
{{table.tablename}}
But I get an net::ERR_FILE_NOT_FOUND(file:///contacts) error
What I'm doing wrong?

Angularjs Use injectect module's controller in route definition

I'm new to angular and I'm trying to modularlize my app.
My main module gets some other module and I want to use the controller of the injected module in my route definition.
Some simple example would be very helpful!
This does not work:
var app = angular.module('Contacting_App', ['LeadLookup']);
app.config(['$routeProvider', function($routeProvider) {
$routeProvider.
when('/main',
{controller: 'MainCtrl',
templateUrl: 'apex/f42_Contacting_Main'}
).
when('/lead',
{module: 'LeadLookup',
controller: 'LeadLkpCtrl',
templateUrl: 'apex/f42_Lead_Lookup'}
).
otherwise(
{redirectTo: '/main'}
);
}]);
This tutorial page may point you in the correct direction docs.angularjs.org/tutorial/step_07
The main things you should look at are:
Module
var phonecatApp = angular.module('phonecatApp', [
'ngRoute',
'phonecatControllers'
]);
routeProvider
phonecatApp.config(['$routeProvider',
function($routeProvider) {
$routeProvider.
when('/phones', {
templateUrl: 'partials/phone-list.html',
controller: 'PhoneListCtrl'
}).
when('/phones/:phoneId', {
templateUrl: 'partials/phone-detail.html',
controller: 'PhoneDetailCtrl'
}).
otherwise({
redirectTo: '/phones'
});
}]);
Controllers
var phonecatControllers = angular.module('phonecatControllers', []);
phonecatControllers.controller('PhoneListCtrl', ['$scope', '$http',
function ($scope, $http) {
$http.get('phones/phones.json').success(function(data) {
$scope.phones = data;
});
$scope.orderProp = 'age';
}]);
phonecatControllers.controller('PhoneDetailCtrl', ['$scope', '$routeParams',
function($scope, $routeParams) {
$scope.phoneId = $routeParams.phoneId;
}]);

angular dynamic templateUrl

Hi have one more question, I have next config for angular:
angular.module('ow', []).
config(['$routeProvider', function($routeProvider) {
$routeProvider.
when('/:placeId', {templateUrl: 'partials/menu.html', controller: MenuCtrl}).
when('/menu/:itemId', {templateUrl: 'partials/menu-details.html', controller: MenuItemCtrl}).
when('/look/refill', {templateUrl: 'partials/refill.html', controller: RefillCtrl}).
when('/look/orderCart', {templateUrl: 'partials/orderCart.html', controller: OrderCartCtrl}).
when('/lang/:lang', {templateUrl: 'partials/menu.html', controller: LangCtrl}).
when('/waiter/:redirect', {templateUrl: "???????", controller: WaiterCtrl}).
otherwise({redirectTo: '/0'});
}];
Instead of "?????" I need to put dynamic url, tried to do it in controller like:
function WaiterCtrl($routeParams, $location, sharedData, $http, $route) {
$http.get(config.urls.ajaxWaiter + "{\"p\":\"" + sharedData.getOrderCart().orderPlace + "\"}").success(function(dataDetails) {
if ($routeParams.redirect == "menu") {
$route.templateUrl = "partials/menu.html";
$location.path("/");
}
if ($routeParams.redirect == "menuDetails") {
$route.templateUrl = "partials/menu-details.html";
$location.path("/menu/" + sharedData.getMenu());
}
if ($routeParams.redirect == "orderCart") {
$route.templateUrl = "partials/orderCart.html";
$location.path("/orderCart");
}
if ($routeParams.redirect == "refill") {
$route.templateUrl = "partials/refill.html";
$location.path("/refill");
}
return $route.templateUrl;
});
}
but it doesn't work... Can you help me?
You won't be able to put dynamic code into the routing. This is because the routing happens during the Config phase, which is executed before Angular starts running your application.
I think the easiest or cleanest way to do what you are trying to do is just have an inline controller in the route definition. I set up a simple plunk to show redirecting inside the route definition: http://plnkr.co/edit/aeSjmn?p=preview
Here's some sample code that might work for you:
angular.module('ow', []).
config(['$routeProvider', function($routeProvider) {
$routeProvider.
when('/:placeId', {templateUrl: 'partials/menu.html', controller: MenuCtrl}).
when('/menu/:itemId', {templateUrl: 'partials/menu-details.html', controller: MenuItemCtrl}).
when('/look/refill', {templateUrl: 'partials/refill.html', controller: RefillCtrl}).
when('/look/orderCart', {templateUrl: 'partials/orderCart.html', controller: OrderCartCtrl}).
when('/lang/:lang', {templateUrl: 'partials/menu.html', controller: LangCtrl}).
when('/waiter/:redirect', {template: '', controller: function ($scope, $routeParams, $location) {
function WaiterCtrl($routeParams, $location, sharedData, $http, $route) {
$http.get(config.urls.ajaxWaiter + "{\"p\":\"" + sharedData.getOrderCart().orderPlace + "\"}").success(function(dataDetails) {
if ($routeParams.redirect == "menu")
$location.path("/");
else
$location.path("/" + $routeParams.redirect);
})
}}).
otherwise({redirectTo: '/0'});
}];

Resources