处理 MEAN Stack 中的批量 URL答案

【问题标题】：Handling bulk URLs in MEAN Stack处理 MEAN Stack 中的批量 URL
【发布时间】：2016-03-01 18:40:18
【问题描述】：

我正在 MEAN 堆栈上实现一个 CRUD 系统，可以创建、编辑和删除课程。我想知道如何管理我创建的每门课程的 URL。我正在使用路由提供程序。我是否必须编写看起来像这样的代码 - ？

 $routeProvider 
        .when('/courses/course1', 
            {
                templateUrl: '/partials/course1',
                controller: 'CourseCtrl1'
            }
         )
        .when('/courses/course2', 
            {
                templateUrl: '/partials/course2',
                controller: 'CourseCtrl2'
            }
         )
        .when('/courses/course3', 
            {
                templateUrl: '/partials/course3',
                controller: 'CourseCtrl3'
            }
        )
        ...

或者是否有一些图书馆/工厂可以帮助我简化这个过程？

由于我计划开设 100 多门课程，每门课程都有自己的唯一 URL，因此上述方法似乎不可行。我有两个问题

如何处理多个课程的 URL 而无需编写 routeprovider 中有数百行重复代码？
既然我计划使这个 CRUD 系统成为一种小型的 CMS 设置，是否有可能每次添加新课程时自动生成 URL（例如如何 Drupal 和 Wordpress 管理它）？

我在这个问题上苦苦挣扎。我希望我已经提供了足够的细节来回答这个问题，或者请让我知道，以便我提供更多细节。提前致谢！

【问题讨论】：

标签： javascript angularjs node.js express mean-stack

【解决方案1】：

也许是这样？：

.when('/courses', 
        {
            templateUrl: '/partials/coursesList',
            controller: 'CoursesListCtrl'
        }
     )
    .when('/courses/:courseNumber', 
        {
            templateUrl: '/partials/singleCourse',
            controller: 'SingleCourseCtrl'
        }
     )

【讨论】：

【解决方案2】：

由于您使用 Node.js 和 express 标记了问题，因此使用 Express.js 的方式：

创建路由器并配置它

var CoursesListCtrl = require('./CoursesListCtrl');

var router = express.Router();
router.get('/courses', CoursesListCtrl.getAll);
router.get('/course/:id', CoursesListCtrl.getById);

创建应用，将路由器注册为中间件并开始监听

var app = express();
app.use(router);
app.listen(3000); // 3000 is the port you are listening to

CoursesListCtrl 可能类似于

module.exports = {
    getAll: function(req, res){
        /** Get all courses from db */
        res.status(200).send(courses);
    },
    getById: function(req, res){
        var courseId = req.params['id'];
        /** Get course from db by id */
        res.status(200).send(course);
    }
}

【讨论】：

【解决方案3】：

您使用的方式是旧的东西。 Angular 现在提供 $stateProvider 服务，您可以使用它创建状态，从而更轻松地为每个 url 生成状态，并且在状态之间切换也更容易，因为您不需要每次都记住完整的 url。您需要添加 angular-ui-router 库。

var app  =  angular.module('myApp', ['ui.router']);
app.config(function($stateProvider, $urlRouterProvider) {
  $stateProvider
  .state('login', {
    url: '/login',
    templateUrl: '/login/login.html',
    controller: 'loginController',
  })
  .state('reset', {
    url: '/reset-password',
    templateUrl: '/login/reset.html',
    controller: 'resetController',     
  })

})

然后在控制器中，您可以像这样使用 $state 服务轻松切换状态：

app.controller('resetController',['$state',function($state) {
    $state.go("login");    
  }   
]);

【讨论】：