{var%20f='http://v.t.sina.com.cn/share/share.php?appkey=1515056452',u=z||d.location,p=['&url=',e(u),'&title=',e(t||d.title),'&source=',e(r),'&sourceUrl=',e(l),'&content=',c||'gb2312','&pic=',e(p||'')].join('');function%20a(){if(!window.open([f,p].join(''),'mb',['toolbar=0,status=0,resizable=1,width=440,height=430,left=',(s.width-440)/2,',top=',(s.height-430)/2].join('')))u.href=[f,p].join('');};if(/Firefox/.test(navigator.userAgent))setTimeout(a,0);else%20a();})(screen,document,encodeURIComponent,'','','https://www.manongdao.com/data/attach/logo/logo.png', '推荐 傲 的问题《Multiple ng-views for homepage in angularjs》','https://www.manongdao.com/q-638193.html','页面编码gb2312|utf-8默认gb2312'));){kind=link}
Okay i am new to angular, just started working with ngRoute and ngView directives, i have come across something that is an issue for me but i suspect is only an issue due to my lack of expereince in angluar.
I have the following markup(simplified) on my index.html page:
<html>
<head>
<title>Sample APP</title>
</head>
<body>
<div class="header">
<nav class="pull-right">...</nav>
</div>
<div class="main" ng-view>
</div>
<div class="footer">
</div>
</body>
</html>
The above is the default layout structure that my page uses. Now my issue is for the home page alone, a slider is shown within the div with the class "header". Like this:
<div class="header">
<nav class="pull-right">...</nav>
<div class="slider">...</div>
<div>
Now this is for the homepage only so i'm totally confused about how to implement this. Do i need two ng-view directives on my index page? eg:
<html>
<head>
<title>Sample APP</title>
</head>
<body>
<div class="header">
<nav class="pull-right">...</nav>
<div class="slider" ng-view>...</div>
</div>
<div class="main" ng-view>
</div>
<div class="footer">
</div>
</body>
</html>
Also if you need to know why i am doing it this way, it is simply because i bought an html template online, now i am trying to integrate angularjs into the template.
There would be only single
ng-viewon a single page. It won't possible to have multipleng-view. If you want to load other partials then you need to useng-includedirective.Ui-router best option which has supported the multiple views which can be nested on into the other, you could take the advantage of nested views.
You could have query params here in Angular UI Router like in format
url: '/test?oneParam&twoParam'whereas this feature doesn't support inng-routeI would suggest you to take switch from
ng-routetoui-route, which has great control overurl,templates&statesYou can only have one
ng-view.However , it is possible to change its content in several ways:
ng-include,ng-switchor mapping different controllers and templates through the routeProvider.You can also look into using ui-router, which allows for multiple parallel views.
Here is an example of multiple views using ui-router.