Question

我是Angular的新手，并尝试使用angular和bootstrap构建一个静态网站。这是我到目前为止所做的创建导航（和使用相同方法的页脚）添加到网站中的每个页面。有没有更好的（更有效的）方法使用Angular构建模板？这是每个人为这些类型的应用程序做的事情吗？

＆＃13;

app.directive("mynav", function () {
	return {
		restrict: "A",
		template: "<nav class='navbar navbar-default' role='navigation'><div class='navbar-inner'><div class='container-fluid'><div class='navbar-header'><button type='button' class='navbar-toggle collapsed' data-toggle='collapse' data-target='#menu-nav'><span class='sr-only'>Toggle navigation</span><span class='icon-bar'></span><span class='icon-bar'></span><span class='icon-bar'></span></button><a class='navbar-brand' href='#'><img alt='img' src='img/logo.svg' height='30'></a></div><div class='collapse navbar-collapse' id='menu-nav'><ul class='nav navbar-nav navbar-right'><li><a href='pages/home.html'>Home</a></li><li><a href='pages/about.html'>About</a></li><li><a href='pages/service.html'>Services</a></li><li><a href='pages/product.html'>Rental Products</a></li><li><a href='pages/contact.html'>Contact</a></li><button type='button' class='btn btn-primary navbar-btn'>Request A Quote</button></ul></div></div></div></nav>"
	}
});

＆＃13;

<header mynav></header>

＆＃13;

Answer 1

如果您的导航栏也像页脚一样是静态的，则可以将其从ng-view

中排除

您的html结构可能类似于：

<html> <head>...</head> <body> <div mynav></div> <div ng-view></div> <div my-footer></div> </body> </html>

在这种情况下，导航栏也会像页脚一样静态。因此，您的所有观看次数都将加载到<div ng-view></div>和mynav，my-footer div将不受影响。

此外，在您的指令中，您可以使用template替换内联templateUrl。创建一个新的HTML，比如my-nav.html并使用templateUrl: "path/to/my-nav.html"，

Answer 2

你不需要静态html的指令。

通常你有一个 shell页面（主页面），在其中放置应该在所有（或大多数）页面上的所有部分。然后使用angular的 ng-view （如果使用ui-router进行路由，则使用ui-view）将视图加载到该页面。

这样的事情：

<html ng-app='app'>
    <head>...</head>
    <body>
        <div ng-controller="navbarCtrl as vm">
           <div ng-include="'navbar.html'"></div>
        </div>

        <!-- Your main view loads here, along with its controller 
             as defined in your routing (check ngRoute or ui-router for more)-->
        <div ng-view></div>

        <footer>Your footer comes here (or can be ng-included)</footer>
    </body>
</html>

Answer 3

在https://docs.angularjs.org/guide/directive处查看自定义指令。

你的指令将是这样的：

app.directive('name', function() {
  restrict: 'E',
  templateUrl: 'page-title'.html
}

这是一种更好的方式，不仅更整洁，而且渲染速度更快。我从有角度的网站指出的学校代码免费课程中学到了这一点。

注意：通过渲染时间，我的意思是在javascript和html都被填充之后将加载ng-include。

使用AngularJS为每个页面添加导航和页脚

3 个答案: