Javascript 与嵌套视图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');
  })

基本上，我希望在一个静态页面中间有一个可变的视图。我不太清楚该怎么办。点击中间的按钮，把你带到中间的另一个视图，点击一个按钮，把你带到中间的另一个视图。等

这是我的angjjs网站，主图像是……我希望中间有一个表单。

我正在努力实现以下目标：请原谅MSpaint上的基本绘图

---

如果它只是一个按钮或链接，您应该能够执行以下操作：

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

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

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

---

不过有一个建议-使用

ngRoute

或

ui.router

，选择一个。至于使用哪一种，由你决定。我个人（有偏见）会选择

ui.router

，因为它提供了更多的功能，更优雅

如果您使用的是

ui.router

，那么当涉及到嵌套状态或嵌套视图或两者时，它就非常简单（干净整洁）。要做到这一点很简单。从您编写的代码中，您已经将

表单

作为父状态及其子状态，即

表单.profile

、

表单.interest

和

表单.payment

。现在请记住，在

form

状态下，您有一个视图，它是

form.html

，由名为

formController

的控制器控制。在

form.html

中，您需要包含

ui视图

指令，以便

表单的子状态驻留在那里

大概是这样的：

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



如果你仍然困惑，这里是帮助你理解“
谢谢”的地方，但是我宁愿有一个类似于我连接的应用程序的可见的视图/形式，而不是只在中间的一个按钮。你所谈论的不一定是“嵌套视图”。除非您愿意，否则您不必为此使用ui路由器。Angular的内置ng视图适用于此应用程序。它适用于多个页面吗？我希望该区域的中间部分与我刚才链接的应用程序教程几乎相同。但由于我的$route/nav条链接，它不起作用。我不认为ngRoute和ui.router应该同时使用。在使用ui.router时，可以使用$routeProvider，但它是一个垫片，可以帮助迁移到ui.router。也许从移除ngRoute开始，看看它从哪里开始。看：是的，这正是它想要做的。这里有一个非常好的使用ngRoute的教程。我不会使用ui路由器，除非我需要它。别误会我的意思，这很好，但如果你能用股票交易，我会这么做。
<!--This is your form.html-->
<div ui-view>
   <!--The child states of form will be populated here.-->
</div>