使用AngularJS组织代码的最佳方式是什么?

What is the best way to organize code using AngularJS?

本文关键字：最佳 方式 是什么 代码 AngularJS 使用      更新时间：2023-09-26

我正在创建一个应用程序，有一个使用ui路由器，所有的html数据附加到这个标签:

 <div class="app" ui-view >

但我想包括页眉和页脚到我的应用程序，我的问题是-是更好地使用史密斯这样在index.html:

<div ng-controller="top" header></div>
  <div class="app" ui-view >
<div ng-controller="bottom" footer></div>

或者我应该在每个html页面中包含两个指令- header &页脚。

为什么不让这些东西都是自定义元素指令，有自己的控制器?这样的话，你可以这样设置:

<ui-header></ui-header>
<ui-view></ui-view>
<ui-footer></ui-footer>

这是"AngularJS的方式"。它使HTML更具可读性，也更简洁。这些指令中的每一个都有一个模板，要么是字符串模板，要么是在创建指令时指向的文件模板。它看起来像这样:

app.directive('uiHeader', function() {
  return {
    restrict: 'E',
    templateUrl: '/path/to/template.html',
  };
});

上面的代码将把模板文件的内容放在<ui-header></ui-header>所在的位置。也可以为每个指令定义一个控制器，并允许每个指令有自己的作用域。你可以在这里阅读更多关于创建自定义指令的信息。

我通常使用的是一个抽象状态的布局，所有其他状态继承。

$stateProvider
    .state('e', {
        abstract: true,
        controller: 'WhateverController',
        templateUrl: 'layout.html',
    })
    .state('e.home', {
        url: '/',
        templateUrl: 'home.html'
    })

你的布局看起来像这样:

`<div class="header">
     Some content
</div>
<div ui-view></div>
<div class="footer">
   Footer Content
</div>`
相关文章：