Angularjs頁面內容根據路由器設置

我想創建非常簡單的網站與AngularJS網頁更改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}}但當然只爲主頁。

我也嘗試過使用不同的控制器，但似乎我不得不在（）功能在路由器中設置不同的控制器。這意味着不同的模板，這是一些愚蠢的愛。

我無法自己想象它。有沒有簡單的解決方案？你能給我一些建議嗎？非常感謝您提前！

來源

2014-10-07 Maria Zelenova

你不需要不同的控制器，但建議。

通常，您會創建一個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

來源

2014-10-07 18:05:37

正確的路由配置應該是這樣的：

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

通常你必須每每條路由一個控制器/模板

來源

2014-10-07 18:05:50

Angularjs頁面內容根據路由器設置

回答

相關問題