混淆了嵌套视图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服务，如：

$location.path('/about');

当然，这意味着您必须将$ location服务注入您的控制器，例如

.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可以帮助您理解