使用MEAN堆栈在表单提交时生成动态路由

Question

我想知道如何在提交表单时生成新的AngularJS（1.x）路线。简而言之，我正在构建一个类似于Facebook事件的事件创建应用程序（填写表单字段＆gt;提交表单＆gt;有一个任何人都可以访问的新事件路径。）

我99％肯定它涉及Angular的$RouteProvider，但似乎无法通过Google搜索找到该过程的下一步。这是表格的图片（可以添加几个比特，就像活动照片一样。）

基本上我需要能够：

1. 填写活动详情
2. 点击“创建活动按钮”
3. 生成新路线，并在该路线内填充表格字段信息
4. 通过Mongoose将此新数据写入MongoDB

非常感谢任何对教程或总体方向的参考。谢谢！

Answer 1

好的，这是一个非常复杂的问题，因为它包含了许多不同的问题，包括后端和前端。

我假设您知道如何将数据发送到后端引擎。所以这基本上是你需要的（读）：

参考文献：

（AngularJS路由）
https://scotch.io/tutorials/angular-routing-using-ui-router

（AngularJS Route params）
https://github.com/angular-ui/ui-router/wiki/URL-Routing

（在NodeJS中创建API）
https://scotch.io/tutorials/build-a-restful-api-using-node-and-express-4

（将数据保存到MongoDB）
http://www.jenniferbland.com/saving-data-to-mongodb-database-from-node-js-application-tutorial/
https://scotch.io/tutorials/using-mongoosejs-in-node-js-and-mongodb-applications

我强烈建议您使用Restangular来简化从AngularJS到服务器的http请求

Answer 2

当您的应用程序已加载时，您无法创建新路由，因为路由是在配置时创建的。但是，您可以创建一个动态路线。

所以，使用动态路线：

yoursite.com/events/ idEvent - ＆gt; idEvent是你的动态路径

我建议您使用 ui-router ，因为它更完整，更强大：  ui-router

所以，使用ui-router：

1 - 使用ui-router注册您的动态路由：

$stateProvider
  .state('app', {
  url: '/app'
  //here you can have a lot of configurations
  );

$stateProvider.state('app.event', {
  url: '/event/{idEvent}',
  //other configurations like controller, resolver, etc
})    

2 - 您可以使用以下方式将用户重定向到特定事件：

//You need to inject $state in your controller
$state.go('app.event', {idEvent: 1});
//This line will redirect the user to the event page with idEvent 1

3 - 要在控制器中访问您的ID，您可以使用：stateParams service

controller: function($stateParams){
   console.log($stateParams.idEvent);
}

要使用此方法，请确保注入使用ui-router所需的所有模块。

这可能是你的流程：

1. 填写活动详情
2. 点击“创建活动按钮”
3. 通过Mongoose将此新数据写入MongoDB
4. 将用户重定向到动态页面，加载该特定事件的内容

请注意，事件页面的控制器和模板应该能够处理加载动态内容。因此，构建您的控制器可以动态加载内容。

您也可以看到此文档：ui-router

简单说明：AngularJS Routing Using UI-Router

你会发现很多站点都展示了如何使用ui-router配置和构建路由。