Question

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

 $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多门课程，每门课程都有自己独特的网址，因此上述方法似乎并不可行。我有两个问题

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

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

Answer 1

也许这样？：

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

Answer 2

由于您使用Node.js标记了问题并表达了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);
    }
}

Answer 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");    
  }   
]);

处理MEAN堆栈中的批量URL

3 个答案: