Confused with nested views angularJs

Question

Hi I've just came across this tutorial. It's this particular app is what I'm looking for. http://scotch.io/tutorials/angularjs-multi-step-form-using-ui-router

However I want this particular view to be in the middle of my already existing app. Is this is known as nested views? However when I tried to implement this app into my website...the page wouldn't load. I think this is due to the routing at script.js? Is it possible to use both $routeProvider and $Stateprovider?

//create our angular app and inject ngroute,nganimate and uirouter
var financeApp = angular.module('financeApp', ['ngRoute','ngAnimate','ui.router']);

 // configure our routes
  financeApp.config(function($routeProvider, $urlRouterProvider, $stateProvider) {


   $routeProvider
    // route for the home page
    .when('/', {
        templateUrl : 'partials/main.html',
        controller  : 'mainController'
    })

    // route for the about page
    .when('/about', {
        templateUrl : 'partials/about.html',
     })

     // route for the contact page
     .when('/contact', {
        templateUrl : 'partials/contact.html',
     })

     .otherwise({
        redirectTo: '/'
 })
});




$stateProvider

// route to show our basic form (/form)
.state('form', {
 url: '/form',
 templateUrl: 'form.html',
 controller: 'formController'
  })

   // nested states
   // each of these sections will have their own view
   // url will be nested (/form/profile)
   .state('form.profile', {
   url: '/profile',
   templateUrl: 'partials/form-profile.html'

 // url will be /form/interests
 .state('form.interests', {
url: '/interests',
templateUrl: 'form-interests.html'
})

 // url will be /form/payment
 .state('form.payment', {
url: '/payment',
templateUrl: 'form-payment.html'
 });

 // catch all route
 // send users to the form page 
 $urlRouterProvider.otherwise('/form/profile');
  })

Basically I want a changeable view in the middle of one static page. I'm not quite sure how to go about it. Click on a button in the middle, takes you to another view in the middle, click on a button, takes you to another view in the middle. etc

This is my angularjs website link Where the main image is...I would like there to be a form in the middle.

I am trying to achieve the following: Please forgive the rudimentary drawing on MSpaint...

enter image description here

What your are talking about isn't necessarily a "nested view". You don't have to use ui-router for this unless you want to. Angular's built-in ng-view would work for this application. — andrunix, Dec 23 '14 at 16:46
Would it work for multiple pages? I want the middle of the area to be nearly identical to the app tutorial I just linked. But it doesn't work because of my $route/nav bars link. — Superunknown, Dec 23 '14 at 16:53
I don't think ngRoute and ui.router are meant to be used at the same time. You can have a $routeProvider when using ui.router, but it's a shim to help migrate over to ui.router. Maybe start by removing ngRoute and see where it goes from there. See: http://stackoverflow.com/questions/19888519/using-routeprovider-with-stateprovider — naneer, Dec 23 '14 at 18:20
Yes, this is exactly what it is intended to do. Here's a pretty good tutorial using ngRoute, http://tutorials.jenkov.com/angularjs/routes.html. I wouldn't go with ui-router unless I had a need for it. Don't get me wrong, it is great but if you can do it with stock Angular, I would do that. — andrunix, Dec 23 '14 at 18:24

score 0 · Answer 1 · answered Dec 23 '14 at 16:34

0

If it is just a button or link, you should be able to do something like:

<a href="#about">About</a>

Or if by clicking on the link, it calls code in a controller, you can use the $location service like:

$location.path('/about');

Of course that means you have to be injecting the $location service into your controller like,

.controller('MyCtrl', ['$location', function($location) {
   // other code here
}

answered Dec 23 '14 at 16:34

andrunix

1,704
1
14
23

Thanks but I'd rather have a visible view/form similar to the app I linked rather than just a button in the middle. – Superunknown Dec 23 '14 at 16:44

score 0 · Answer 2 · answered Dec 24 '14 at 06:00

One suggestion though - use either ngRoute or ui.router, choose one. As for which one to use it's up to you to decide. I personally(biased) will go for ui.router since it provides much more features and is more elegant.

And then it is quite simple(clean and neat) if you are using ui.router when comes to nested states or nested views or both. To achieve it is quite simple. From the code that you have written, you have already form as parent state with its children, namely form.profile, form.interest, and form.payment. Now remember in the form state, you have a view which is form.html and it is governed by a controller called formController. Inside your form.html, you need to include a ui-view directive in order for form's child state to reside there.

Something like this :

<!--This is your form.html-->
<div ui-view>
   <!--The child states of form will be populated here.-->
</div>

If you are still confused, here is the plnkr that should help you with the understanding

Confused with nested views angularJs

2 Answers2