Question

我一直在使用其他MVC框架，但我是AngularJS的新手并遇到了一个问题。我有一个名为“Projects”的控制器，路径是/ projects，但我希望能够做/ projects / java，我会调用新的页面模板/视图并显示该内容。

我如何在AngularJS中执行此操作？有没有办法为项目创建动作，还是我必须做其他事情？

angular
    .module('konradApp', [
        'ngRoute'
    ])
    .config(function ($routeProvider) {
        $routeProvider
            .when('/', {
                title        : 'Welcome',
                templateUrl  : 'views/main.html',
                controller   : 'MainCtrl',
                controllerAs : 'main'
            })
            .when('/about', {
                title        : 'About',
                templateUrl  : 'views/about.html',
                controller   : 'AboutCtrl',
                controllerAs : 'about'
            })
            .when('/projects', {
                title        : 'Projects',
                templateUrl  : 'views/projects.html',
                controller   : 'ProjectsCtrl',
                controllerAs : 'projects'
            })
            .when('/contact', {
                title        : 'Contact',
                templateUrl  : 'views/contact.html',
                controller   : 'ContactCtrl',
                controllerAs : 'contact'
            })
            .otherwise({
                redirectTo : '/'
            });
    });

控制器：

angular.module('konradApp')
    .controller('ProjectsCtrl', function () {

    });

Answer 1

您希望使用名为$ routeParams的内容执行此操作，这样您就可以编写视图代码。因此，您的路线配置变为：

.config(function ($routeProvider) {
    $routeProvider
        .when('/', {
            title        : 'Welcome',
            templateUrl  : 'views/main.html',
            controller   : 'MainCtrl',
        })
        .when('/:view', {
            title        :  function($routeParams){return $routeParams.view},
            templateUrl  : function(params){return 'views/'+params.view+'.html'},
            controller   : function($routeParams){return $routeParams.view+'Ctrl'},
        })

        .otherwise({
            redirectTo : '/'
        });
});

Answer 2

您追求的是添加嵌套视图的方法。请参阅ui-router文档，了解如何执行此操作：https://github.com/angular-ui/ui-router/wiki/Nested-States-%26-Nested-Views

我们的想法是在projects.html中添加一个嵌套的ui-view，并为子视图添加子路径。

AngularJS将Action添加到Controller

2 个答案: