2015-05-29 33 views
0

我是angularjs的新手,所以請考慮我的錯誤。重定向到角js中的新模板

的情況是,我有一個index.html頁面和頁面的login.html,指數和登錄都會有不同的佈局從而不同的頁眉頁腳和所有。 所有其他頁面預計登錄將與index.html共享相同的佈局

現在,我該如何使用anuglar ui路由器導航到login.html。

myApp.config(函數($ stateProvider,$ urlRouterProvider){

$stateProvider.state('home', { 
     url: '/', 
     templateUrl: 'app/views/site/home.html', 
     controller: 'homeCtrl' 
    }).state('login', { 
     url: '/login', 
     templateUrl: 'app/views/site/login.html' 
    }) 
}); 

這並不是因爲它的工作負擔登錄保持頁眉和頁腳相同指數的內容納入索引中。我知道國家是應該這樣的。

現在,有什麼辦法可以使用ui.router只需撥打一個完全新的看法。

我真的很感謝你的幫助。 感謝

回答

0

您可以設置多個命名視圖(https://github.com/angular-ui/ui-router/wiki/Multiple-Named-Views)。

這將允許您將頁眉和頁腳製作爲單獨的視圖,您可以將其切換進出。不過,我不認爲有一種方法可以完全替換整個頁面。

<body> 
    <header ui-view="header"></header> 
    <main ui-view="content"></main> 
    <footer ui-view="footer"></footer> 
</body> 

.state('login', { 
    views: { 
     'header': { ... templates and/or controllers ... }, 
     'content': { ... templates and/or controllers ... }, 
     'footer': { ... templates and/or controllers ... }, 
    } 
    }) 
0

我通過將我的整個佈局製作成模板來實現此目的。從本質上講,我index.html什麼比這更:

<html ng-app="appName" ng-strict-di> 
<head> 
    <title></title> 
</head> 
<body> 
    <div class="ng-cloak" ng-cloak ui-view></div> 
</body> 
</html> 

然後我用抽象狀態來創建模板區域。例如,我的身份驗證狀態:

$stateProvider 
    .state('auth', { 
    abstract: true, 
    url: '/auth', 
    template: '<div ui-view></div>' 
    }) 

    .state('auth.login', { 
    url: '/login', 
    templateUrl: 'auth/login.html', 
    controller: [ loginController], 
    controllerAs: 'vm' 
    }) 

    .state('auth.logout', { 
    url: '/logout', 
    resolve: { 
     logout: [ 'api', function (api) { 
     return api.getLogout().$promise; 
     }] 
    }, 
    controller: [ logoutController], 
    controllerAs: 'vm' 
    }); 

這將導致auth/login途徑來直接呈現到主ui-view在那裏可以有它自己獨特的佈局。同樣,我可能有一個抽象core狀態,它爲我的應用程序的核心部分設置了一個通用範圍和模板,它們都共享一個通用模板結構。

如果有觸及核心和AUTH部分,然後我用ng-include在這些個體的諧音,使重新使用的元素。