i am using angularjs for developing SPA. i have state loading which there is image with a tag. this is required for a plugin i am using for creating album. but due to this my url is changing and this forces my state to change.
My question is how can i stop changing my state when url changes. or how to stop a tag to change url.
My app config :
var decorpot = angular.module('decorpot', ['ngRoute', 'satellizer']);
decorpot.config(['$routeProvider', '$provide', '$authProvider', function($routeProvider, $provide, $authProvider){
$provide.decorator('ngViewDirective', function($delegate) {
var directive = $delegate[0];
directive.replace = true;
return $delegate;
});
$routeProvider.when('/', {
templateUrl: 'resources/partials/home.html',
controller: 'DecorpotCtrl'
}).when('/projects',{
templateUrl : 'resources/partials/projects.html',
controller : 'ProjectsController'
})
.otherwise({
redirectTo: '/'
});
}]);
image html :
Related
I have the following code
var balaitus = angular.module("balaitus", ["ngRoute"]);
// configure our routes
balaitus.config(function($routeProvider) {
$routeProvider
// route for the home page
.when('/', {
templateUrl : 'home_usuario2.html',
controller : 'usuarioCtrl'
})
.when('/home_usuario', {
templateUrl : 'home_usuario2.html',
controller : 'usuarioCtrl'
})
// route for the about page
.when('/estadisticas', {
templateUrl : 'estadisticas.html',
controller : 'estadisticasCtrl'
})
// route for the contact page
.when('/hashtags', {
templateUrl : 'hashtags.html',
controller : 'hashtagsCtrl'
})
.otherwise({
templateUrl : 'home_usuario2.html',
controller : 'usuarioCtrl'
});
});
// create the controller and inject Angular's $scope
balaitus.controller('usuarioCtrl', function($scope) {
// create a message to display in our view
$scope.message = 'Hi! This is the home page.';
});
balaitus.controller('estadisticasCtrl', function($scope) {
$scope.message = 'Hi! This is the estadisticas page.';
});
balaitus.controller('hashtagsCtrl', function($scope) {
$scope.message = 'Would you like to contact us?';
});
The code simply routes different pages, and set the corresponding controller. It works fine, but when I add another angular module between [ ], for example ngFileUpload or ui.bootstrap.demo, ng-route doesn't work, ¿but why?
you should add it in the constructor, like:
var balaitus=angular.module("balaitus", ['webix', 'ngRoute','ui.router']);
balaitus.config(['$stateProvider', '$urlRouterProvider', '$routeProvider', '$locationProvider', '$qProvider', function ($stateProvider, $urlRouterProvider, $routeProvider, $locationProvider, $qProvider) {
$routeProvider ....
and of course include the js files in ur html code
<script src="Scripts/angular-route.js"></script>
Am creating a simple angularjs application with ng-route, the index.html page have a bootstrap carousel which have next and previous button when click on that button am being navigated to the next Html page below is my plunkr link as well as my script.js file please do corrections if am wrong, I have searched a lot but didn't find a proper solutions for this issue
Working Link
var appname = angular.module('appname', ['ngRoute', 'ngAnimate']);
appname.config(['$routeProvider',
function ($routeProvider) {
$routeProvider.
when('/', {
templateUrl: 'indexView.html',
controller: 'indexController'
}).
when('/about', {
templateUrl: 'about.html',
}).
when('/contact', {
templateUrl: 'contact.html',
}).
otherwise({
redirectTo: '/'
});
}]).controller('MainCtrl', function($scope, $location) {
$scope.isIndexPage = function() {
return $location.path() === '/';
}
});
Check this, everything works nicely now.
http://plnkr.co/edit/JcInw9ZUz6vfFO5InV7N?p=preview
Rewrote the MainCtrl part, before the MainCtrl was created once and never updated, but now it listens to route change and hides the carousel accordingly.
$scope.$on('$routeChangeSuccess', function () {
$scope.isIndexPage = $location.path() === '/';
});
I want to remove the # from the url
I have used the locationProvider and had in the index.html
Locationprovider is given as
scotchApp.config(function($routeProvider, $locationProvider) {
..
$locationProvider.html5Mode(true);
Here is my script.js
// create the module and name it scotchApp
var scotchApp = angular.module('scotchApp', ['ngRoute']);
// configure our routes
scotchApp.config(function($routeProvider, $locationProvider) {
$routeProvider
// route for the home page
.when('/', {
templateUrl : 'pages/home.html',
controller : 'mainController'
})
// route for the about page
.when('/about', {
templateUrl : 'pages/about.html',
controller : 'aboutController'
})
// route for the contact page
.when('/contact', {
templateUrl : 'pages/contact.html',
controller : 'contactController'
});
$locationProvider.html5Mode(true);
});
// create the controller and inject Angular's $scope
scotchApp.controller('mainController', function($scope) {
// create a message to display in our view
$scope.message = 'Everyone come and see how good I look!';
});
scotchApp.controller('aboutController', function($scope) {
$scope.message = 'Look! I am an about page.';
});
scotchApp.controller('contactController', function($scope) {
$scope.message = 'Contact us! JK. This is just a demo.';
});
This is the follow up of this question. I still didn't get the solution. I would accept both answer if it was answered.
Here is the plunkr of the example which i wanted to do.
Note :
This is my project folder
localhost/test/angular
So, i have this link in the about
localhost/test/angular/about
Request : Pls download the source from plunkr and have a try over it.
I am not getting any error but nothing appears in the body sections
Thanks
To link around your application using relative links, you will need to set this html code in the head of your document.
<base href="/your-base-if-needed">
or
<base href="/">
but the HTML5 mode set to true should automatically resolve relative links
i'm investigating if i can have what the title says.
Here's my thought.
Let's assume that i've got this routes:
.when('/', {
templateUrl : 'partials/homepage.html',
})
.when('/test', {
templateUrl : 'partials/test.html',
})
.when('/page/:pageID', {
templateUrl : 'partials/page.html',
})
.when('/page/single/:pageID', {
templateUrl : 'partials/page-single.html',
})
Until now i had the opportunity to add the templateUrl as also the controller details in the route and everything was working just fine.
Now the app is changed and there is only one controller with all the information needed and must remain one controller. And the routes will be something like that:
.when('/:templateName/:pageID', {
controller: 'myCtrl'
})
Can i set from the controller the template id by getting the templateName parameter? And if so how about the last route example /page/single/:pageID? How can i know that there is a second option in route?
I can take the templateName parameter and see it changing with the $routeChangeSuccess method but i cannot find any way to set the template on the fly.
Any ideas?
One solution could be the following one:
angular.module('myapp', []).
config(['$routeProvider', function($routeProvider) {
$routeProvider.when('/:templateName/:pageId', {
templateUrl: function(urlattr){
return '/pages/' + urlattr.templateName + '.html';
},
controller: 'YourCtrl'
});
}
]);
From the AngularJs 1.3 Documentation:
templateUrl – {string|function()} – path or function that returns a path to an html template that should be used by ngView.
If templateUrl is a function, it will be called with the following parameters:
Array.<Object> - route parameters extracted from the current $location.path() by applying the current route
I would move your singleton logic from your controller to a service. Since you didn't provide much code below is an example to give you an idea how it could work.
app.config(function($routeProvider) {
$routeProvider
.when('/', {
templateUrl: 'partials/homepage.html',
controller: 'SingleController'
})
.when('/test', {
templateUrl: 'partials/test.html',
controller: 'SingleController'
})
.when('/page/:pageId', {
templateUrl: 'partials/page.html',
controller: 'SingleController'
});
});
app.provider('appState', function() {
this.$get = [function() {
return {
data: {}
};
}];
});
app.controller('SingleController', function ($scope, appState) {
$scope.data = appState.data;
});
But if it must be a singleton controller you actually could use the ng-controller directive before your ng-view directive so it becomes a $rootScope like scope for all your views. After that just add empty function wrappers in your $routeProvider for the controllers.
I am new to AngularJS. In my project I have a search screen when search I will get the search result in the ngGrid.
On click of any row in the grid, it should populate the details of that row in other page. Basically, I need to pass the ID of the selected record to the other page. I don't know how to handle this in AngularJS (I am using AngularJS HotTowel template) and Breeze for data access logic.
Appreciate if you could provide me link or any where it is implemented which I could refer.
You can create service and share values for instance
var myApp = angular.module('myApp', []);
myApp.factory('ShareData', function() {
var shared;
return {
setValue: function(val){
shared = val;
},
getValue: function(){
return shared;
}
});
function FirstCtrl($scope, ShareData){
ShareData.setValue(1);
}
function SecondCtrl($scope, ShareData){
$scope.data = ShareData.getValue();
}
You need $routeParams for this.
Below is an example of the routing configuration:
var app = angular.module("app", ["ngRoute"])
.config(["$routeProvider", function ($routeProvider) {
$routeProvider
.when("/", {
controller: "HomeController",
templateUrl: "/home/main",
})
.when("/products/:category", {
controller: "ProductController",
templateUrl: "/product/index"
})
.otherwise({
redirectTo: "/"
});
}]);
Product Controller
angular.module("app")
.controller("ProductController",["$scope","$routeParams", function($scope,$routeParams){
$scope.category = $routeParams.category;
alert($scope.category);
}]);
'Main' View
<a ng-href="#/products/ladies">Ladies</a>
check this URL for more info:
https://docs.angularjs.org/api/ngRoute/service/$routeParams