I'm doing some refactoring with Angularjs 1.4.2 and ui-router and I'm not sure what the proper architecture should be for the change.
我正在使用Angularjs 1.4.2和ui-router进行一些重构,我不确定适当的架构应该用于改变。
Currently, we are using $state.go("main"); to call a main route and all subsequent routes, which are separate components with an html page, controller, and service for each. I'm thinking that was used because only the main content was dynamic.
目前,我们正在使用$ state.go(“main”);调用主路由和所有后续路由,这些路由是具有html页面,控制器和服务的单独组件。我认为这是因为只有主要内容是动态的。
The header section is hard coded into the index.html page as I guess it was a quick fix. The header content needed to be the same for all the pages.
标题部分硬编码到index.html页面中,因为我猜它是一个快速修复。所有页面的标题内容必须相同。
What I'm attempting to do is break out the header html code from the index.html, into two different header pages that use the a new headerController and incorporate it with the existing app structure, unless that is the wrong architecture. I have a simple plunker to try and get it working stand alone, but it's not doing anything when I click on the buttons.
我正在尝试做的是将index.html中的标头html代码分成两个不同的标题页,这些标题页使用新的headerController并将其与现有的app结构合并,除非这是错误的体系结构。我有一个简单的plunker尝试让它独立工作,但是当我点击按钮时它没有做任何事情。
So I have two questions, what is the proper ui-router structure for an app with two different headers and there may be one or two more added in later? I'm assuming I want to use two different states for this, rather than use url routing, but I can use either one.
所以我有两个问题,具有两个不同标题的应用程序的正确ui-router结构是什么,以后可能会添加一两个?我假设我想为此使用两种不同的状态,而不是使用url路由,但我可以使用其中任何一种。
The second question is: why doesn't my 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 is headerA!';
$scope.messageB = 'This is 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>
1 个解决方案
#1
1
I ended up recreating this in Codepen. For whatever reason, I couldn't get either Plunkr nor JSFiddle to work properly.
我最终在Codepen中重新创建了这个。无论出于何种原因,我无法让Plunkr或JSFiddle正常工作。
Multiple Named Views
UI Router allows you to set up multiple views in each state. You simple need to:
UI路由器允许您在每种状态下设置多个视图。你只需要:
1) Name the view in your template
It's as easy as <div ui-view="header">
它就像
2) Declare the named view within the state
$stateProvider.state( name, {
views:{
header: { ... }
main: { ... }
}
})
Resources
#1
1
I ended up recreating this in Codepen. For whatever reason, I couldn't get either Plunkr nor JSFiddle to work properly.
我最终在Codepen中重新创建了这个。无论出于何种原因,我无法让Plunkr或JSFiddle正常工作。
Multiple Named Views
UI Router allows you to set up multiple views in each state. You simple need to:
UI路由器允许您在每种状态下设置多个视图。你只需要:
1) Name the view in your template
It's as easy as <div ui-view="header">
它就像
2) Declare the named view within the state
$stateProvider.state( name, {
views:{
header: { ... }
main: { ... }
}
})