This is a phonegap + angularjs project. Let say i am on this page
file:///android_asset/www/index.html#/groupHome"
Now i got a notification and i am changing hash as below on clicking notification:
window.location.hash= "/groupHome?groupId=xyz";
If am on any page except file:///android_asset/www/index.html#/groupHome" navigation happening correctly but if i am on file:///android_asset/www/index.html#/groupHome" page its not navigating
$stateProvider
.state('groupHome', {
url: "/groupHome",
templateUrl: "groupHome.html"
})
Here is redirection
if(window.location.hash.indexOf("/groupHome")>-1)
{
angular.element("[ng-controller =groupHomeController]").injector().invoke(['$state',function($state) {
$state.reload("/groupHome?groupId="+msg.extraParam.groupId);
}]);
}
else
window.location.hash="/"+msg.extraParam._nextPage+"?groupId="+msg.extraParam.groupId;
Use Angular UI-Router
for navigation from one view to other views smoothly
Related
I upgraded our AngularJS package from 1.4.14 to 1.5.11. In doing so, our routes unexpectedly stopped loading. The base url for our application is baseurl.com/app.
I've reviewed the angularjs migration documents, but cannot find anything that has helped me to fix this issue.
App.config(function($routeProvider) {
$routeProvider
// route for the top level
.when('/', {
template : '<home></home>',
})
// route for a new project
.when('/new', {
template : '<new></new>',
})
// route for the project overview page
.when('/view', {
template : '<overview></overview>',
})
// route for the manage page
.when('/manage', {
template : '<manage></manage>',
})
// route for the base perform page
.when('/perform', {
template : '<perform></perform>',
})
// default route
.otherwise('/');
});
I was able to resolve the issue by adding the code below
.run(['$route', function() {}]);
This was a known issue in the AngularJS documentation that I missed somehow.
https://code.angularjs.org/1.5.11/docs/api/ngRoute#known-issues
In my ionic application while page load each time it's loading the login page then it's coming to profile page . I think if this works i can can use it in profile controller so that each time i can see the current page which is getting refresh.
Can any body help me out to achieve this?
Again when i am navigating to each page using $state.go("app.profile") or $state.go("app.signup"), Each time it's loading login.html as a splash screen & later it's navigating to the requested page.
My requirement is if I refresh the profile page or signup page it should only reload the current page not login page.
Any help would be appreciated.
You just need to pass the event to the function and handle it from there, it's the clean and best way doing it:
in your view(html):
<button (click)="clicked($event)">click</button>
and in your Javascript (Typescript):
clicked(e) {
e.preventDefault();
//then do whatever you should do here
}
Thanks All ,
My problem got solved . I made two changes in my app.
used preventDefault() as required .
And i changed the $stateProvider to $routeProvider.
inside app.config i put the below code
$routeProvider
.when("/app", {
// controller: AppCtrl,
templateUrl: 'templates/menu.html'
}) .when("/signup", {
// controller: SignupCtrl,
templateUrl: 'templates/signup.html'
}) .when("/profile", {
// controller: ProfileCtrl,
templateUrl: 'templates/profile.html'
});
You can just return false in the event handler
(click)="onClick($event);false"
or
(click)="onClick($event)"
onClick(event) {
event.preventDefault();
// or
return false;
}
I have an MVC test project I am working on to see if I can get angular routing to work with it.
What I mean by work with it is that I want to be able to have a landing page for my app: www.testapp.com
Then when people log in I want MVC to route them to testapp.com/Dashboard/#/and then I want to be able to use ng-view to load pages with Angualar like so:
testapp.com/Dashboard/#/PageOne, testapp.com/Dashboard/#/PageTwo, etc.
Here is what I have tried:
main.js:
angular.module('App', ['ngRoute', 'ngResource']);
angular.module('App').config(function ($routeProvider) {
$routeProvider
.when('/Dashboard', {
templateUrl: 'Dashboard/Index'
})
.when('/PageOne', {
templateUrl: 'Dashboard/PageOne'
})
});
~/Views/Home/Index.cshtml was my landing page that did not use angular routing it just had ActionLinks to Login and Register
~/Views/Dashboard/Index.cshtml is where I used ng-app and ng-view and I had links like so: Dashboard, Page One
The problem is that when I go to testapp.com/Dashboard when it loads the URL turns into testapp.com/Dashboard#/ rather than testapp.com/Dashboard/#/
The other problem is that when I click on my links it goes straight back to the Home/Index and the URL is like so: testapp.com/#/PageOne but the Home is being displayed
in my RouteConfig.cs file it is just the default:
public static void RegisterRoutes(RouteCollection routes)
{
routes.IgnoreRoute("{resource}.axd/{*pathInfo}");
routes.MapRoute(
name: "Default",
url: "{controller}/{action}/{id}",
defaults: new { controller = "Home", action = "Index", id = UrlParameter.Optional }
);
}
So my question is what is wrong with my code here that makes it not function like I want it to? What do I have to add/change?
Thank you!
So I figured out the issue was with the way I was writing my links. Once my actual angular app was loaded (I was at the Dashboard rather than the landing page where angular is initialized) I had to change my anchor tag hrefs from \#\{Route} to '/Dashboard/#/{Route}'. Here is my updated angular route config:
angular.module('App').config(function ($routeProvider) {
$routeProvider
.when('/', {
templateUrl: 'Index'
})
.when('/PageOne', {
templateUrl: 'PageOne'
})
});
This completely fixed my problem so I can now have angular routing take over the show when it needs to and also have MVC ActionLinks in my application as well.
Hope this helps someone else!
NOTE
I did not change anything in my MVC RouteConfig.cs you can leave the default. Also I had to get rid of ViewStart because that was messing things up.
I am getting two flow in my two diff codes.
I am developing an ionicframework based app using its default (angular based ui-router) routing.
Now when i coded for the ionic this way.
*.config(["$stateProvider","$urlRouterProvider",function ($stateProvider,$urlRouterProvider) {
$urlRouterProvider
.otherwise('oops');
$stateProvider
.state('dashboard',{
url:"/dashboard",
abstract: true,
templateUrl:'templates/dashboard.html',
controller:"myCtrl"
})
.state('courses',{
url:'/courses',
templateUrl:'templates/courses.html',
controller:'myCtrl'
})
.state('transactions',{
url:'/transactions',
templateUrl:'templates/transactions.html'
})
.state('oops',{
url:'/oops',
templateUrl:'templates/oops.html',
controller:'myCtrl'
})
}])*
view :
<ion-nav-view></ion-nav-view>
i found all my templates are getting loaded at once (on browser console testing) when i call my base route (also for any route,whichever i called for the first load of app).
where as when i use the ui-router for the nonionic app like :
myApp.config(function($stateProvider,$urlRouterProvider){
/*throw the rest url to home page*/
$urlRouterProvider.otherwise("/single");
$stateProvider
.state("single",{
url:"/single",
templateUrl:"templates/single.html"
})
.state("portfolio",{
url:'/portfolio',
templateUrl:'templates/portfolio.html',
controller:"myCtrl"
})
.state("nested",{
url:"/nested",
templateUrl:"templates/nested.html"
}
)
.state("nested.viwe1",{
url:"/view1",
templateUrl:"templates/nested.view1.html"
})
.state("nested.viwe2",{
url:"/view2",
templateUrl:"templates/nested.view2.html"
})
});
view:
<div ui-view class="my-element"></div>
only the demanded templates (configured with the route),is getting loaded.
So is the Ionic loads all template initially or else i am flowing wrong with the code.
Return the templateUrl by a function. Like this,
templateUrl: function() {return 'templates/courses.html';}
https://github.com/driftyco/ionic/issues/3819
http://ionicframework.com/docs/platform-customization/dynamic-templates.html
I am using combination of AngularJS and Adobe CQ5.
I have implemented routing to load different views. The views are loading perfectly but the URL is not appending the #/path and it shows the base path only, e.g.
localhost:7001/cf#/content/requestpage.html#/
rather than
localhost:7001/cf#/content/requestpage.html#/checkstatus.
Due to this, when I refresh the page it loads the route path (/) template instead of loading the same view again.
I am struggling to resolve this issue. Here's my controller code:
var demoapp=angular.module('demoApp',['ngRoute','ngSanitize']);
demoapp.config(function($routeProvider,$locationProvider) {
// use the HTML5 History API
//$locationProvider.html5mode(false);
$routeProvider
.when('/', {
templateUrl: '/content/index.html?wcmmode=disabled',
controller: 'myfirstcontroller'
})
.when('/checkstatus', {
templateUrl: '/content/housetemplate.html?wcmmode=disabled',
controller: 'houseController'
})
.otherwise({
redirectTo: '/'
});
});
demoapp.controller('houseController', function($scope, $routeParams,$http)
{
//code
});
demoapp.controller('myfirstcontroller', function($scope,$http,$rootScope,$location,$compile)
{
//On Form Submit
$scope.continueForm = function(isValid){
if (isValid)
{
$location.path('/checkstatus');
}
});
});
This is not an issue with CQ5. When you open a page from Siteadmin, by default your page is loaded within contentfinder (/cf#).
Now, contentfinder already has your page URL as the hashvalue. Hence you find that the URL doesn't get updated even though your angular views work correctly.
Try accessing the same page without contentfinder. i.e.,
http://localhost:7001/content/requestpage.html
instead of
http://localhost:7001/cf#/content/requestpage.html
You should find things working as expected.