與嵌套視圖混淆angularJs

嗨，我剛剛遇到本教程。這是特定的應用程序是我正在尋找。 http://scotch.io/tutorials/angularjs-multi-step-form-using-ui-router 與嵌套視圖混淆angularJs

但是我希望這個特定的視圖位於我現有的應用程序中。這是否被稱爲嵌套視圖？但是，當我試圖將這個應用程序實施到我的網站...頁面不會加載。我認爲這是由於在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'); 
    })

基本上我想要一個靜態頁面中間的可變視圖。我不太清楚如何去做。點擊中間的一個按鈕，將您帶到中間的另一個視圖，點擊一個按鈕，將您帶到中間的另一個視圖。 etc

這是我的angularjs網站 link 主要圖像是...我希望有一個形式在中間。

我努力實現以下目標：請原諒MSPAINT上簡陋的圖畫......

enter image description here

來源

2014-12-23 Superunknown

是什麼你在談論不一定是「嵌套視圖」。除非你想，否則你不必爲此使用ui-router。 Angular的內置ng視圖可以用於這個應用程序。 – andrunix

它可以用於多個頁面嗎？我希望該區域的中間部分與我剛剛鏈接的應用程序教程幾乎相同。但它不起作用，因爲我的$ route/nav bar鏈接。 – Superunknown

我不認爲ngRoute和ui.router是同時使用的。使用ui.router時，你可以有一個$ routeProvider，但它可以幫助你遷移到ui.router。也許從刪除ngRoute開始，看看它從哪裏去。請參閱：http://stackoverflow.com/questions/19888519/using-routeprovider-with-stateprovider – naneer

如果它只是一個按鈕或鏈接，你應該能夠做這樣的事情：

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

或者，如果通過單擊鏈接上，它在一個控制器調用的代碼，你可以使用像$位置服務：

$location.path('/about');

當然，這意味着你必須要注入$位置服務到您的控制器等組成，

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

來源

2014-12-23 16:34:31 andrunix

謝謝，但我寧願有一個可見的視圖/形式類似於我鏈接的應用程序，而不僅僅是一箇中間的按鈕。 – Superunknown

一個建議，但 - 請使用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應該幫助你理解

來源

2014-12-24 06:00:34 CozyAzure

與嵌套視圖混淆angularJs

回答

相關問題