how to use angular routing to nest 3 mvc razor models - asp.net-mvc

Question

I want to have a UsersAdmin view that has Account Registration, UserProfile class and a Identity Role class. I am using MVC5 with default Individual Authentication.
I am using ui-router for my routing. I have seen many examples using a viewmodel to pass multiple models to a single cshtml view. But I am needing a more complex setup. I created a mock up of what I am looking for. What is the best way to do this.
Here is what my setup looks like
ui-routing
// Default route
$urlRouterProvider.otherwise('/Document');
// Application Routes States
$stateProvider
.state('app', {
abstract: true,
controller: "CoreController",
resolve: {
_assets: Route.require('icons', 'toaster', 'animate')
}
})
.state('app.document', {
url: '/Document',
templateUrl: Route.base('Document/Index'),
resolve: {}
})
.state('app.register', {
url: '/Register',
templateUrl: Route.base('Account/Register'),
resolve: {}
}).state('app.applicationUser', {
url: '/ApplicationUser',
templateUrl: Route.base('ApplicationUsers/Index'),
resolve: {}
}).state('app.role', {
url: '/Role',
templateUrl: Route.base('Role/Index'),
resolve: {}
}).state('app.roleCreate', {
url: '/RoleCreate',
templateUrl: Route.base('Role/Create'),
resolve: {}
}).state('app.userProfile', {
url: '/UserProfile',
templateUrl: Route.base('UserProfiles/Index'),
resolve: {}
}).state('app.userProfileCreate', {
url: '/UserProfileCreate',
templateUrl: Route.base('UserProfiles/Create'),
resolve: {}
}).state('app.login', {
url: '/Login',
templateUrl: Route.base('Account/Login'),
resolve: {}
});
}
_Layout.cshtml
<div ui-view class="app-container" ng-controller="CoreController">#RenderBody()</div>
Navigation
<li>
<a ui-sref="app.userProfile" title="Layouts" ripple="">
<em class="sidebar-item-icon icon-pie-graph"></em>
<span>User Profile</span>
</a>
</li>
I have no issue using modals for the Create,Details,Edit views if that is a easier solution. However I do not know how to pass the selected Id with its properties to the modal.

Answer 1

I believe that I answered your question to someone else. You want to gather information through the URL, right?
Using routes in AngularJS to gather data

Answer 2

ui-router can help you achieve this by using
a.
ui-sref='stateName({param: value, param: value})'
The parameterr object passed along with the state name can be accessed in the controller using $stateParams
b.
In your controller you could do something like
if ($stateParams.id != null) {
// service call goes here
}
c. You need to use named views
Something like
$stateProvider
.state('report', {
views: {
'filters': { ... templates and/or controllers ... },
'tabledata': {},
'graph': {},
}
})
where
filters
and
tabledate
are the named views.
ui-view has a decent example for it here https://github.com/angular-ui/ui-router/wiki/Multiple-Named-Views
Btw , I would suggest you first figure out the panels which are dynamic ( i.e the ones whose content changes because of some kind of user interaction ) vs static ones ( they dont change once loaded) . You should only be looking at ui-views to replace the dynamic parts , there is no point in making the app more complicated by putting everything in a child view . The states can become very confusing very quickly.
I use the ng-include directive to load the static views in the parent state and only define child states for portion of the views that change.
<div ng-include="'/MyStaticView'" ng-show="MyCondition == true "></div>