So I was wiring up my AngularUI State Views using the following code
$stateProvider
.state('dash.landing', {
url: '/',
templateUrl: '/partials/backup/dash/landing.html',
controller: 'LandingController'
})
.state('dash.order', {
url: '/overview',
templateUrl: '/partials/backup/dash/order/index.html',
controller: 'OrderController'
})
.state('dash.order.overview', {
url: '/overview',
templateUrl: '/partials/backup/dash/order/overview.html',
controller: 'OverviewController'
})
.state('dash.order.email-accounts', {
url: '/email-accounts',
templateUrl: '/partials/backup/dash/order/email-accounts.html'
})
.state('dash.order.alerts', {
url: '/alerts',
templateUrl: '/partials/backup/dash/order/alerts.html'
});
And for some reason my views were not being rendered and I was getting a $stateNotFound error telling me it could not find dash.landing. After 15 minutes of pulling my hair out I simply changed dash.landing' to just bedashand all of a sudden it worked perfectly! Can someone please explain why I can't usedash.landing` for the root route state name?
Yes, ui-router uses dot notation to implement parent/child relationships among views. You can use dot notation with the default routeProvider to name routes. You can also use dot notation to name application modules, letting other developers know there is a organizational hierarchy in place.
Related
I want to display posts for different cities, defined by cityId:
FlowRouter.route("/:cityId", {
name: 'postList',
action: function() {
console.log(FlowRouter.getParam("cityId"));
return BlazeLayout.render('mainLayout', {
top: 'header',
body: 'postList'
});
}
});
Alongside with that I of course have generic routes like 'admin', 'signup' and so on.
But when I go to /signup, the postList route gets activated, treating 'signup' word as a city id, and 'signup' is logged in console.
Defining route like FlowRouter.route("/postList/:cityId") is not an option.
Actually, you need to control route definition order.
define the /signup route before the generic one: /:cityId
I know that there are a lot of duplicates of this topic and I've found some articles which explain how to implement angularjs routeProvider with .cshtml, but it didn't help me. Here, in stackoverflow, there were some similar problems that I've looked at but it didn't help me either. Could you help me please.
Here is my angular module:
QuizApp.config(['$routeProvider',
function ($routeProvider) {
$routeProvider.
when('/index', {
templateUrl: '/home/index',
controller: 'QuizController' //new
}).
when('/quiz', {
templateUrl: '/home/quiz',
controller: 'QuizController' //new
}).
otherwise({
redirectTo: '/index'
});
}]);
If i join localhost:port/home/quiz - it works
If i join localhost:port/#/quiz - it is just show me default page (index).
ps. Guys, if you need some more information, just tell me please.
UPDATE 2.
Add a bit more code witch comments //new
Also I've found one defect that when i'm adding to my page:
<div ng-view></div>
Page just freeze, and I can't make anything on it.
Using Iron Router for Meteor, I know I can use the parameter 'only' or 'except' to match named routers when defining an onBeforeAction, like the example in the guide:
Router.onBeforeAction(myAdminHookFunction, {
only: ['admin']
});
Imagine I have a lot of views not needing this on before action, like public pages, and a lot needing it, like admin panel. Is there any way to apply this onBeforeAction to a group of routes without explicit list each one? I mean, for example, apply to all routes starting with '/admin', something like:
only: ['/admin/*']
Or maybe apply the onBeforeAction to a parent route and then define nested routes? (I can't find if Iron Route supports nested routes), something like:
Router.route('/admin/', {
name: 'admin',
onBeforeAction: function() {},
routes: [
{name: 'users', path: '/admin/users', action: function() {}},
{name: 'posts', path: '/admin/posts', action: function() {}}
]
})
I would suggest creating controllers. Create a "base" controller and extend it wherever needed.
I have a tabs with four tab, each has a route with same controller.
All four tabs share the same data, menu, but use different part of the data.
Every time I click a tab, will it do a subscribe to the server?
For example, the first time I click tab1, it will contact server and get the data menu, then I click tab2, will it contact server again to fetch data menu even I have already gotten the data?
If so, how can I avoid this? Maybe I should redesign the code, is there any good ideas?
MenuController = RouteController.extend({
layoutTemplate: 'menuLayout',
waitOn: function () { return Meteor.subscribe('menu', this.params._id); },
data: function () { return Menu.findOne({_id: this.params._id}) },
});
this.route('/menu/tab1', {
name: 'menu.tab1',
template: 'MenuTab1',
controller: MenuController,
});
this.route('/menu/tab2', {
name: 'menu.tab2',
template: 'MenuTab2',
controller: MenuController,
});
this.route('/menu/tab3', {
name: 'menu.tab3',
template: 'MenuTab3',
controller: MenuController,
});
this.route('/menu/tab4', {
name: 'menu.tab4',
template: 'MenuTab4',
controller: MenuController,
});
This has changed somewhat as IR has matured. I believe in the current implementation, if you change between routes which make the same subscription with the same parameters, the subscription will not be stopped and started again. In other words, switching between tabs should not start and stop the subscription (assuming this.params._id remains constant).
You can prove (or disprove) this by adding a console.log('here') to the first line of your menu publisher. When you switch tabs, check the command-line console. If 'here' is printed only once, you have the desired outcome.
Regardless of the outcome, subs-manager is the generally accepted solution for caching subscriptions between routes.
I have a question on how to configure the inbuilt login functionality URL in ASP.net MVC Angular template. The web api url for login is "Account/Login" .
I add an href in layout.cshtml file as shown below
<data-ng-class="{active : activeViewPath==='/contact'}">
<br>
< href='#/contact'>Contact</a></li>
<br>
< data-ng-class="{active : activeViewPath==='/Login'}">
<br>
< href='~/Account/Login'>Login</a></li>
Now when I click any link(demo) , the functional URL is :
://ayz.com/#/demo
When I click Login (works fine):
://ayz.com/Account/Login#/home
When I click demo again (Account/Login gets appended):
://ayz.com/Account/Login#/demo
How to correct this ?
$routeProvider
.when('/home', { templateUrl: '/home/main', controller: 'MainController' })
.when('/contact', { templateUrl: '/home/contact', controller: 'ContactController' })
.when('/about', { templateUrl: '/home/about', controller: 'AboutController' })
.when('/demo', { templateUrl: '/home/demo', controller: 'DemoController' })
.when('/product', { templateUrl: '/home/product', controller: 'ProductController' })
Make sure that ng-view /ng-route just changes the view that is a part of the angular only.!!
As you were already in: //ayz.com/Account/Login
//ayz.com/Account/Login#/home
When you click on demo, the view is just getting updated:
//ayz.com/Account/Login#/demo
Make sure, you use angular route for Account/Logon too.
Try getting the usage of hashbang too.!! Angular js uses that and just updates the part after that for ng-view.!!
Firstly when you were in demo: ayz.com/#/demo with no MVC routing.
And later on when you clicked on Accountlogin the url changed to ayz.com/Account/Logon/#home
and now when you clicked on demo, the last hasbang part of url "#/home" will just be changed to "#/demo" as you are now in Account/Login. And note that Angular routing works only for one ng-View in a single page.