I am using $stateprovider to navigate between pages I had given $state.go('view1') to go to view1.html:
config(['$qProvider','$stateProvider','$locationProvider', '$routeProvider', function($qProvider,$stateProvider,$locationProvider, $routeProvider) {
$locationProvider.hashPrefix('!');
$stateProvider
.state('index', {
url: '/',
templateUrl: 'index.html'
})
.state('view1', {
url: '/view1',
templateUrl: 'view1/view1.html',
controller:'View1Ctrl'
})
.state('view2', {
url: '/view2',
templateUrl: 'view2/view2.html'
});
$routeProvider.otherwise({redirectTo: '/'});
$qProvider.errorOnUnhandledRejections(false);
}])
Function using $state:
controller("appcontroller",['$scope','$state','$stateParams',function($scope,$state,$stateParams,$rootScope){
$scope.login = function()
{
$state.go('view1');
}
}]);
Here view1.html is loading but it's showing above index.html.
As you are using Anguar ui-router. You must have kept in index.html. So your view1.html will be replaced there only. Other code in index.html will be untouched by your angular code.
<p> Here is me </p>
<ui-view></ui-view>
Now, if you change the route. "Here is me" will be always there.
Hope this was the issue what i understood.
Related
What am I missing? Why would the Home template NOT load via .otherwise('/')? If I link to href="/#/" or ui-sref="home" everything works fine. However the Home template does NOT load if I try $urlRouterProvider.otherwise is working. The console does not show any errors.
Another interesting point is the URL is never modified when the first page loads. My other apps usually redirect from http://www.domain.com to http://www.domain.com/#/. This app is not showing the updated URL.
I have tried this in multiple browsers. No extensions or plugins are active.
Here are my routes:
(function () {
'use strict';
angular
.module('myapp')
.config(configRoutes);
configRoutes.$inject = ['$stateProvider', '$urlRouterProvider'];
function configRoutes ($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('/');
$stateProvider
.state('home', {
url: '/',
templateUrl: 'app/partials/home.html'
})
.state('login', {
url: '/login',
templateUrl: 'app/partials/login.html',
})
.state('signup', {
url: '/signup',
templateUrl: 'app/partials/signup.html',
})
.state('logout', {
url: '/logout',
template: null,
controller: 'LogoutCtrl'
})
.state('profile', {
url: '/profile',
templateUrl: 'app/partials/profile.html',
});
}
})();
When I reload the website from the root (ex: website.com), the refresh is fine. However, when I reload from anywhere else (website.com/about), only the partial html for the about page is loaded, leaving out all the template code such as headers, footers, script imports, etc. In addition, the browser insists on loading website.com/about/ , including an ending slash.
Here is the relevant source.
app.js
angular.module("myApp", ['ui.router'])
.run(function($state, $stateParams) {
})
.config(function ($stateProvider, $urlRouterProvider, $locationProvider) {
$locationProvider.html5Mode(true);
$stateProvider
.state('home', {
url: "/",
templateUrl: "home/index.html"
})
.state('about', {
url: "/about",
templateUrl: "about/index.html"
})
.state('contact', {
url: "/contact",
templateUrl: "contact/index.html"
})
.state('news', {
url: "/news",
templateUrl: "news/index.html"
})
.state('vip', {
url: "/vip",
templateUrl: "vip/index.html"
});
$urlRouterProvider.otherwise('/');
});
I'm using NodeJS+Express to serve an HTML page with an Angular app. It seems to work fine when it loads. There are no errors.
Problem is that that page is pretty much blank - except for the header. But the part that is supposed to go where <div ui-view></div> is, doesn't display anything.
Worse yet, when I go to an address, like
http://localhost:7070/admin/#/rounds
the browser just changes it to
http://localhost:7070/admin/#/
and goes back to displaying nothing.
My angular app, in index.js looks like this:
Some .run() and .config() settings
app.run(['$rootScope', '$state', '$stateParams',
function ($rootScope, $state, $stateParams) {
// It's very handy to add references to $state and $stateParams to the $rootScope
// so that you can access them from any scope within your applications.For example,
// <li ng-class="{ active: $state.includes('contacts.list') }"> will set the <li>
// to active whenever 'contacts.list' or one of its decendents is active.
$rootScope.$state = $state;
$rootScope.$stateParams = $stateParams;
}
]);
app.config(["$locationProvider", function($locationProvider) {
//$locationProvider.html5Mode(true);
}]);
States definition:
app.config(
['$stateProvider', '$urlRouterProvider',
function ($stateProvider, $urlRouterProvider) {
console.log("Is this running at all?");
$urlRouterProvider.otherwise('/');
$stateProvider
.state("admin", {
abstract: true,
url: '/admin',
template: '<ui-view />'
})
.state("admin.login", {
url: '/login',
templateUrl: 'login.html',
controller: 'userLoginCtrl'
})
/* DASHBOARD */
.state("admin.dashboard", {
url: "",
controller: 'dashboardAppCtrl',
templateUrl: "dashboard.html"
})
.state("admin.subjects", {
url: "/subjects",
controller: 'subjectsCtrl',
templateUrl: "subjects.html"
})
/* ROUNDS */
.state("admin.rounds", {
url: "/rounds",
controller: 'roundsAppCtrl',
templateUrl: "rounds.html",
resolve: {
gameId: ['$stateParams', function($stateParams){
console.log("gameId ");
return $stateParams.gameId;
}]
}
})
.state("admin.round", {
url: "/round/:roundId",
controller: 'adminRoundCtrl',
templateUrl: "adminround.html",
resolve:{
gameId: ['$stateParams', function($stateParams){
return $stateParams.gameId;
}],
roundId: ['$stateParams', function($stateParams){
return $stateParams.roundId;
}]
},
});
}
]);
There is a working plunker
The answer is relatively simple
$urlRouterProvider.otherwise('/admin');
And instead of this
http://localhost:7070/admin/#/rounds
we have to try this
http://localhost:7070/admin/#/admin/rounds
The point is, every sub-state 'admin.xxx' is child state of the the 'admin' state. And that means, it inherits its url: '/admin'
Also, we used
//$locationProvider.html5Mode(true);
So, the startingurl would most likely be ...
EXTEND: as discussed in comments, IIS Express is used with virtual applicaton /admin, so this part will be in url twice /admin/#/admin...
http://localhost:7070/admin/index.html
// i.e.
http://localhost:7070/admin/
As a starting url of our app. Any routing is later managed after the # sign
http://localhost:7070/admin/#/admin/round/22
Check it here
I have been trying to navigate to views using angulateJs ngRoute.
I defined first navigation using
$routeProvider.
when('/login', {
templateUrl: 'login.html',
controller: 'loginCtrl'
}).
when('/home', {
templateUrl: 'home.html'
}).
otherwise({
redirectTo: '/login'
});
Now I want to move to page home from loginController. How can I achieve that. every post just saying about navigating from main page only.
I tried with
app.controller('loginCtrl', function($scope, $location){
$scope.login = function(){
$location.path('/home');
}
});
Binod you should probably look in to the $state injector on the controller. This $state will have states to which you can reach, which are internally mapped to some other templates, like $state.go('someOtherPage').
I would suggest you to checkout $stateProvider
Inject $location in your code where u want to go to the template, and then use $location.path('/home');
try
when('/home',{
templateUrl : 'home.html',
controller : 'HomeController'
})
and create one empty controller with the name HomeController.
Solved using $stateProvider.
var routerApp = angular.module('starter', ['ui.router','']);
routerApp.config(function($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('/login');
$stateProvider
.state('login', {
url: '/login',
templateUrl: 'login.html',
controller: 'loginCtrl'
})
.state('home', {
url: '/homeffgfg',
templateUrl: 'home.html'
});
});
and Login Controller is
app.controller('loginCtrl', function($scope, $state){
$scope.login = function(){
$state.go('home');
}
});
ui.router dependency is important and <script type="text/javascript" src="js/angular-ui-router.js"></script>
Trying to link to a child URL using Angular UI-Router (very new to this)
I have:-
app.config(function($stateProvider, $urlRouterProvider, $locationProvider){
$urlRouterProvider.otherwise("/products")
$stateProvider
.state('products', {
url: "/products",
templateUrl: "products.html",
})
.state('products.edit', {
url: "/:id",
templateUrl: "products.edit.html",
controller: function ($scope, $stateParams) {
$scope.id = $stateParams.id;
console.log($stateParams.id)
}
})
.state('customers', {
url: "/customers",
templateUrl: "customers.html",
});
//$locationProvider.html5Mode(true);
});
I can navigate to products and customers, but not the products.edit state.
Here is a PLUNKER
Because products.edit is the child state of products, the view of the former is to be embedded into the view of the latter. So in products.html, you need to include a <ui-view> where ui-router will place the child view. Like this:
<div>
<h4>Products Page</h4>
<ui-view></ui-view>
</div>
See this updated plunker.