angularjs - How to structure two different headers with ui-router? -
i'm doing refactoring angularjs 1.4.2 , ui-router , i'm not sure proper architecture should change.
currently, using $state.go("main"); call main route , subsequent routes, separate components html page, controller, , service each. i'm thinking used because main content dynamic.
the header section hard coded index.html page guess quick fix. header content needed same pages.
what i'm attempting break out header html code index.html, 2 different header pages use new headercontroller , incorporate existing app structure, unless wrong architecture. have simple plunker try , working stand alone, it's not doing when click on buttons.
so have 2 questions, proper ui-router structure app 2 different headers , there may 1 or 2 more added in later? i'm assuming want use 2 different states this, rather use url routing, can use either one.
the second question is: why doesn't plunker work?
app.js
var myapp = angular.module('myapp', ['ui.router']); myapp.config(function($stateprovider, $urlrouterprovider) { document.write("in config!"); $stateprovider .state('headera', { url: "/headera", templateurl: "headera.html", controller: "headercontroller" }) .state('headerb', { url: "headerb", templateurl: "headerb.html", controller: "headercontroller" }) }); myapp.controller('headercontroller', function($scope) { document.write("in config!"); $scope.messagea = 'this headera!'; $scope.messageb = 'this headerb!'; }) headera.html
<div> {{messagea}} </div> headerb.html
<div> {{messageb}} </div> index.html
<!doctype html> <html ng-app="myapp"> <head> <link data-require="bootstrap-css@4.0.0-alpha.2" data-semver="4.0.0-alpha.2" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/css/bootstrap.min.css" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.2/angular.js" data-semver="1.5.2" data-require="angular.js.1.3@*"></script> <script src="http://angular-ui.github.io/ui-router/release/angular-ui-router.js"> <link rel="stylesheet" href="style.css" /> <script src="app.js"></script> </head> <!-- define angular controller --> <body ng-controller="headercontroller"> <p></p> <div ui-view=""></div> <p></p> <p></p> <a class="btn btn-primary" ui-sref="headera">headera</a> <p></p> <a class="btn btn-danger" ui-sref="headerb">headerb</a> </body> </html>
i ended recreating in codepen. whatever reason, couldn't either plunkr nor jsfiddle work properly.
multiple named views
ui router allows set multiple views in each state. simple need to:
1) name view in template
it's easy <div ui-view="header">
2) declare named view within state
$stateprovider.state( name, { views:{ header: { ... } main: { ... } } }) 
Comments
Post a Comment