Pretty simple thing I'm trying to do. Fairly new to angular.
I just want to set the initial page that loads to be something other than the main that it is set to out of box when I generate an application
In your config (presumably app.js with your scaffold), change the templateUrl to be the template/view that you desire.
eg:
.config(function ($routeProvider) {
$routeProvider
.when('/', {
templateUrl: 'views/someOtherTemplate.html',
controller: 'MainCtrl'
})
...
});
If you're using ui-router then it's similar:
.config(function($stateProvider, $urlRouterProvider, $locationProvider) {
$stateProvider
.state('home', {
url: '/',
templateUrl: 'views/someOtherTemplate.html'
})
});
If you're using the angular router then it'll be something like this:
angular.module('yourMainAppModule').config(function($routeProvider) {
$routeProvider.when("/", {
templateUrl: "youTemplate.html",
controller: "YourHomeController"
})
});
You can read more about setting up your app's routes by looking at when() in the Angular Docs.
Above methods where not working for me, giving the url field an empty value worked great with ui-router :
$stateProvider
.state('home', {
url: '',
templateUrl: 'views/homepage.html',
controller: 'AppCtrl'
})
Related
App.js
var myApp=angular.module('sampleApp', ['ui.router','MainCtrl', 'NerdCtrl',
'NerdService', 'GeekCtrl', 'GeekService','ngMaterial']);
myApp.config(function($stateProvider, $urlRouterProvider){
$stateProvider
.state('login', {
url: '/login',
templateUrl: 'views/login.html'
})
.state('nerd', {
url: '/nerd',
templateUrl: 'views/nerd.html',
//controller: NerdController
})
.state('geek', {
url: '/geek',
templateUrl: 'views/geek.html'
});
$urlRouterProvider.otherwise('/login');
});
I started with an AngularJs boilerplate and tried to use UI Router with it and, I've been stuck on this for a while. When I comment out the line of code shown above, it works fine and no errors come up. However when I add the controller, I get this module error in the console with "ReferenceError: NerdController is not defined" . I've defined the controller and added the controller dependency and I'm not sure what I need to do. It seems like a simple error that I'm overseeing. Thanks for the help!
Here is the controller file:
angular.module('NerdCtrl', []).controller('NerdController', function($scope)
{
$scope.tagline = 'Nothing beats a pocket protector!';
});
Could it be something wrong with my directory structure?
Change to : controller: "NerdController"
var myApp=angular.module('sampleApp', ['ui.router','MainCtrl', 'NerdCtrl',
'NerdService', 'GeekCtrl', 'GeekService','ngMaterial']);
myApp.config(function($stateProvider, $urlRouterProvider){
$stateProvider
.state('login', {
url: '/login',
templateUrl: 'views/login.html'
})
.state('nerd', {
url: '/nerd',
templateUrl: 'views/nerd.html',
controller: "NerdController"
})
.state('geek', {
url: '/geek',
templateUrl: 'views/geek.html'
});
$urlRouterProvider.otherwise('/login');
});
I have used $stateProvider in my angular application for routing. Prob I'm facing here is, on logout I could navigate to login page,but the login controller is not getting reloaded as expected. Please find below the $stateProvider configured in my app
in controller.js
$location.url('/login');
.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
// setup an abstract state for the tabs directive
.state('login', {
url: '/login',
templateUrl: 'templates/login.html',
controller: 'loginController'
})
.state('charts', {
url: '/charts',
templateUrl: 'templates/chart-screen.html',
controller: 'ChartController'
})
// if none of the above states are matched, use this as the fallback
$urlRouterProvider.otherwise('/login');
});
Controller is not reloaded because of caching, please refer below link:https://stackoverflow.com/a/31725101/6071335
I have set up within angular 1.5 the Ui-router as follows:
app.config(['$stateProvider', '$urlRouterProvider', function($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('/');
$stateProvider
.state('blank', { url:'/blank', templateUrl: 'home/blank.html' })
`enter code here` .state('verify', { url:'/verify/:type', templateUrl : 'update/verify.html', controller: function($scope, $stateParams, general) { general.verifyemail($stateParams.type);} })
.state('home', { url:'/', templateUrl: 'home/home.html' })
.state('about', { url:'/about', templateUrl: 'about/about.html' })
.state('faq', { url:'/faq', templateUrl: 'faq/faq.html' })
.state('exercise', { url:'/exercise', templateUrl: 'practice/exercise.html' })
.state('levels', { url:'/levels', templateUrl: 'practice/level.html' })
}]);
the router works when the app is already started but if you extend the url to include the path i.e. myapp/about and paste the url into a new browser window, the browser will open the app but go to the home page. If you paste the same url into the page already loaded, it goes to the right state.
I've obviously set it up wrong but I can't figure out why.
Have you tried to use # before route name?
Like: myapp/#/about
Needs some guidance with respect to migrating my ngRoute configuration to a ui.router configuration. Currently I have one main template (index.html) and it has an ng-view where all views are injected. My current ngRoute config is as follows:
app.config(function ($routeProvider) {
$routeProvider
.when('/login', {
templateUrl: 'app/views/login.html',
controller: 'LoginCtrl'
})
.when('/contact', {
templateUrl: 'app/views/contact.html',
controller: 'ContactCtrl'
})
.when('/notification', {
templateUrl: 'app/views/notification.html',
controller: 'NotificationCtrl'
})
.otherwise({
redirectTo: '/login'
});
I now want to define a second place in index.html where I can inject some view content - not a nested view, but rather another ng-view (or ui-view in ui-router terminology). The original ng-view section is the default one (currently just for /login and /contact), and the new one is just for specific routes (currently just '/notification' but maybe others in the future). Lets call the new ui-view 'notification-view'.
I've gone through much of the ui-router documentation and still am unsure of how to migrate the above to the new ui.router config. Can someone get me started or point me toward some decent examples?
Update:
Ok, here is where I am. I've adding some states and a new ui-view to my index.html page. See below:
<div class="container">
<div id="header"></div>
<div data-ui-view></div>
<div data-ui-view="notification-view"></div>
</div>
My routing is now:
app.config(function ($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('/login');
$stateProvider
.state('login', {
url: '/login',
templateUrl: 'app/views/login.html',
controller: 'LoginCtrl'
})
.state('contact', {
url: '/contact',
templateUrl: 'app/views/contact.html',
controller: 'ContactCtrl'
})
.state('notification', {
url: '/notification',
views: {
"notification-view": {
templateUrl: 'app/views/notification.html',
controller: 'NotificationCtrl'
}
}
});
});
This seems to work ok for the most part. When the url /notification is triggered, the app is routed to the NotificationCtrl and renders ui-view content into the notification-view. However the only problem is that the ui content in the main (unnamed) ui-view is lost. I would like whatever is already rendered in the main ui-view to be untouched, and only target the notification-view. Is this possible? Does it have to instead be a nested-view?
When using ui.router, you should think in terms of states rather than routes. So instead of the $routeProvider you instead inject $stateProvider, plan out various states and work from there . So from your example above, we convert it to:
app.config(function ($stateProvider,$urlRouterProvider) {
$urlRouterProvider.otherwise('/');
$stateProvider
.state('login', {
url:'/login',
templateUrl: 'app/views/login.html',
controller: 'LoginCtrl'
})
.state('contact', {
url:'/contact',
templateUrl: 'app/views/contact.html',
controller: 'ContactCtrl'
})
.state('notification', {
url:'/notification',
templateUrl: 'app/views/notification.html',
controller: 'NotificationCtrl'
});
}
There's alot of methods for adding a "sub-view" to uirouter, one method is by adding a child state.
$stateProvider
.state('login', {
url:'/login',
templateUrl: 'app/views/login.html',
controller: 'LoginCtrl'
})
.state('login.error', {
url:'/login',
templateUrl: 'app/views/login-error-subview.html',
controller: 'LoginErrorCtrl'
})
Also as $stateProvider doesnt provide a default state handler, you will also need to inject in $urlRouterProvider. This is a provider that also comes with ui-router that is tasked with the responsibility of watching $location for changes.
The thing with ui-router is that you won't see a huge difference compared to the built-in route provider and ease of use it brings until you start using sub-states and stacked-states.
In your example above, ui.router wouldnt know what templte to use tor the ui-view and thus leaves it empty. You can give it a template and thus becomes:
...
.state('notification', {
url: '/notification',
views: {
'':{
templateUrl: 'app/views/notification-main.html',
controller: ''
}
'notification-view': {
templateUrl: 'app/views/notification.html',
controller: 'NotificationCtrl'
}
}
...
But from what I'm getting you want the login and contact to have the notification in it. So ideally you'd create a notification child state for each, as right now there is now way to declare wildcard or multiple parents for a child-state. Hopefully when v1.0 comes out there'll be support for this use-case already.
Below is a link from the docs that will get you upto speed:
https://github.com/angular-ui/ui-router/wiki/URL-Routing
https://github.com/angular-ui/ui-router/wiki/Nested-States-%26-Nested-Views
Right now i am using routeProvider to change between views which works awesome. But now i want to create a view which contains 4 different tabs which should contain 4 different controllers. ive read here that it could be done with stateProvider:
Angular ui tab with seperate controllers for each tab
here is my code:
var WorkerApp = angular.module("WorkerApp", ["ngRoute", 'ngCookies', "ui.bootstrap", "ngGrid", 'ngAnimate', 'ui.router']).config(function ($routeProvider, $stateProvider) {
$routeProvider.
when('/login', {
templateUrl: 'Home/Template/login', resolve: LoginCtrl.resolve
})
.when('/register', { templateUrl: 'Home/Template/register', resolve: RegisterCtrl.resolve })
.when('/', { templateUrl: 'Home/Template/main', resolve: MainCtrl.resolve })
.when('/profile', { templateUrl: 'Home/Template/profile', controller: "ProfileController" })
.when('/contact', { templateUrl: 'Home/Template/contact', controller: "ContactController" })
$stateProvider.state('tabs', {
abstract: true,
url: '/profile',
views: {
"tabs": {
controller: "ProfileController",
templateUrl: 'Home/Template/profile'
}
}
}).state('tabs.tab1', {
url: '/profile', //make this the default tab
views: {
"tabContent": {
controller: "ProfileController",
templateUrl: 'Home/Template/profile'
}
}
})
.state('tabs.tab2', {
url: '/tab2',
views: {
"tabContent": {
controller: 'Tab2Ctrl',
templateUrl: 'tab2.html'
}
}
});
});
but i cant get it really to work because default of routeprovider is set to send over to work because my routeprovider is sending over to "/" on default, which makes "/tabs" invalid. so i cant actully figure out if it is possible to switch to states on specific url. Or change state on specific URL in routeProvider?
I can't tell you for sure exactly what's wrong with the code you've provided, but I'm using Angular UI-Router with the same use case you described, and it's working for me. Here's how I have it configured and how it's different from your configuration:
I don't use $routeProvider at all (none of your $routeProvider.when statements). I'm pretty sure you should not be using $routeProvider since you're using $stateProvider.
I have one use of the $urlRouterProvider with an 'otherwise' statement to specify a default URL:
$urlRouterProvider.otherwise("/home");
My calls to $stateProvider.state is a little different from yours. Here's the one for the parent view of the tabs:
$stateProvider.state('configure', {
url: "/configure",
templateUrl: 'app/configure/configure.tpl.html',
controller: 'ConfigureCtrl'
});
Here's an example of the child state (really the same except for the state name being parent.child format, which you already have in your code; and I added a resolve block but you could have that on the parent as well):
$stateProvider.state('configure.student', {
url: "/student",
templateUrl: 'app/configure/student/configure.student.tpl.html',
controller: 'ConfigureStudentCtrl',
resolve: {
storedClassCode: function($q, user, configureService) {
return configureService.loadMyPromise($q, user);
}
}
});
Also, I'm using version 0.2.8 of Angular UI-Router with version 1.2.9 of Angular. I think this would work with any version of Angular 1.2.0 or later.