Confused with inested views angularJs

Question

Привет, я только что наткнулся на этот учебник. Это именно то, что я ищу. http://scotch.io/tutorials/angularjs-multi-step-form-using-ui-router

Однако я хочу, чтобы этот конкретный вид находился в середине моего уже существующего приложения. Известно ли это как вложенные представления? Однако, когда я пытался реализовать это приложение на своем веб-сайте ... страница не загружалась. Я думаю, что это связано с маршрутизацией в script.js? Можно ли использовать как $ routeProvider, так и $ 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'); 
    }) 

В основном я хочу сменять вид посередине одной статической страницы. Я не совсем уверен, как это сделать. Нажмите на кнопку посередине, перейдите к другому виду посередине, щелкните по кнопке, перейдите к другому виду посередине. и т.д.

Это мой сайт angularjs Где основное изображение ... Я хотел бы, чтобы в середине была форма.

Я пытаюсь добиться следующим: Пожалуйста, простите элементарный рисунок на MSPaint ...

Answer 1

Если это просто кнопка или ссылка, вы должны быть в состоянии сделать что-то вроде:

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

Или если, нажав на ссылку, он вызывает код в контроллере, вы можете воспользоваться услугой $ местоположения как:

$location.path('/about'); 

Конечно, это означает, что вы должны быть инъекционные услугу определения местоположения $ в контроллер, как,

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

Answer 2

Одно из предложений, хотя - использовать либо ngRoute или ui.router, выберите один. Что касается того, какой из них использовать, вам решать. Я лично (пристрастный) поеду за ui.router, так как он предоставляет гораздо больше функций и более изящный.

И тогда это довольно просто (чистая и аккуратная), если вы используете ui.router, когда приходит в вложенные состояния или вложенные виды или и то, и другое. Достичь этого довольно просто. Из кода, который вы написали, у вас уже есть form как родительское состояние со своими дочерними элементами, а именно form.profile, form.interest и form.payment. Теперь помните, что в состоянии form у вас есть вид, который равен form.html, и он управляется контроллером с именем formController. Внутри вашего form.html вам необходимо указать директиву ui-view для того, чтобы проживать в этом доме ребенка form.

Что-то вроде этого:

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

Если вы до сих пор путают, вот plnkr, который должен помочь вам с пониманием