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
Related
I try to create an app with Laravel 5.3 and AngularJS. I want to use the routes and templates from Angular instead of Laravel.
Here is the web.php file from Laravel:
Route::get('/', function () {
return view('index');
});
And here is a part of the ui-router in AngularJS:
routeConfig.$inject = ['$stateProvider'];
function routeConfig ($stateProvider) {
// Routes
$stateProvider
.state('home', {
url: '/',
templateUrl: 'app/views/home.html'
})
.state('register', {
url: '/register?oauth_token&oauth_verifier',
templateUrl: 'app/views/register.html',
controller: 'RegisterController',
controllerAs: 'registerCtrl'
})
};
I have also enabled the html5mode and the base url on head. The problem now:
When I am at home and click the link to go on register page, it works. But If I try to load directly the register page, it loads it through laravel routes and since I haven't mentioned anything about it there, I have a NotFoundHttpException.
That's because when you refresh all routes are handled by laravel first.
I had the same problem and there are 2 approaches:
either put the angular app on a different domain ... but you will run
into CORS issues
or tell laravel to route any route to angular app, and that's easier
Route::any('{path?}', function()
{
return view("index");
})->where("path", ".+");
I am creating single page application using node,express and angular js. I am not getting that how to manage routes in both angular and express(node).
Please help me and If possible give some example code or link.
If you wanna create a single page application you need to use the router of angular for navigate in your app without reload, but in generally you need data from server, to organise this data you need a route on node.
This is a example of ngRoute
http://plnkr.co/edit/L4Hxf7KiiVuouPWRv4pl
var app = angular.module("myApp", ["ngRoute"]);
app.config(function($routeProvider) {
$routeProvider
.when("/", {
template: 'hello'
})
.when("/red", {
template: 'hi'
})
.when("/green", {
templateUrl: 'hello.html'
})
.when("/blue", {
templateUrl: 'blue.html'
});
});
example of node route
http://expressjs.com/en/guide/routing.html
I am working on web application using AngularJS and have used ui.router for routing.
I have configured the app
.state('init', {
url: '/',
controller: 'LocalizationCtrl',
templateUrl: 'partials/common/init.html'
})
.state('login', {
url: '/login',
templateUrl: 'partials/auth/login.html',
controller: 'LoginCtrl',
resolve: {
skipIfLoggedIn: skipIfLoggedIn
}
});
In init I load the localization json from server
If I hit the following URL it all works fine
http://localhost/app/index.html
However if I hit the following URL or any other state directly the localization files do not load
http://localhost/app/index.html#/login
How can I make sure that when app is loaded first using any URL the localization code should execute and not bypassed.
/ Bu default go to state -
angular.module('yourModuleName').run(["$location", function ($location) {
$location.url('/');
}]);
So, when you refresh or take your web application, your site will go to url /, so it should invoke your state, init to work.
Or you can use $state to go to a state upon starts
/ Bu default go to state -
angular.module('yourModuleName').run(["$state", function ($state) {
$state.go('init');
}]);
Its very simple there is a property "Resolve" you can use that.
In your parent state you can write this -
.state('parentState', {
resolve : {
localize : function() {
//Localization code here
}
}
};
Resolve will ensure that your localization work will be done before controller is loaded.
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.