Question

我正在尝试使用AngularJS创建非常简单的网站

我有一个控制器：

NGLesson.controller('Pages_Contents', ['$scope', function ($scope) {
        $scope.homePage =
                {
                    pageURI: 'home',
                    pageName: 'Home',
                    pageDescription: 'Bla bla bla',
                    pageContent: 'Bla Bla Bla Bla blabla'
                };
        $scope.aboutPage =
                {
                    pageURI: 'about',
                    pageName: 'About',
                    pageDescription: 'Bla bla bla',
                    pageContent: 'Bla Bla Bla Bla blabla'
                };
            // And so on...
    }]);

我有路由器规则：

NGLesson.config(['$routeProvider',
    function ($routeProvider) {
        $routeProvider.
                when('/home', {
                    templateUrl: 'templates/content-container.html',
                    controller: 'Pages_Contents'
                }).
                when('/about', {
                    templateUrl: 'templates/content-container.html',
                    controller: 'Pages_Contents'
                }).
                otherwise({
                    templateUrl: 'templates/something-else.html'
                });
    }]);

我还有基本的模板模板/ content-container.html。但我不知道它里面放了什么参数。这个有效： {{homePage.pageContent}} 但当然只适用于主页。

我最初尝试使用不同的控制器，但似乎我必须在路由器的 when（）功能中设置不同的控制器。那是不同的模板，它是一些愚蠢的kinf。

我自己无法理解。有没有简单的解决方案？你能给我一些建议吗？非常感谢你提前！

Answer 1

您不需要不同的控制器，但建议。

通常，您需要创建一个HTML模板，并使用Angular为动态内容添加它。

如果您有静态内容，您也可以将其包含在模板中而不是Angular中。

您可以为您的关于页面执行此操作。

NGLesson.controller('About_Contents', ['$scope', function ($scope) {
        $scope.aboutPage =
                {
                    pageURI: 'about',
                    pageName: 'About',
                    pageDescription: 'Bla bla bla',
                    pageContent: 'Bla Bla Bla Bla blabla'
                };
            // And so on...
    }]);

然后将此控制器添加到路由器配置中，并将ng-controller="About_Contents"添加到HTML

Answer 2

正确的路线配置应如下所示：

NGLesson.config(['$routeProvider',
    function ($routeProvider) {
        $routeProvider.
                when('/home', {
                    templateUrl: 'templates/home.html',
                    controller: 'homeController'
                }).
                when('/about', {
                    templateUrl: 'about',
                    controller: 'aboutController'
                }).
                otherwise({
                   redirectTo: '/home'
                }));
    }]);

通常每条路线都有一个控制器/模板

Angularjs页面内容根据路由器中设置的页面而变化

2 个答案: