angularjs +boostrap后台模板实现原理

ng+bootstrap可以做出很漂亮的管理系统出来，https://wrapbootstrap.com/可以付费购买，下文会提供一个免费的，要讲解如何从0到1把ng前端结构搭出来是很漫长的教程，本文仅仅介绍一下这个免费后台模版的结构，然后重点讲解如何改写这个结构。
开始阅读之前，假设读者已经ng入门并且对于ui.router,bootstrap有一定了解。

---

下载链接http://pan.baidu.com/s/1o73ewfK
下载下来以后我们可以挂载到IIS里面看看这个模版的运行效果

---

1) 后台结构

其中我们需要关注的如下：

index.html： 入口
js： 存放所有业务逻辑代码
js/app.js：定义ng需要加载的模块
js/main.js：定义ng的全局配置信息
js/config.router.js：ng的路由器
tpl：存放所有页面模版
tpl/blocks：页面框架（头、尾、侧边栏…)
vendor：存放所有第三方模块

---

2) 改写结构，接管路由

结构简图如下

这里接管的原则是尽量不改动原始结构,首先在根目录创建我们自己的目录结构.

<code class="hljs markdown has-numbering"><span class="hljs-blockquote">> mkdir admin</span>
<span class="hljs-blockquote">> mkdir admin\blocks</span>
<span class="hljs-blockquote">> copy js\main.js admin\</span></code><ul style="opacity: 0.175627;" class="pre-numbering"><li>1</li><li>2</li><li>3</li></ul><ul style="" class="pre-numbering"><li>1</li><li>2</li><li>3</li></ul>

编写页面框架模版，我们也可以直接从tpl目录复制过来再做修改。简单起见，我们在模版里面直接使用了中文，这样会导致页面乱码，解决方法：html文件用utf-8编码格式存储。

<code class="hljs xml has-numbering"><span class="hljs-comment"><!--admin/blocks/aside.html--></span>
<span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"aside-wrap"</span>></span>
  <span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"navi-wrap"</span>></span>
    <span class="hljs-comment"><!-- nav --></span>
    <span class="hljs-tag"><<span class="hljs-title">nav</span> <span class="hljs-attribute">ui-nav</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"navi"</span> <span class="hljs-attribute">ng-include</span>=<span class="hljs-value">"'admin/blocks/nav.html'"</span>></span><span class="hljs-tag"></<span class="hljs-title">nav</span>></span>
    <span class="hljs-comment"><!-- nav --></span>
  <span class="hljs-tag"></<span class="hljs-title">div</span>></span>
<span class="hljs-tag"></<span class="hljs-title">div</span>></span></code><ul style="opacity: 0.175627;" class="pre-numbering"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li></ul><ul style="" class="pre-numbering"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li></ul>

<code class="hljs handlebars has-numbering"><span class="xml"><span class="hljs-comment"><!--admin/blocks/header.html--></span>
      <span class="hljs-comment"><!-- navbar header --></span>
      <span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"navbar-header </span></span></span><span class="hljs-expression">{{<span class="hljs-variable">app.settings.navbarHeaderColor</span>}}</span><span class="xml"><span class="hljs-tag"><span class="hljs-value">"</span>></span>
        <span class="hljs-tag"><<span class="hljs-title">button</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"pull-right visible-xs dk"</span> <span class="hljs-attribute">ui-toggle-class</span>=<span class="hljs-value">"show"</span> <span class="hljs-attribute">data-target</span>=<span class="hljs-value">".navbar-collapse"</span>></span>
          <span class="hljs-tag"><<span class="hljs-title">i</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"glyphicon glyphicon-cog"</span>></span><span class="hljs-tag"></<span class="hljs-title">i</span>></span>
        <span class="hljs-tag"></<span class="hljs-title">button</span>></span>
        <span class="hljs-tag"><<span class="hljs-title">button</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"pull-right visible-xs"</span> <span class="hljs-attribute">ui-toggle-class</span>=<span class="hljs-value">"off-screen"</span> <span class="hljs-attribute">data-target</span>=<span class="hljs-value">".app-aside"</span> <span class="hljs-attribute">ui-scroll</span>=<span class="hljs-value">"app"</span>></span>
          <span class="hljs-tag"><<span class="hljs-title">i</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"glyphicon glyphicon-align-justify"</span>></span><span class="hljs-tag"></<span class="hljs-title">i</span>></span>
        <span class="hljs-tag"></<span class="hljs-title">button</span>></span>
        <span class="hljs-comment"><!-- brand --></span>
        <span class="hljs-tag"><<span class="hljs-title">a</span> <span class="hljs-attribute">href</span>=<span class="hljs-value">"#/"</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"navbar-brand text-lt"</span>></span>
          <span class="hljs-tag"><<span class="hljs-title">i</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"fa fa-btc"</span>></span><span class="hljs-tag"></<span class="hljs-title">i</span>></span>
          <span class="hljs-tag"><<span class="hljs-title">img</span> <span class="hljs-attribute">src</span>=<span class="hljs-value">"img/logo.png"</span> <span class="hljs-attribute">alt</span>=<span class="hljs-value">"."</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"hide"</span>></span>
          <span class="hljs-tag"><<span class="hljs-title">span</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"hidden-folded m-l-xs"</span>></span></span><span class="hljs-expression">{{<span class="hljs-variable">app.name</span>}}</span><span class="xml"><span class="hljs-tag"></<span class="hljs-title">span</span>></span>
        <span class="hljs-tag"></<span class="hljs-title">a</span>></span>
        <span class="hljs-comment"><!-- / brand --></span>
      <span class="hljs-tag"></<span class="hljs-title">div</span>></span>
      <span class="hljs-comment"><!-- / navbar header --></span>

      <span class="hljs-comment"><!-- navbar collapse --></span>
      <span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"collapse pos-rlt navbar-collapse box-shadow </span></span></span><span class="hljs-expression">{{<span class="hljs-variable">app.settings.navbarCollapseColor</span>}}</span><span class="xml"><span class="hljs-tag"><span class="hljs-value">"</span>></span>
        <span class="hljs-comment"><!-- buttons --></span>
        <span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"nav navbar-nav hidden-xs"</span>></span>
          <span class="hljs-tag"><<span class="hljs-title">a</span> <span class="hljs-attribute">href</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"btn no-shadow navbar-btn"</span> <span class="hljs-attribute">ng-click</span>=<span class="hljs-value">"app.settings.asideFolded = !app.settings.asideFolded"</span>></span>
            <span class="hljs-tag"><<span class="hljs-title">i</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"fa </span></span></span><span class="hljs-expression">{{<span class="hljs-variable">app.settings.asideFolded</span> ? '<span class="hljs-variable">fa-indent</span>' : '<span class="hljs-variable">fa-dedent</span>'}}</span><span class="xml"><span class="hljs-tag"><span class="hljs-value"> fa-fw"</span>></span><span class="hljs-tag"></<span class="hljs-title">i</span>></span>
          <span class="hljs-tag"></<span class="hljs-title">a</span>></span>
        <span class="hljs-tag"></<span class="hljs-title">div</span>></span>
        <span class="hljs-comment"><!-- / buttons --></span>

        <span class="hljs-comment"><!-- nabar right --></span>
        <span class="hljs-tag"><<span class="hljs-title">ul</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"nav navbar-nav navbar-right"</span>></span>
          <span class="hljs-tag"><<span class="hljs-title">li</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"hidden-xs"</span>></span>
            <span class="hljs-tag"><<span class="hljs-title">a</span> <span class="hljs-attribute">ui-fullscreen</span>></span><span class="hljs-tag"></<span class="hljs-title">a</span>></span>
          <span class="hljs-tag"></<span class="hljs-title">li</span>></span>
          <span class="hljs-tag"><<span class="hljs-title">li</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"dropdown"</span> <span class="hljs-attribute">dropdown</span>></span>
            <span class="hljs-tag"><<span class="hljs-title">a</span> <span class="hljs-attribute">href</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"dropdown-toggle clear"</span> <span class="hljs-attribute">dropdown-toggle</span>></span>
              <span class="hljs-tag"><<span class="hljs-title">span</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"thumb-sm avatar pull-right m-t-n-sm m-b-n-sm m-l-sm"</span>></span>
                <span class="hljs-tag"><<span class="hljs-title">img</span> <span class="hljs-attribute">src</span>=<span class="hljs-value">"img/a0.jpg"</span> <span class="hljs-attribute">alt</span>=<span class="hljs-value">"..."</span>></span>
                <span class="hljs-tag"><<span class="hljs-title">i</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"on md b-white bottom"</span>></span><span class="hljs-tag"></<span class="hljs-title">i</span>></span>
              <span class="hljs-tag"></<span class="hljs-title">span</span>></span>
              <span class="hljs-tag"><<span class="hljs-title">span</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"hidden-sm hidden-md"</span>></span><span class="hljs-tag"></<span class="hljs-title">span</span>></span> <span class="hljs-tag"><<span class="hljs-title">b</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"caret"</span>></span><span class="hljs-tag"></<span class="hljs-title">b</span>></span>
            <span class="hljs-tag"></<span class="hljs-title">a</span>></span>
            <span class="hljs-comment"><!-- dropdown --></span>
            <span class="hljs-tag"><<span class="hljs-title">ul</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"dropdown-menu animated fadeInRight w"</span>></span>
              <span class="hljs-tag"><<span class="hljs-title">li</span>></span>
                <span class="hljs-tag"><<span class="hljs-title">a</span> <span class="hljs-attribute">href</span>=<span class="hljs-value">"#"</span>></span>Logout<span class="hljs-tag"></<span class="hljs-title">a</span>></span>
              <span class="hljs-tag"></<span class="hljs-title">li</span>></span>
            <span class="hljs-tag"></<span class="hljs-title">ul</span>></span>
            <span class="hljs-comment"><!-- / dropdown --></span>
          <span class="hljs-tag"></<span class="hljs-title">li</span>></span>
        <span class="hljs-tag"></<span class="hljs-title">ul</span>></span>
        <span class="hljs-comment"><!-- / navbar right --></span>

      <span class="hljs-tag"></<span class="hljs-title">div</span>></span>
      <span class="hljs-comment"><!-- / navbar collapse --></span></span></code><ul style="opacity: 0.175627;" class="pre-numbering"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li><li>10</li><li>11</li><li>12</li><li>13</li><li>14</li><li>15</li><li>16</li><li>17</li><li>18</li><li>19</li><li>20</li><li>21</li><li>22</li><li>23</li><li>24</li><li>25</li><li>26</li><li>27</li><li>28</li><li>29</li><li>30</li><li>31</li><li>32</li><li>33</li><li>34</li><li>35</li><li>36</li><li>37</li><li>38</li><li>39</li><li>40</li><li>41</li><li>42</li><li>43</li><li>44</li><li>45</li><li>46</li><li>47</li><li>48</li><li>49</li><li>50</li><li>51</li><li>52</li><li>53</li><li>54</li><li>55</li></ul><ul style="" class="pre-numbering"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li><li>10</li><li>11</li><li>12</li><li>13</li><li>14</li><li>15</li><li>16</li><li>17</li><li>18</li><li>19</li><li>20</li><li>21</li><li>22</li><li>23</li><li>24</li><li>25</li><li>26</li><li>27</li><li>28</li><li>29</li><li>30</li><li>31</li><li>32</li><li>33</li><li>34</li><li>35</li><li>36</li><li>37</li><li>38</li><li>39</li><li>40</li><li>41</li><li>42</li><li>43</li><li>44</li><li>45</li><li>46</li><li>47</li><li>48</li><li>49</li><li>50</li><li>51</li><li>52</li><li>53</li><li>54</li><li>55</li></ul>

<code class="hljs xml has-numbering"><span class="hljs-comment"><!--admin/blocks/nav.html--></span>
<span class="hljs-comment"><!-- list --></span>
<span class="hljs-tag"><<span class="hljs-title">ul</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"nav"</span>></span>
  <span class="hljs-tag"><<span class="hljs-title">li</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"hidden-folded padder m-t m-b-sm text-muted text-xs"</span>></span>
    <span class="hljs-tag"><<span class="hljs-title">span</span> <span class="hljs-attribute">translate</span>=<span class="hljs-value">"导航"</span>></span>导航<span class="hljs-tag"></<span class="hljs-title">span</span>></span>
  <span class="hljs-tag"></<span class="hljs-title">li</span>></span>  
<span class="hljs-tag"></<span class="hljs-title">ul</span>></span>
<span class="hljs-comment"><!-- / list --></span></code><ul style="opacity: 0.175627;" class="pre-numbering"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li></ul><ul style="" class="pre-numbering"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li></ul>

<code class="hljs handlebars has-numbering"><span class="xml"><span class="hljs-comment"><!--admin/app.html--></span>
  <span class="hljs-comment"><!-- navbar --></span>
  <span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">data-ng-include</span>=<span class="hljs-value">" 'admin/blocks/header.html' "</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"app-header navbar"</span>></span>
  <span class="hljs-tag"></<span class="hljs-title">div</span>></span>
  <span class="hljs-comment"><!-- / navbar --></span>

  <span class="hljs-comment"><!-- menu --></span>
  <span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">data-ng-include</span>=<span class="hljs-value">" 'admin/blocks/aside.html' "</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"app-aside hidden-xs </span></span></span><span class="hljs-expression">{{<span class="hljs-variable">app.settings.asideColor</span>}}</span><span class="xml"><span class="hljs-tag"><span class="hljs-value">"</span>></span>
  <span class="hljs-tag"></<span class="hljs-title">div</span>></span>
  <span class="hljs-comment"><!-- / menu --></span>

  <span class="hljs-comment"><!-- content --></span>
  <span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"app-content"</span>></span>
    <span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">ui-butterbar</span>></span><span class="hljs-tag"></<span class="hljs-title">div</span>></span>
    <span class="hljs-tag"><<span class="hljs-title">a</span> <span class="hljs-attribute">href</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"off-screen-toggle hide"</span> <span class="hljs-attribute">ui-toggle-class</span>=<span class="hljs-value">"off-screen"</span> <span class="hljs-attribute">data-target</span>=<span class="hljs-value">".app-aside"</span> ></span><span class="hljs-tag"></<span class="hljs-title">a</span>></span>
    <span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">ncy-breadcrumb</span>></span><span class="hljs-tag"></<span class="hljs-title">div</span>></span>
    <span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"app-content-body fade-in-up"</span> <span class="hljs-attribute">ui-view</span>></span><span class="hljs-tag"></<span class="hljs-title">div</span>></span>
  <span class="hljs-tag"></<span class="hljs-title">div</span>></span>
  <span class="hljs-comment"><!-- /content --></span>

  <span class="hljs-comment"><!-- footer --></span>
  <span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"app-footer wrapper b-t bg-light"</span>></span>
    <span class="hljs-tag"><<span class="hljs-title">span</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"pull-right"</span>></span></span><span class="hljs-expression">{{<span class="hljs-variable">app.version</span>}}</span><span class="xml"> <span class="hljs-tag"><<span class="hljs-title">a</span> <span class="hljs-attribute">href</span> <span class="hljs-attribute">ui-scroll</span>=<span class="hljs-value">"app"</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"m-l-sm text-muted"</span>></span><span class="hljs-tag"><<span class="hljs-title">i</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"fa fa-long-arrow-up"</span>></span><span class="hljs-tag"></<span class="hljs-title">i</span>></span><span class="hljs-tag"></<span class="hljs-title">a</span>></span><span class="hljs-tag"></<span class="hljs-title">span</span>></span>
    &copy; 2016 Copyright.
  <span class="hljs-tag"></<span class="hljs-title">div</span>></span>
  <span class="hljs-comment"><!-- / footer --></span>

  <span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">data-ng-include</span>=<span class="hljs-value">" 'tpl/blocks/settings.html' "</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"settings panel panel-default"</span>></span>
  <span class="hljs-tag"></<span class="hljs-title">div</span>></span></span></code><ul style="opacity: 0.175627;" class="pre-numbering"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li><li>10</li><li>11</li><li>12</li><li>13</li><li>14</li><li>15</li><li>16</li><li>17</li><li>18</li><li>19</li><li>20</li><li>21</li><li>22</li><li>23</li><li>24</li><li>25</li><li>26</li><li>27</li><li>28</li><li>29</li></ul><ul style="" class="pre-numbering"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li><li>10</li><li>11</li><li>12</li><li>13</li><li>14</li><li>15</li><li>16</li><li>17</li><li>18</li><li>19</li><li>20</li><li>21</li><li>22</li><li>23</li><li>24</li><li>25</li><li>26</li><li>27</li><li>28</li><li>29</li></ul>

给我们的首页创建一个空白模版admin/dashboard.html

<code class="hljs xml has-numbering"><span class="hljs-comment"><!--admin/dashboard.html--></span></code><ul style="opacity: 0.175627;" class="pre-numbering"><li>1</li></ul><ul style="" class="pre-numbering"><li>1</li></ul>

写我们新的路由

<code class="hljs php has-numbering"><span class="hljs-comment">// admin/router.js</span>
<span class="hljs-string">'use strict'</span>;

app
  .run(
      <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">(<span class="hljs-variable">$rootScope</span>,   <span class="hljs-variable">$state</span>,   <span class="hljs-variable">$stateParams</span>)</span> {</span>
          <span class="hljs-variable">$rootScope</span>.<span class="hljs-variable">$state</span> = <span class="hljs-variable">$state</span>;
          <span class="hljs-variable">$rootScope</span>.<span class="hljs-variable">$stateParams</span> = <span class="hljs-variable">$stateParams</span>;        
      }
  )
.config(
      <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">(<span class="hljs-variable">$stateProvider</span>,   <span class="hljs-variable">$urlRouterProvider</span>)</span> {</span>
          <span class="hljs-variable">$urlRouterProvider</span>
              .otherwise(<span class="hljs-string">'/app/dashboard'</span>);
          <span class="hljs-variable">$stateProvider</span>
              .state(<span class="hljs-string">'app'</span>, {
                  <span class="hljs-keyword">abstract</span>: <span class="hljs-keyword">true</span>,
                  url: <span class="hljs-string">'/app'</span>,
                  templateUrl: <span class="hljs-string">'admin/app.html'</span>,
              })
              .state(<span class="hljs-string">'app.dashboard'</span>, {
                  url: <span class="hljs-string">'/dashboard'</span>,
                  templateUrl: <span class="hljs-string">'admin/dashboard.html'</span>,
              })
      }
  );</code><ul style="opacity: 0.175627;" class="pre-numbering"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li><li>10</li><li>11</li><li>12</li><li>13</li><li>14</li><li>15</li><li>16</li><li>17</li><li>18</li><li>19</li><li>20</li><li>21</li><li>22</li><li>23</li><li>24</li><li>25</li><li>26</li></ul><ul style="" class="pre-numbering"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li><li>10</li><li>11</li><li>12</li><li>13</li><li>14</li><li>15</li><li>16</li><li>17</li><li>18</li><li>19</li><li>20</li><li>21</li><li>22</li><li>23</li><li>24</li><li>25</li><li>26</li></ul>

修改入口，注释或删除掉对原config.router.js、main.js的引用，换成我们的控制接管

<code class="hljs xml has-numbering"><span class="hljs-comment"><!--index.html--></span>
...
  <span class="hljs-comment"><!--<script src="js/config.router.js"></script>--></span>
  <span class="hljs-comment"><!--<script src="js/main.js"></script>--></span>
  <span class="hljs-tag"><<span class="hljs-title">script</span> <span class="hljs-attribute">src</span>=<span class="hljs-value">"admin/router.js"</span>></span><span class="javascript"></span><span class="hljs-tag"></<span class="hljs-title">script</span>></span>
  <span class="hljs-tag"><<span class="hljs-title">script</span> <span class="hljs-attribute">src</span>=<span class="hljs-value">"admin/main.js"</span>></span><span class="javascript"></span><span class="hljs-tag"></<span class="hljs-title">script</span>></span>
...</code><ul style="opacity: 0.175627;" class="pre-numbering"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li></ul><ul style="" class="pre-numbering"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li></ul>

到此我们就得到了一套可自由扩展的前端框架

---

3) 接下来我们基于BasicAuth加入系统的用户验证功能。

这里我们采用按功能模块来建立子目录，区别于原模版框架（原框架是按文件类型区分子目录，例如脚本放在js/里面，模版放在tpl里面）。

首先启动Restful服务器，然后我们为服务器配置一个全局变量，代码里面的host需要修改成服务器真实地址

<code class="hljs r has-numbering">// admin/main.js
<span class="hljs-keyword">...</span>
      $scope.app = {
        host: <span class="hljs-string">"http://172.17.9.92:8000"</span>,
        name: <span class="hljs-string">'Angulr'</span>,
<span class="hljs-keyword">...</span></code><ul style="opacity: 0.175627;" class="pre-numbering"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li></ul><ul style="" class="pre-numbering"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li></ul>

创建认证功能模块目录auth

<code class="hljs markdown has-numbering"><span class="hljs-blockquote">> mkdir admin\auth\</span></code><ul style="opacity: 0.175627;" class="pre-numbering"><li>1</li></ul><ul style="" class="pre-numbering"><li>1</li></ul>

编写controller(控制器)

<code class="hljs php has-numbering"><span class="hljs-comment">// admin/auth/ctrl.js</span>
app.controller(<span class="hljs-string">'LoadingController'</span>,<span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">(<span class="hljs-variable">$scope</span>,<span class="hljs-variable">$resource</span>,<span class="hljs-variable">$state</span>)</span>{</span>
    <span class="hljs-keyword">var</span> <span class="hljs-variable">$com</span> = <span class="hljs-variable">$resource</span>(<span class="hljs-variable">$scope</span>.app.host + <span class="hljs-string">"/auth/info/?"</span>);
    <span class="hljs-variable">$com</span>.get(<span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">()</span>{</span>
        <span class="hljs-variable">$state</span>.go(<span class="hljs-string">'app.dashboard'</span>);
    },<span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">()</span>{</span>
        <span class="hljs-variable">$state</span>.go(<span class="hljs-string">'auth.login'</span>);
    })  
});
app.controller(<span class="hljs-string">'LoginController'</span>,<span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">(<span class="hljs-variable">$scope</span>,<span class="hljs-variable">$state</span>,<span class="hljs-variable">$http</span>,<span class="hljs-variable">$resource</span>,Base64)</span>{</span>
    <span class="hljs-variable">$scope</span>.login = <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">()</span>{</span>
        <span class="hljs-variable">$scope</span>.authError = <span class="hljs-string">""</span>
        <span class="hljs-keyword">var</span> authdata = Base64.encode(<span class="hljs-variable">$scope</span>.user.username + <span class="hljs-string">':'</span> + <span class="hljs-variable">$scope</span>.user.password);
        <span class="hljs-variable">$http</span>.defaults.headers.common[<span class="hljs-string">'Authorization'</span>] = <span class="hljs-string">'Basic '</span> + authdata;
        <span class="hljs-keyword">var</span> <span class="hljs-variable">$com</span> = <span class="hljs-variable">$resource</span>(<span class="hljs-variable">$scope</span>.app.host + <span class="hljs-string">"/auth/info/?"</span>);
        <span class="hljs-variable">$com</span>.get(<span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">()</span>{</span>
            <span class="hljs-variable">$state</span>.go(<span class="hljs-string">'app.dashboard'</span>);
        },<span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">()</span>{</span>
            <span class="hljs-variable">$scope</span>.authError = <span class="hljs-string">"服务器登录错误"</span>
        })
    }
});
app.factory(<span class="hljs-string">'Base64'</span>,<span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">()</span>{</span>
    <span class="hljs-keyword">var</span> keyStr = <span class="hljs-string">'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/='</span>;
    <span class="hljs-keyword">return</span> {
        encode: <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">(input)</span> {</span>
            <span class="hljs-keyword">var</span> output = <span class="hljs-string">""</span>;
            <span class="hljs-keyword">var</span> chr1, chr2, chr3 = <span class="hljs-string">""</span>;
            <span class="hljs-keyword">var</span> enc1, enc2, enc3, enc4 = <span class="hljs-string">""</span>;
            <span class="hljs-keyword">var</span> i = <span class="hljs-number">0</span>;

            <span class="hljs-keyword">do</span> {
                chr1 = input.charCodeAt(i++);
                chr2 = input.charCodeAt(i++);
                chr3 = input.charCodeAt(i++);

                enc1 = chr1 >> <span class="hljs-number">2</span>;
                enc2 = ((chr1 & <span class="hljs-number">3</span>) << <span class="hljs-number">4</span>) | (chr2 >> <span class="hljs-number">4</span>);
                enc3 = ((chr2 & <span class="hljs-number">15</span>) << <span class="hljs-number">2</span>) | (chr3 >> <span class="hljs-number">6</span>);
                enc4 = chr3 & <span class="hljs-number">63</span>;

                <span class="hljs-keyword">if</span> (isNaN(chr2)) {
                    enc3 = enc4 = <span class="hljs-number">64</span>;
                } <span class="hljs-keyword">else</span> <span class="hljs-keyword">if</span> (isNaN(chr3)) {
                    enc4 = <span class="hljs-number">64</span>;
                }

                output = output +
                    keyStr.charAt(enc1) +
                    keyStr.charAt(enc2) +
                    keyStr.charAt(enc3) +
                    keyStr.charAt(enc4);
                chr1 = chr2 = chr3 = <span class="hljs-string">""</span>;
                enc1 = enc2 = enc3 = enc4 = <span class="hljs-string">""</span>;
            } <span class="hljs-keyword">while</span> (i < input.length);

            <span class="hljs-keyword">return</span> output;
        },

        decode: <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">(input)</span> {</span>
            <span class="hljs-keyword">var</span> output = <span class="hljs-string">""</span>;
            <span class="hljs-keyword">var</span> chr1, chr2, chr3 = <span class="hljs-string">""</span>;
            <span class="hljs-keyword">var</span> enc1, enc2, enc3, enc4 = <span class="hljs-string">""</span>;
            <span class="hljs-keyword">var</span> i = <span class="hljs-number">0</span>;

            <span class="hljs-comment">// remove all characters that are not A-Z, a-z, 0-9, +, /, or =</span>
            <span class="hljs-keyword">var</span> base64test = /[^A-Za-z0-<span class="hljs-number">9</span>\+\/\=]/g;
            <span class="hljs-keyword">if</span> (base64test.exec(input)) {
                window.alert(<span class="hljs-string">"There were invalid base64 characters in the input text.\n"</span> +
                    <span class="hljs-string">"Valid base64 characters are A-Z, a-z, 0-9, '+', '/',and '='\n"</span> +
                    <span class="hljs-string">"Expect errors in decoding."</span>);
            }
            input = input.replace(/[^A-Za-z0-<span class="hljs-number">9</span>\+\/\=]/g, <span class="hljs-string">""</span>);

            <span class="hljs-keyword">do</span> {
                enc1 = keyStr.indexOf(input.charAt(i++));
                enc2 = keyStr.indexOf(input.charAt(i++));
                enc3 = keyStr.indexOf(input.charAt(i++));
                enc4 = keyStr.indexOf(input.charAt(i++));

                chr1 = (enc1 << <span class="hljs-number">2</span>) | (enc2 >> <span class="hljs-number">4</span>);
                chr2 = ((enc2 & <span class="hljs-number">15</span>) << <span class="hljs-number">4</span>) | (enc3 >> <span class="hljs-number">2</span>);
                chr3 = ((enc3 & <span class="hljs-number">3</span>) << <span class="hljs-number">6</span>) | enc4;

                output = output + String.fromCharCode(chr1);

                <span class="hljs-keyword">if</span> (enc3 != <span class="hljs-number">64</span>) {
                    output = output + String.fromCharCode(chr2);
                }
                <span class="hljs-keyword">if</span> (enc4 != <span class="hljs-number">64</span>) {
                    output = output + String.fromCharCode(chr3);
                }

                chr1 = chr2 = chr3 = <span class="hljs-string">""</span>;
                enc1 = enc2 = enc3 = enc4 = <span class="hljs-string">""</span>;

            } <span class="hljs-keyword">while</span> (i < input.length);

            <span class="hljs-keyword">return</span> output;
        }
    };
})
</code><ul style="opacity: 0.175627;" class="pre-numbering"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li><li>10</li><li>11</li><li>12</li><li>13</li><li>14</li><li>15</li><li>16</li><li>17</li><li>18</li><li>19</li><li>20</li><li>21</li><li>22</li><li>23</li><li>24</li><li>25</li><li>26</li><li>27</li><li>28</li><li>29</li><li>30</li><li>31</li><li>32</li><li>33</li><li>34</li><li>35</li><li>36</li><li>37</li><li>38</li><li>39</li><li>40</li><li>41</li><li>42</li><li>43</li><li>44</li><li>45</li><li>46</li><li>47</li><li>48</li><li>49</li><li>50</li><li>51</li><li>52</li><li>53</li><li>54</li><li>55</li><li>56</li><li>57</li><li>58</li><li>59</li><li>60</li><li>61</li><li>62</li><li>63</li><li>64</li><li>65</li><li>66</li><li>67</li><li>68</li><li>69</li><li>70</li><li>71</li><li>72</li><li>73</li><li>74</li><li>75</li><li>76</li><li>77</li><li>78</li><li>79</li><li>80</li><li>81</li><li>82</li><li>83</li><li>84</li><li>85</li><li>86</li><li>87</li><li>88</li><li>89</li><li>90</li><li>91</li><li>92</li><li>93</li><li>94</li><li>95</li><li>96</li><li>97</li><li>98</li><li>99</li><li>100</li><li>101</li><li>102</li><li>103</li></ul><ul style="" class="pre-numbering"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li><li>10</li><li>11</li><li>12</li><li>13</li><li>14</li><li>15</li><li>16</li><li>17</li><li>18</li><li>19</li><li>20</li><li>21</li><li>22</li><li>23</li><li>24</li><li>25</li><li>26</li><li>27</li><li>28</li><li>29</li><li>30</li><li>31</li><li>32</li><li>33</li><li>34</li><li>35</li><li>36</li><li>37</li><li>38</li><li>39</li><li>40</li><li>41</li><li>42</li><li>43</li><li>44</li><li>45</li><li>46</li><li>47</li><li>48</li><li>49</li><li>50</li><li>51</li><li>52</li><li>53</li><li>54</li><li>55</li><li>56</li><li>57</li><li>58</li><li>59</li><li>60</li><li>61</li><li>62</li><li>63</li><li>64</li><li>65</li><li>66</li><li>67</li><li>68</li><li>69</li><li>70</li><li>71</li><li>72</li><li>73</li><li>74</li><li>75</li><li>76</li><li>77</li><li>78</li><li>79</li><li>80</li><li>81</li><li>82</li><li>83</li><li>84</li><li>85</li><li>86</li><li>87</li><li>88</li><li>89</li><li>90</li><li>91</li><li>92</li><li>93</li><li>94</li><li>95</li><li>96</li><li>97</li><li>98</li><li>99</li><li>100</li><li>101</li><li>102</li><li>103</li></ul>

编写template(模版)

<code class="hljs xml has-numbering"><span class="hljs-comment"><!--admin/auth/loading.html--></span>
<span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"form-group"</span> <span class="hljs-attribute">ng-controller</span>=<span class="hljs-value">"LoadingController"</span>></span>
    <span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"col-md-12 text-center"</span>></span>
        <span class="hljs-tag"><<span class="hljs-title">span</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"glyphicon glyphicon-refresh glyphicon-refresh-animate"</span>></span><span class="hljs-tag"></<span class="hljs-title">span</span>></span>&nbsp;&nbsp;loading...
    <span class="hljs-tag"></<span class="hljs-title">div</span>></span>
<span class="hljs-tag"></<span class="hljs-title">div</span>></span></code><ul style="opacity: 0.175627;" class="pre-numbering"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li></ul><ul style="" class="pre-numbering"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li></ul>

<code class="hljs xml has-numbering"><span class="hljs-comment"><!--admin/auth/login.html--></span>
<span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"container w-xxl w-auto-xs"</span> <span class="hljs-attribute">ng-controller</span>=<span class="hljs-value">"LoginController"</span>></span>
  <span class="hljs-tag"><<span class="hljs-title">a</span> <span class="hljs-attribute">href</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"navbar-brand block m-t"</span>></span>{{app.name}}<span class="hljs-tag"></<span class="hljs-title">a</span>></span>
  <span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"m-b-lg"</span>></span>
    <span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"wrapper text-center"</span>></span>
      <span class="hljs-tag"><<span class="hljs-title">strong</span>></span>Sign in to get in touch<span class="hljs-tag"></<span class="hljs-title">strong</span>></span>
    <span class="hljs-tag"></<span class="hljs-title">div</span>></span>
    <span class="hljs-tag"><<span class="hljs-title">form</span> <span class="hljs-attribute">name</span>=<span class="hljs-value">"form"</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"form-validation"</span>></span>
      <span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"list-group list-group-sm"</span>></span>
        <span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"list-group-item"</span>></span>
          <span class="hljs-tag"><<span class="hljs-title">input</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">"text"</span> <span class="hljs-attribute">placeholder</span>=<span class="hljs-value">"username"</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"form-control no-border"</span> <span class="hljs-attribute">ng-model</span>=<span class="hljs-value">"user.username"</span> <span class="hljs-attribute">required</span>></span>
        <span class="hljs-tag"></<span class="hljs-title">div</span>></span>
        <span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"list-group-item"</span>></span>
           <span class="hljs-tag"><<span class="hljs-title">input</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">"password"</span> <span class="hljs-attribute">placeholder</span>=<span class="hljs-value">"password"</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"form-control no-border"</span> <span class="hljs-attribute">ng-model</span>=<span class="hljs-value">"user.password"</span> <span class="hljs-attribute">required</span>></span>
        <span class="hljs-tag"></<span class="hljs-title">div</span>></span>
      <span class="hljs-tag"></<span class="hljs-title">div</span>></span>
      <span class="hljs-tag"><<span class="hljs-title">button</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">"submit"</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"btn btn-lg btn-primary btn-block"</span> <span class="hljs-attribute">ng-click</span>=<span class="hljs-value">"login()"</span> <span class="hljs-attribute">ng-disabled</span>=<span class="hljs-value">'form.$invalid'</span>></span>Log in<span class="hljs-tag"></<span class="hljs-title">button</span>></span>
      <span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"line line-dashed"</span>></span><span class="hljs-tag"></<span class="hljs-title">div</span>></span>
      <span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"text-danger wrapper text-center"</span> <span class="hljs-attribute">ng-show</span>=<span class="hljs-value">"authError"</span>></span>
          {{authError}}
      <span class="hljs-tag"></<span class="hljs-title">div</span>></span>
    <span class="hljs-tag"></<span class="hljs-title">form</span>></span>
  <span class="hljs-tag"></<span class="hljs-title">div</span>></span>
<span class="hljs-tag"></<span class="hljs-title">div</span>></span></code><ul style="opacity: 0.175627;" class="pre-numbering"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li><li>10</li><li>11</li><li>12</li><li>13</li><li>14</li><li>15</li><li>16</li><li>17</li><li>18</li><li>19</li><li>20</li><li>21</li><li>22</li><li>23</li><li>24</li></ul><ul style="" class="pre-numbering"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li><li>10</li><li>11</li><li>12</li><li>13</li><li>14</li><li>15</li><li>16</li><li>17</li><li>18</li><li>19</li><li>20</li><li>21</li><li>22</li><li>23</li><li>24</li></ul>

改写路由

<code class="hljs r has-numbering">// admin/router.js
<span class="hljs-keyword">...</span>
          $urlRouterProvider
              .otherwise(<span class="hljs-string">'/auth/loading'</span>);
          $stateProvider
              .state(<span class="hljs-string">'auth'</span>,{
                  abstract: true,
                  url:<span class="hljs-string">'/auth'</span>,
                  template: <span class="hljs-string">'<div ui-view class="fade-in"></div>'</span>,
                  resolve: {
                      deps: [<span class="hljs-string">'$ocLazyLoad'</span>,
                        <span class="hljs-keyword">function</span>( $ocLazyLoad ){
                          <span class="hljs-keyword">return</span> $ocLazyLoad.load(<span class="hljs-string">'admin/auth/ctrl.js'</span>);
                      }]
                  }
              })
              .state(<span class="hljs-string">'auth.loading'</span>,{
                  url:<span class="hljs-string">'/loading'</span>,
                  templateUrl:<span class="hljs-string">'admin/auth/loading.html'</span>,
              })
              .state(<span class="hljs-string">'auth.login'</span>,{
                  url:<span class="hljs-string">'/login'</span>,
                  templateUrl:<span class="hljs-string">'admin/auth/login.html'</span>,
              })

<span class="hljs-keyword">...</span></code><ul style="opacity: 0.175627;" class="pre-numbering"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li><li>10</li><li>11</li><li>12</li><li>13</li><li>14</li><li>15</li><li>16</li><li>17</li><li>18</li><li>19</li><li>20</li><li>21</li><li>22</li><li>23</li><li>24</li><li>25</li><li>26</li></ul><ul style="" class="pre-numbering"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li><li>10</li><li>11</li><li>12</li><li>13</li><li>14</li><li>15</li><li>16</li><li>17</li><li>18</li><li>19</li><li>20</li><li>21</li><li>22</li><li>23</li><li>24</li><li>25</li><li>26</li></ul>

代码挺多，就不逐行解释了，最核心的就是:
用Base64加密[用户名:密码]，在请求头加入 Authorization: Basic [加密串]

<code class="hljs php has-numbering"><span class="hljs-keyword">var</span> authdata = Base64.encode(username + <span class="hljs-string">":"</span> + password);        <span class="hljs-variable">$http</span>.defaults.headers.common[<span class="hljs-string">'Authorization'</span>] = <span class="hljs-string">'Basic '</span> + authdata;</code><ul style="opacity: 0.175627;" class="pre-numbering"><li>1</li></ul><ul style="" class="pre-numbering"><li>1</li></ul>

改完以后重新访问，将实现流程图中的home->loading->login->dashboard。
事情还没完，我们再重新访问，又会重复这个流程，并不会自动登录，这是因为BasicAuth的特性是在每一次web请求的时候都需要加入Authorization请求头才行。所以我们还要做点工作：1.登录成功以后将authdata存在本地，2.给全局http请求统一加入这个请求头

<code class="hljs r has-numbering">// admin/auth/ctrl.js
<span class="hljs-keyword">...</span>
app.controller(<span class="hljs-string">'LoginController'</span>,<span class="hljs-keyword">function</span>($scope,$state,$http,$resource,Base64,$localStorage)
<span class="hljs-keyword">...</span>
        $com.get(<span class="hljs-keyword">function</span>(){
            $localStorage.auth = authdata;
            $state.go(<span class="hljs-string">'app.dashboard'</span>);
        },<span class="hljs-keyword">function</span>(){
            $scope.authError = <span class="hljs-string">"服务器登录错误"</span>
        })
<span class="hljs-keyword">...</span>
</code><ul style="opacity: 0.175627;" class="pre-numbering"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li><li>10</li><li>11</li><li>12</li></ul><ul style="" class="pre-numbering"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li><li>10</li><li>11</li><li>12</li></ul>

<code class="hljs php has-numbering"><span class="hljs-comment">// admin/router.js</span>
app
.run(
    <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">(<span class="hljs-variable">$rootScope</span>,   <span class="hljs-variable">$state</span>,   <span class="hljs-variable">$stateParams</span>,<span class="hljs-variable">$localStorage</span>,<span class="hljs-variable">$http</span>)</span> {</span>
          <span class="hljs-variable">$http</span>.defaults.headers.common[<span class="hljs-string">'Authorization'</span>] = <span class="hljs-string">'Basic '</span> + <span class="hljs-variable">$localStorage</span>.auth;
          <span class="hljs-variable">$rootScope</span>.<span class="hljs-variable">$state</span> = <span class="hljs-variable">$state</span>;
          <span class="hljs-variable">$rootScope</span>.<span class="hljs-variable">$stateParams</span> = <span class="hljs-variable">$stateParams</span>;
      }
  )
...</code><ul style="opacity: 0.175627;" class="pre-numbering"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li><li>10</li></ul><ul style="" class="pre-numbering"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li><li>10</li></ul>

重新刷新首页，页面将实现自动登录了，但是事情还没完，进入系统以后，虽然每次Web请求我们都加入了BasicAuth的请求头，但是如果服务器端做了帐号修改，一样会产生401的错误，产生的结果就是客户端点什么操作都不会有反应，我们应该在全局来拦截401，引导客户端跳转到重新登录的界面：

<code class="hljs php has-numbering"><span class="hljs-comment">// admin/router.js</span>
...
app.config(<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">(<span class="hljs-variable">$httpProvider</span>)</span> {</span>
  <span class="hljs-variable">$httpProvider</span>.interceptors.push(<span class="hljs-string">'AuthInterceptor'</span>);
})
app.factory(<span class="hljs-string">'AuthInterceptor'</span>, <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">(<span class="hljs-variable">$rootScope</span>, <span class="hljs-variable">$q</span>,<span class="hljs-variable">$location</span>)</span> {</span>
  <span class="hljs-keyword">return</span> {
    responseError: <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">(response)</span> {</span>
        <span class="hljs-keyword">if</span>(response.status==<span class="hljs-number">401</span>)
        {
            <span class="hljs-variable">$location</span>.url(<span class="hljs-string">'/auth/login'</span>);
        }
      <span class="hljs-keyword">return</span> <span class="hljs-variable">$q</span>.reject(response);
    }
  };
})</code><ul style="opacity: 0.175627;" class="pre-numbering"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li><li>10</li><li>11</li><li>12</li><li>13</li><li>14</li><li>15</li><li>16</li></ul><ul style="" class="pre-numbering"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li><li>10</li><li>11</li><li>12</li><li>13</li><li>14</li><li>15</li><li>16</li></ul>

大功即将告成，还有最后一步，有了登录必然有登出，BasicAuth协议本身是没有登出概念的，我们这里做的登出，就是删除本地那个保存的authdata。

<code class="hljs r has-numbering">// admin/main.js
angular.module(<span class="hljs-string">'app'</span>)
  .controller(<span class="hljs-string">'AppCtrl'</span>, [<span class="hljs-string">'$scope'</span>, <span class="hljs-string">'$translate'</span>, <span class="hljs-string">'$localStorage'</span>, <span class="hljs-string">'$window'</span>, <span class="hljs-string">'$state'</span>,<span class="hljs-string">'$http'</span>,
    <span class="hljs-keyword">function</span>(              $scope,   $translate,   $localStorage,   $window ,$state,$http) {
<span class="hljs-keyword">...</span>
    $scope.logout = <span class="hljs-keyword">function</span>(){
        $localStorage.auth = null;
        $http.defaults.headers.common[<span class="hljs-string">'Authorization'</span>] = <span class="hljs-string">"Basic"</span>;
        $state.go(<span class="hljs-string">"auth.login"</span>);
    }
    <span class="hljs-keyword">function</span> isSmartDevice( $window ){<span class="hljs-keyword">...</span>}</code><ul style="opacity: 0.175627;" class="pre-numbering"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li><li>10</li><li>11</li></ul><ul style="" class="pre-numbering"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li><li>10</li><li>11</li></ul>

<code class="hljs xml has-numbering"><span class="hljs-comment"><!--admin/blocks/header.html--></span>
...
            <span class="hljs-comment"><!-- dropdown --></span>
            <span class="hljs-tag"><<span class="hljs-title">ul</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"dropdown-menu animated fadeInRight w"</span>></span>
              <span class="hljs-tag"><<span class="hljs-title">li</span>></span>
                <span class="hljs-tag"><<span class="hljs-title">a</span> <span class="hljs-attribute">ng-click</span>=<span class="hljs-value">"logout()"</span>></span>Logout<span class="hljs-tag"></<span class="hljs-title">a</span>></span>
              <span class="hljs-tag"></<span class="hljs-title">li</span>></span>
            <span class="hljs-tag"></<span class="hljs-title">ul</span>></span>
            <span class="hljs-comment"><!-- / dropdown --></span>

...</code><ul style="opacity: 0.175627;" class="pre-numbering"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li><li>10</li><li>11</li></ul><ul style="" class="pre-numbering"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li><li>10</li><li>11</li></ul>

锦上添花，标准的后台系统一般会在页面右上角显示登录用户的帐号信息，我们定义的协议/auth/info/是会把这些信息带下来的，我们来补全一下这个功能:

<code class="hljs php has-numbering"><span class="hljs-comment">// admin/auth/ctrl.js</span>
app.controller(<span class="hljs-string">'LoadingController'</span>,<span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">(<span class="hljs-variable">$scope</span>,<span class="hljs-variable">$resource</span>,<span class="hljs-variable">$state</span>,<span class="hljs-variable">$localStorage</span>)</span>{</span>
    <span class="hljs-keyword">var</span> <span class="hljs-variable">$com</span> = <span class="hljs-variable">$resource</span>(<span class="hljs-variable">$scope</span>.app.host + <span class="hljs-string">"/auth/info/?"</span>);
    <span class="hljs-variable">$com</span>.get(<span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">(data)</span>{</span><span class="hljs-comment">//引入data</span>
        <span class="hljs-variable">$scope</span>.session_user = <span class="hljs-variable">$localStorage</span>.user = data; <span class="hljs-comment">//保存用户信息</span>
        <span class="hljs-variable">$state</span>.go(<span class="hljs-string">'app.dashboard'</span>);
    })  
});
app.controller(<span class="hljs-string">'LoginController'</span>,<span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">(<span class="hljs-variable">$scope</span>,<span class="hljs-variable">$state</span>,<span class="hljs-variable">$http</span>,<span class="hljs-variable">$resource</span>,Base64,<span class="hljs-variable">$localStorage</span>)</span>{</span>
    <span class="hljs-variable">$scope</span>.login = <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">()</span>{</span>
        <span class="hljs-variable">$scope</span>.authError = <span class="hljs-string">""</span>
        <span class="hljs-keyword">var</span> authdata = Base64.encode(<span class="hljs-variable">$scope</span>.user.username + <span class="hljs-string">':'</span> + <span class="hljs-variable">$scope</span>.user.password);
        <span class="hljs-variable">$http</span>.defaults.headers.common[<span class="hljs-string">'Authorization'</span>] = <span class="hljs-string">'Basic '</span> + authdata;
        <span class="hljs-keyword">var</span> <span class="hljs-variable">$com</span> = <span class="hljs-variable">$resource</span>(<span class="hljs-variable">$scope</span>.app.host + <span class="hljs-string">"/auth/info/?"</span>);
        <span class="hljs-variable">$com</span>.get(<span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">(data)</span>{</span><span class="hljs-comment">//引入data</span>
            <span class="hljs-variable">$scope</span>.session_user = <span class="hljs-variable">$localStorage</span>.user = data; <span class="hljs-comment">//保存用户信息</span>
            <span class="hljs-variable">$localStorage</span>.auth = authdata;
            <span class="hljs-variable">$state</span>.go(<span class="hljs-string">'app.dashboard'</span>);
        },<span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">()</span>{</span>
            <span class="hljs-variable">$scope</span>.authError = <span class="hljs-string">"服务器登录错误"</span>
        })
    }
});
...</code><ul style="opacity: 0.175627;" class="pre-numbering"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li><li>10</li><li>11</li><li>12</li><li>13</li><li>14</li><li>15</li><li>16</li><li>17</li><li>18</li><li>19</li><li>20</li><li>21</li><li>22</li><li>23</li><li>24</li></ul><ul style="" class="pre-numbering"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li><li>10</li><li>11</li><li>12</li><li>13</li><li>14</li><li>15</li><li>16</li><li>17</li><li>18</li><li>19</li><li>20</li><li>21</li><li>22</li><li>23</li><li>24</li></ul>

<code class="hljs r has-numbering">// admin/main.js
<span class="hljs-keyword">...</span>
$scope.session_user = $localStorage.user;
$scope.logout = <span class="hljs-keyword">function</span>(){<span class="hljs-keyword">...</span>}</code><ul style="opacity: 0.175627;" class="pre-numbering"><li>1</li><li>2</li><li>3</li><li>4</li></ul><ul style="" class="pre-numbering"><li>1</li><li>2</li><li>3</li><li>4</li></ul>

<code class="hljs r has-numbering"><!--admin/blocks/header.html-->
<span class="hljs-keyword">...</span>
<span class=<span class="hljs-string">"hidden-sm hidden-md"</span>>{{session_user.username}}</span> <b class=<span class="hljs-string">"caret"</span>></b>
<span class="hljs-keyword">...</span></code><ul style="opacity: 0.175627;" class="pre-numbering"><li>1</li><li>2</li><li>3</li><li>4</li></ul><ul style="" class="pre-numbering"><li>1</li><li>2</li><li>3</li><li>4</li></ul>

---

4) CRUD

创建news目录

<code class="hljs markdown has-numbering"><span class="hljs-blockquote">> mkdir admin\news\</span></code><ul style="opacity: 0.175627;" class="pre-numbering"><li>1</li></ul><ul style="" class="pre-numbering"><li>1</li></ul>

增加news导航

<code class="hljs xml has-numbering"><span class="hljs-comment"><!-- admin/blocks/nav.html --></span>
<span class="hljs-comment"><!-- list --></span>
<span class="hljs-tag"><<span class="hljs-title">ul</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"nav"</span>></span>
  <span class="hljs-tag"><<span class="hljs-title">li</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"hidden-folded padder m-t m-b-sm text-muted text-xs"</span>></span>
    <span class="hljs-tag"><<span class="hljs-title">span</span> <span class="hljs-attribute">translate</span>=<span class="hljs-value">"导航"</span>></span>导航<span class="hljs-tag"></<span class="hljs-title">span</span>></span>
  <span class="hljs-tag"></<span class="hljs-title">li</span>></span>  
  <span class="hljs-tag"><<span class="hljs-title">li</span> <span class="hljs-attribute">ui-sref-active</span>=<span class="hljs-value">"active"</span>></span>
    <span class="hljs-tag"><<span class="hljs-title">a</span> <span class="hljs-attribute">ui-sref</span>=<span class="hljs-value">"app.news.list"</span>></span>
      <span class="hljs-tag"><<span class="hljs-title">i</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"glyphicon glyphicon-book icon text-info-dker"</span>></span><span class="hljs-tag"></<span class="hljs-title">i</span>></span>
      <span class="hljs-tag"><<span class="hljs-title">span</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"font-bold"</span>></span>新闻管理<span class="hljs-tag"></<span class="hljs-title">span</span>></span>
    <span class="hljs-tag"></<span class="hljs-title">a</span>></span>
  <span class="hljs-tag"></<span class="hljs-title">li</span>></span>
<span class="hljs-tag"></<span class="hljs-title">ul</span>></span>
<span class="hljs-comment"><!-- / list --></span></code><ul style="opacity: 0.175627;" class="pre-numbering"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li><li>10</li><li>11</li><li>12</li><li>13</li><li>14</li></ul><ul style="" class="pre-numbering"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li><li>10</li><li>11</li><li>12</li><li>13</li><li>14</li></ul>

书写控制器

<code class="hljs php has-numbering"><span class="hljs-comment">// admin/news/ctrl.js</span>
<span class="hljs-string">'use strict'</span>;

app.controller(<span class="hljs-string">'ListController'</span>, <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">(<span class="hljs-variable">$scope</span>, <span class="hljs-variable">$resource</span>,<span class="hljs-variable">$stateParams</span>,<span class="hljs-variable">$modal</span>,<span class="hljs-variable">$state</span>)</span> {</span>
    <span class="hljs-comment">//查询</span>
    <span class="hljs-variable">$scope</span>.query = <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">(page,filter)</span>{</span>
        <span class="hljs-keyword">var</span> <span class="hljs-variable">$com</span> = <span class="hljs-variable">$resource</span>(<span class="hljs-variable">$scope</span>.app.host + <span class="hljs-string">"/news/?page=:page&search=:filter"</span>,{page:<span class="hljs-string">'@page'</span>,filter:<span class="hljs-string">'@filter'</span>});
        <span class="hljs-keyword">if</span>(!page){
            page=<span class="hljs-number">1</span>;
        }<span class="hljs-keyword">else</span>{
            page=parseInt(page);
        }
        <span class="hljs-variable">$com</span>.get({page:page,filter:filter},<span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">(data)</span>{</span>
            <span class="hljs-comment">//扩展分页数据，显示页签，最终效果为  < 1 2 3 4 5 ></span>
            data.page_index = page;
            data.pages = [];    <span class="hljs-comment">//页签表</span>
            <span class="hljs-keyword">var</span> N = <span class="hljs-number">5</span>;          <span class="hljs-comment">//每次显示5个页签</span>
            <span class="hljs-keyword">var</span> s = Math.floor(page/N)*N;
            <span class="hljs-keyword">if</span>(s==page)s-=N;
            s += <span class="hljs-number">1</span>;
            <span class="hljs-keyword">var</span> e = Math.min(data.page_count,s+N-<span class="hljs-number">1</span>)
            <span class="hljs-keyword">for</span>(<span class="hljs-keyword">var</span> i=s;i<=e;i++)
                data.pages.push(i)
            <span class="hljs-variable">$scope</span>.data = data;
            <span class="hljs-variable">$scope</span>.search_context = filter;
        });
    }
    <span class="hljs-comment">//搜索跳转</span>
    <span class="hljs-variable">$scope</span>.search = <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">()</span>{</span>
        <span class="hljs-variable">$state</span>.go(<span class="hljs-string">'app.news.list'</span>,{search:<span class="hljs-variable">$scope</span>.search_context});
    }
    <span class="hljs-comment">//全选</span>
    <span class="hljs-keyword">var</span> selected = <span class="hljs-keyword">false</span>;
    <span class="hljs-variable">$scope</span>.selectAll = <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">()</span>{</span>
        selected = !selected;
        angular.<span class="hljs-keyword">forEach</span>(<span class="hljs-variable">$scope</span>.data.results,<span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">(item)</span>{</span>
            item.selected = selected;
        });
    }
    <span class="hljs-comment">//自定义操作处理，其中1为删除所选记录</span>
    <span class="hljs-variable">$scope</span>.exec = <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">()</span>{</span>
        <span class="hljs-keyword">if</span>(<span class="hljs-variable">$scope</span>.operate==<span class="hljs-string">"1"</span>){
            <span class="hljs-keyword">var</span> ids = [];
            angular.<span class="hljs-keyword">forEach</span>(<span class="hljs-variable">$scope</span>.data.results,<span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">(item)</span>{</span>
                <span class="hljs-keyword">if</span>(item.selected){
                    ids.push(item.id);
                }
            });
            <span class="hljs-keyword">if</span>(ids.length><span class="hljs-number">0</span>){
                <span class="hljs-comment">//弹出删除确认</span>
                <span class="hljs-keyword">var</span> modalInstance = <span class="hljs-variable">$modal</span>.open({
                    templateUrl: <span class="hljs-string">'admin/confirm.html'</span>,
                    controller: <span class="hljs-string">'ConfirmController'</span>,
                    size:<span class="hljs-string">'sm'</span>,
                });
                modalInstance.result.then(<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">()</span> {</span>
                      <span class="hljs-keyword">var</span> <span class="hljs-variable">$com</span> = <span class="hljs-variable">$resource</span>(<span class="hljs-variable">$scope</span>.app.host + <span class="hljs-string">"/news/deletes/?"</span>);
                      <span class="hljs-variable">$com</span>.delete({<span class="hljs-string">'ids'</span>:ids.join(<span class="hljs-string">','</span>)},<span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">()</span>{</span>
                          <span class="hljs-variable">$state</span>.go(<span class="hljs-string">'app.news.list'</span>);
                      });
                });
            }
        }
    }
    <span class="hljs-comment">//根据url参数（分页、搜索关键字）查询数据</span>
    <span class="hljs-variable">$scope</span>.query(<span class="hljs-variable">$stateParams</span>.page,<span class="hljs-variable">$stateParams</span>.search);
});

app.controller(<span class="hljs-string">'ConfirmController'</span>, [<span class="hljs-string">'$scope'</span>, <span class="hljs-string">'$modalInstance'</span>, <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">(<span class="hljs-variable">$scope</span>, <span class="hljs-variable">$modalInstance</span>)</span>{</span>
     <span class="hljs-variable">$scope</span>.ok = <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">()</span> {</span>
        <span class="hljs-variable">$modalInstance</span>.close();
    };
    <span class="hljs-variable">$scope</span>.cancel = <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">()</span> {</span>
        <span class="hljs-variable">$modalInstance</span>.dismiss(<span class="hljs-string">'cancel'</span>);
  };
}]);

app.controller(<span class="hljs-string">'DetailController'</span>, <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">(<span class="hljs-variable">$rootScope</span>,<span class="hljs-variable">$scope</span>, <span class="hljs-variable">$resource</span>, <span class="hljs-variable">$stateParams</span>,<span class="hljs-variable">$state</span>)</span> {</span>
  <span class="hljs-variable">$scope</span>.edit_mode = !!<span class="hljs-variable">$stateParams</span>.id;
  <span class="hljs-keyword">if</span>(<span class="hljs-variable">$scope</span>.edit_mode){
      <span class="hljs-keyword">var</span> <span class="hljs-variable">$com</span> = <span class="hljs-variable">$resource</span>(<span class="hljs-variable">$scope</span>.app.host + <span class="hljs-string">"/news/:id/?"</span>,{id:<span class="hljs-string">'@id'</span>});
      <span class="hljs-keyword">var</span> resp = <span class="hljs-variable">$com</span>.get({id:<span class="hljs-variable">$stateParams</span>.id},<span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">(data)</span>{</span>
          <span class="hljs-variable">$scope</span>.data = resp;
      });
  }
  <span class="hljs-keyword">else</span>{
      <span class="hljs-variable">$scope</span>.data = {};
  }
  <span class="hljs-variable">$scope</span>.submit = <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">()</span>{</span>
      <span class="hljs-keyword">if</span>(<span class="hljs-variable">$scope</span>.edit_mode){
          <span class="hljs-keyword">var</span> <span class="hljs-variable">$com</span> = <span class="hljs-variable">$resource</span>(<span class="hljs-variable">$scope</span>.app.host + <span class="hljs-string">"/news/:id/?"</span>,{id:<span class="hljs-string">'@id'</span>},{
              <span class="hljs-string">'update'</span>: { method:<span class="hljs-string">'PUT'</span> },
          });
          <span class="hljs-variable">$com</span>.update({id:<span class="hljs-variable">$stateParams</span>.id},<span class="hljs-variable">$scope</span>.data,<span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">(data)</span>{</span>
              <span class="hljs-variable">$state</span>.go(<span class="hljs-variable">$rootScope</span>.previousState,<span class="hljs-variable">$rootScope</span>.previousStateParams);
          });
      }
      <span class="hljs-keyword">else</span>{
          <span class="hljs-keyword">var</span> <span class="hljs-variable">$com</span> = <span class="hljs-variable">$resource</span>(<span class="hljs-variable">$scope</span>.app.host + <span class="hljs-string">"/news/?"</span>);
          <span class="hljs-variable">$com</span>.save(<span class="hljs-variable">$scope</span>.data,<span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">(data)</span>{</span>
              <span class="hljs-variable">$state</span>.go(<span class="hljs-string">'app.news.list'</span>);
          });
      }
  };
  <span class="hljs-variable">$scope</span>.delete = <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">()</span>{</span>
      <span class="hljs-keyword">var</span> <span class="hljs-variable">$com</span> = <span class="hljs-variable">$resource</span>(<span class="hljs-variable">$scope</span>.app.host + <span class="hljs-string">"/news/:id/?"</span>,{id:<span class="hljs-string">'@id'</span>});
      <span class="hljs-variable">$com</span>.delete({id:<span class="hljs-variable">$stateParams</span>.id},<span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">()</span>{</span>
          <span class="hljs-variable">$state</span>.go(<span class="hljs-string">'app.news.list'</span>);
      })
  }
});</code><ul style="opacity: 0.175627;" class="pre-numbering"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li><li>10</li><li>11</li><li>12</li><li>13</li><li>14</li><li>15</li><li>16</li><li>17</li><li>18</li><li>19</li><li>20</li><li>21</li><li>22</li><li>23</li><li>24</li><li>25</li><li>26</li><li>27</li><li>28</li><li>29</li><li>30</li><li>31</li><li>32</li><li>33</li><li>34</li><li>35</li><li>36</li><li>37</li><li>38</li><li>39</li><li>40</li><li>41</li><li>42</li><li>43</li><li>44</li><li>45</li><li>46</li><li>47</li><li>48</li><li>49</li><li>50</li><li>51</li><li>52</li><li>53</li><li>54</li><li>55</li><li>56</li><li>57</li><li>58</li><li>59</li><li>60</li><li>61</li><li>62</li><li>63</li><li>64</li><li>65</li><li>66</li><li>67</li><li>68</li><li>69</li><li>70</li><li>71</li><li>72</li><li>73</li><li>74</li><li>75</li><li>76</li><li>77</li><li>78</li><li>79</li><li>80</li><li>81</li><li>82</li><li>83</li><li>84</li><li>85</li><li>86</li><li>87</li><li>88</li><li>89</li><li>90</li><li>91</li><li>92</li><li>93</li><li>94</li><li>95</li><li>96</li><li>97</li><li>98</li><li>99</li><li>100</li><li>101</li><li>102</li><li>103</li><li>104</li><li>105</li><li>106</li><li>107</li><li>108</li><li>109</li><li>110</li><li>111</li></ul><ul style="" class="pre-numbering"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li><li>10</li><li>11</li><li>12</li><li>13</li><li>14</li><li>15</li><li>16</li><li>17</li><li>18</li><li>19</li><li>20</li><li>21</li><li>22</li><li>23</li><li>24</li><li>25</li><li>26</li><li>27</li><li>28</li><li>29</li><li>30</li><li>31</li><li>32</li><li>33</li><li>34</li><li>35</li><li>36</li><li>37</li><li>38</li><li>39</li><li>40</li><li>41</li><li>42</li><li>43</li><li>44</li><li>45</li><li>46</li><li>47</li><li>48</li><li>49</li><li>50</li><li>51</li><li>52</li><li>53</li><li>54</li><li>55</li><li>56</li><li>57</li><li>58</li><li>59</li><li>60</li><li>61</li><li>62</li><li>63</li><li>64</li><li>65</li><li>66</li><li>67</li><li>68</li><li>69</li><li>70</li><li>71</li><li>72</li><li>73</li><li>74</li><li>75</li><li>76</li><li>77</li><li>78</li><li>79</li><li>80</li><li>81</li><li>82</li><li>83</li><li>84</li><li>85</li><li>86</li><li>87</li><li>88</li><li>89</li><li>90</li><li>91</li><li>92</li><li>93</li><li>94</li><li>95</li><li>96</li><li>97</li><li>98</li><li>99</li><li>100</li><li>101</li><li>102</li><li>103</li><li>104</li><li>105</li><li>106</li><li>107</li><li>108</li><li>109</li><li>110</li><li>111</li></ul>

书写列表模版

<code class="hljs handlebars has-numbering"><span class="xml"><span class="hljs-comment"><!-- admin/news/list.html --></span>
<span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"wrapper-md"</span> <span class="hljs-attribute">ng-controller</span>=<span class="hljs-value">"ListController"</span>></span>
  <span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"panel panel-default"</span>></span>
    <span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"panel-heading"</span>></span>
    <span class="hljs-tag"><<span class="hljs-title">ul</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"nav nav-pills pull-right"</span>></span>
            <span class="hljs-tag"><<span class="hljs-title">li</span> <span class="hljs-attribute">style</span>=<span class="hljs-value">" padding-top:4px; padding-right:4px"</span>></span><span class="hljs-tag"><<span class="hljs-title">button</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"btn m-b-xs btn-sm btn-primary btn-addon"</span> <span class="hljs-attribute">ui-sref</span>=<span class="hljs-value">"app.news.create()"</span>></span><span class="hljs-tag"><<span class="hljs-title">i</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"fa fa-plus"</span>></span><span class="hljs-tag"></<span class="hljs-title">i</span>></span>新增<span class="hljs-tag"></<span class="hljs-title">button</span>></span><span class="hljs-tag"></<span class="hljs-title">li</span>></span>
          <span class="hljs-tag"></<span class="hljs-title">ul</span>></span>
      新闻列表
    <span class="hljs-tag"></<span class="hljs-title">div</span>></span>
    <span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"row wrapper"</span>></span>
      <span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"col-sm-5 m-b-xs"</span>></span>
        <span class="hljs-tag"><<span class="hljs-title">select</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"input-sm form-control w-sm inline v-middle"</span> <span class="hljs-attribute">ng-model</span>=<span class="hljs-value">"operate"</span> <span class="hljs-attribute">ng-init</span>=<span class="hljs-value">"operate=0"</span>></span>
          <span class="hljs-tag"><<span class="hljs-title">option</span> <span class="hljs-attribute">value</span>=<span class="hljs-value">"0"</span>></span>---<span class="hljs-tag"></<span class="hljs-title">option</span>></span>
          <span class="hljs-tag"><<span class="hljs-title">option</span> <span class="hljs-attribute">value</span>=<span class="hljs-value">"1"</span>></span>删除所选记录<span class="hljs-tag"></<span class="hljs-title">option</span>></span>
        <span class="hljs-tag"></<span class="hljs-title">select</span>></span>
        <span class="hljs-tag"><<span class="hljs-title">button</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"btn btn-sm btn-default"</span> <span class="hljs-attribute">ng-click</span>=<span class="hljs-value">"exec()"</span>></span>执行<span class="hljs-tag"></<span class="hljs-title">button</span>></span>                
      <span class="hljs-tag"></<span class="hljs-title">div</span>></span>
      <span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"col-sm-4"</span>></span>
      <span class="hljs-tag"></<span class="hljs-title">div</span>></span>
      <span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"col-sm-3"</span>></span>
        <span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"input-group"</span>></span>
          <span class="hljs-tag"><<span class="hljs-title">input</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">"text"</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"input-sm form-control"</span> <span class="hljs-attribute">placeholder</span>=<span class="hljs-value">"Search"</span> <span class="hljs-attribute">ng-model</span>=<span class="hljs-value">"search_context"</span>></span>
          <span class="hljs-tag"><<span class="hljs-title">span</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"input-group-btn"</span>></span>
            <span class="hljs-tag"><<span class="hljs-title">button</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"btn btn-sm btn-default"</span> <span class="hljs-attribute">ng-click</span>=<span class="hljs-value">"search()"</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">"button"</span>></span>Go!<span class="hljs-tag"></<span class="hljs-title">button</span>></span>
          <span class="hljs-tag"></<span class="hljs-title">span</span>></span>
        <span class="hljs-tag"></<span class="hljs-title">div</span>></span>
      <span class="hljs-tag"></<span class="hljs-title">div</span>></span>
    <span class="hljs-tag"></<span class="hljs-title">div</span>></span>
    <span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"table-responsive"</span> <span class="hljs-attribute">ng-if</span>=<span class="hljs-value">"data.total_count>0"</span>></span>
      <span class="hljs-tag"><<span class="hljs-title">table</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"table table-striped b-t b-light"</span>></span>
        <span class="hljs-tag"><<span class="hljs-title">thead</span>></span>
          <span class="hljs-tag"><<span class="hljs-title">tr</span>></span>
            <span class="hljs-tag"><<span class="hljs-title">th</span> <span class="hljs-attribute">style</span>=<span class="hljs-value">"width:20px;"</span>></span>
              <span class="hljs-tag"><<span class="hljs-title">label</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"i-checks m-b-none"</span>></span>
                <span class="hljs-tag"><<span class="hljs-title">input</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">"checkbox"</span> <span class="hljs-attribute">ng-click</span>=<span class="hljs-value">"selectAll()"</span>></span><span class="hljs-tag"><<span class="hljs-title">i</span>></span><span class="hljs-tag"></<span class="hljs-title">i</span>></span>
              <span class="hljs-tag"></<span class="hljs-title">label</span>></span>
            <span class="hljs-tag"></<span class="hljs-title">th</span>></span>
            <span class="hljs-tag"><<span class="hljs-title">th</span>></span>标题<span class="hljs-tag"></<span class="hljs-title">th</span>></span>
            <span class="hljs-tag"><<span class="hljs-title">th</span>></span>创建时间<span class="hljs-tag"></<span class="hljs-title">th</span>></span>
            <span class="hljs-tag"><<span class="hljs-title">th</span> <span class="hljs-attribute">style</span>=<span class="hljs-value">"width:30px;"</span>></span><span class="hljs-tag"></<span class="hljs-title">th</span>></span>
          <span class="hljs-tag"></<span class="hljs-title">tr</span>></span>
        <span class="hljs-tag"></<span class="hljs-title">thead</span>></span>
        <span class="hljs-tag"><<span class="hljs-title">tbody</span>></span>
          <span class="hljs-tag"><<span class="hljs-title">tr</span> <span class="hljs-attribute">ng-repeat</span>=<span class="hljs-value">"data in data.results"</span>></span>
            <span class="hljs-tag"><<span class="hljs-title">td</span>></span><span class="hljs-tag"><<span class="hljs-title">label</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"i-checks m-b-none"</span>></span><span class="hljs-tag"><<span class="hljs-title">input</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">"checkbox"</span> <span class="hljs-attribute">ng-model</span>=<span class="hljs-value">"data.selected"</span>></span><span class="hljs-tag"><<span class="hljs-title">i</span>></span><span class="hljs-tag"></<span class="hljs-title">i</span>></span><span class="hljs-tag"></<span class="hljs-title">label</span>></span><span class="hljs-tag"></<span class="hljs-title">td</span>></span>
            <span class="hljs-tag"><<span class="hljs-title">td</span>></span></span><span class="hljs-expression">{{<span class="hljs-variable">data.title</span>}}</span><span class="xml"><span class="hljs-tag"></<span class="hljs-title">td</span>></span>
            <span class="hljs-tag"><<span class="hljs-title">td</span>></span></span><span class="hljs-expression">{{<span class="hljs-variable">data.create</span>_<span class="hljs-variable">time</span>|<span class="hljs-variable">date</span>:'<span class="hljs-variable">yyyy-MM-dd</span> <span class="hljs-variable">HH</span>:<span class="hljs-variable">mm</span>:<span class="hljs-variable">ss</span> <span class="hljs-variable">Z</span>'}}</span><span class="xml"><span class="hljs-tag"></<span class="hljs-title">td</span>></span>
            <span class="hljs-tag"><<span class="hljs-title">td</span>></span>
              <span class="hljs-tag"><<span class="hljs-title">a</span> <span class="hljs-attribute">ui-sref</span>=<span class="hljs-value">"app.news.detail({id:data.id})"</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"active"</span>></span><span class="hljs-tag"><<span class="hljs-title">i</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"fa fa-edit"</span>></span><span class="hljs-tag"></<span class="hljs-title">i</span>></span><span class="hljs-tag"></<span class="hljs-title">a</span>></span>
            <span class="hljs-tag"></<span class="hljs-title">td</span>></span>
          <span class="hljs-tag"></<span class="hljs-title">tr</span>></span>
        <span class="hljs-tag"></<span class="hljs-title">tbody</span>></span>
      <span class="hljs-tag"></<span class="hljs-title">table</span>></span>
    <span class="hljs-tag"></<span class="hljs-title">div</span>></span>
    <span class="hljs-tag"><<span class="hljs-title">footer</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"panel-footer"</span>></span>
      <span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"row"</span>></span>
        <span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"col-sm-8 text-left"</span>></span>
          <span class="hljs-tag"><<span class="hljs-title">small</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"text-muted inline m-t-sm m-b-sm"</span>></span></span><span class="hljs-expression">{{<span class="hljs-variable">data.total</span>_<span class="hljs-variable">count</span>}}</span><span class="xml">条记录<span class="hljs-tag"></<span class="hljs-title">small</span>></span>
        <span class="hljs-tag"></<span class="hljs-title">div</span>></span>
        <span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">ng-if</span>=<span class="hljs-value">"data.page_count>1"</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"col-sm-4 text-right text-center-xs"</span>></span>                
          <span class="hljs-tag"><<span class="hljs-title">ul</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"pagination pagination-sm m-t-none m-b-none"</span>></span>
            <span class="hljs-tag"><<span class="hljs-title">li</span> <span class="hljs-attribute">ng-class</span>=<span class="hljs-value">"{disabled:!data.previous}"</span>></span><span class="hljs-tag"><<span class="hljs-title">a</span> <span class="hljs-attribute">ui-sref</span>=<span class="hljs-value">"app.news.list({page:data.page_index-1,search:search_context})"</span>></span><span class="hljs-tag"><<span class="hljs-title">i</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"fa fa-chevron-left"</span>></span><span class="hljs-tag"></<span class="hljs-title">i</span>></span><span class="hljs-tag"></<span class="hljs-title">a</span>></span><span class="hljs-tag"></<span class="hljs-title">li</span>></span>
            <span class="hljs-tag"><<span class="hljs-title">li</span> <span class="hljs-attribute">ng-repeat</span>=<span class="hljs-value">"page in data.pages"</span> <span class="hljs-attribute">ng-class</span>=<span class="hljs-value">"{active:page==data.page_index}"</span>></span><span class="hljs-tag"><<span class="hljs-title">a</span> <span class="hljs-attribute">ui-sref</span>=<span class="hljs-value">"app.news.list({page:page,search:search_context})"</span>></span></span><span class="hljs-expression">{{<span class="hljs-variable">page</span>}}</span><span class="xml"><span class="hljs-tag"></<span class="hljs-title">a</span>></span><span class="hljs-tag"></<span class="hljs-title">li</span>></span>
            <span class="hljs-tag"><<span class="hljs-title">li</span> <span class="hljs-attribute">ng-class</span>=<span class="hljs-value">"{disabled:!data.next}"</span>></span><span class="hljs-tag"><<span class="hljs-title">a</span> <span class="hljs-attribute">ui-sref</span>=<span class="hljs-value">"app.news.list({page:data.page_index+1,search:search_context})"</span>></span><span class="hljs-tag"><<span class="hljs-title">i</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"fa fa-chevron-right"</span>></span><span class="hljs-tag"></<span class="hljs-title">i</span>></span><span class="hljs-tag"></<span class="hljs-title">a</span>></span><span class="hljs-tag"></<span class="hljs-title">li</span>></span>
          <span class="hljs-tag"></<span class="hljs-title">ul</span>></span>
        <span class="hljs-tag"></<span class="hljs-title">div</span>></span>
      <span class="hljs-tag"></<span class="hljs-title">div</span>></span>
    <span class="hljs-tag"></<span class="hljs-title">footer</span>></span>
  <span class="hljs-tag"></<span class="hljs-title">div</span>></span>
<span class="hljs-tag"></<span class="hljs-title">div</span>></span></span></code><ul style="opacity: 0.175627;" class="pre-numbering"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li><li>10</li><li>11</li><li>12</li><li>13</li><li>14</li><li>15</li><li>16</li><li>17</li><li>18</li><li>19</li><li>20</li><li>21</li><li>22</li><li>23</li><li>24</li><li>25</li><li>26</li><li>27</li><li>28</li><li>29</li><li>30</li><li>31</li><li>32</li><li>33</li><li>34</li><li>35</li><li>36</li><li>37</li><li>38</li><li>39</li><li>40</li><li>41</li><li>42</li><li>43</li><li>44</li><li>45</li><li>46</li><li>47</li><li>48</li><li>49</li><li>50</li><li>51</li><li>52</li><li>53</li><li>54</li><li>55</li><li>56</li><li>57</li><li>58</li><li>59</li><li>60</li><li>61</li><li>62</li><li>63</li><li>64</li><li>65</li><li>66</li><li>67</li><li>68</li><li>69</li><li>70</li></ul><ul style="" class="pre-numbering"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li><li>10</li><li>11</li><li>12</li><li>13</li><li>14</li><li>15</li><li>16</li><li>17</li><li>18</li><li>19</li><li>20</li><li>21</li><li>22</li><li>23</li><li>24</li><li>25</li><li>26</li><li>27</li><li>28</li><li>29</li><li>30</li><li>31</li><li>32</li><li>33</li><li>34</li><li>35</li><li>36</li><li>37</li><li>38</li><li>39</li><li>40</li><li>41</li><li>42</li><li>43</li><li>44</li><li>45</li><li>46</li><li>47</li><li>48</li><li>49</li><li>50</li><li>51</li><li>52</li><li>53</li><li>54</li><li>55</li><li>56</li><li>57</li><li>58</li><li>59</li><li>60</li><li>61</li><li>62</li><li>63</li><li>64</li><li>65</li><li>66</li><li>67</li><li>68</li><li>69</li><li>70</li></ul>

书写详情、新增的模版，两者是可以复用一个模版的

<code class="hljs xml has-numbering"><span class="hljs-comment"><!-- admin/news/detail.html --></span>
<span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">ng-controller</span>=<span class="hljs-value">"DetailController"</span>></span>
    <span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"wrapper-md"</span> ></span>
        <span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"panel panel-default"</span>></span>
        <span class="hljs-tag"><<span class="hljs-title">form</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"form-horizontal ng-pristine ng-valid ng-valid-date ng-valid-required ng-valid-parse ng-valid-date-disabled"</span> <span class="hljs-attribute">ng-submit</span>=<span class="hljs-value">"submit()"</span>></span>
            <span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"panel-body"</span>></span>
                <span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"form-group"</span>></span>
                  <span class="hljs-tag"><<span class="hljs-title">label</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"col-sm-2 control-label"</span>></span>标题<span class="hljs-tag"></<span class="hljs-title">label</span>></span>
                  <span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"col-sm-10"</span>></span>
                    <span class="hljs-tag"><<span class="hljs-title">input</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">"text"</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"form-control"</span> <span class="hljs-attribute">ng-model</span>=<span class="hljs-value">"data.title"</span> <span class="hljs-attribute">required</span>></span>
                  <span class="hljs-tag"></<span class="hljs-title">div</span>></span>
                <span class="hljs-tag"></<span class="hljs-title">div</span>></span>
                <span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"line line-dashed b-b line-lg pull-in"</span>></span><span class="hljs-tag"></<span class="hljs-title">div</span>></span>
                <span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"form-group"</span>></span>
                  <span class="hljs-tag"><<span class="hljs-title">label</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"col-sm-2 control-label"</span>></span>内容<span class="hljs-tag"></<span class="hljs-title">label</span>></span>
                  <span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"col-sm-10"</span>></span>
                    <span class="hljs-tag"><<span class="hljs-title">textarea</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"form-control"</span> <span class="hljs-attribute">rows</span>=<span class="hljs-value">"6"</span> <span class="hljs-attribute">ng-model</span>=<span class="hljs-value">"data.content"</span>></span><span class="hljs-tag"></<span class="hljs-title">textarea</span>></span>
                  <span class="hljs-tag"></<span class="hljs-title">div</span>></span>
                <span class="hljs-tag"></<span class="hljs-title">div</span>></span>
            <span class="hljs-tag"></<span class="hljs-title">div</span>></span>
            <span class="hljs-tag"><<span class="hljs-title">footer</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"panel-footer text-right bg-light lter"</span>></span>
                    <span class="hljs-tag"><<span class="hljs-title">input</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">"button"</span> <span class="hljs-attribute">ng-click</span>=<span class="hljs-value">"delete()"</span> <span class="hljs-attribute">ng-if</span>=<span class="hljs-value">"edit_mode"</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"btn btn-danger pull-left"</span> <span class="hljs-attribute">value</span>=<span class="hljs-value">"删除"</span>/></span>
                      <span class="hljs-tag"><<span class="hljs-title">input</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">"submit"</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"btn btn-success"</span> <span class="hljs-attribute">value</span>=<span class="hljs-value">"提交"</span>/></span>
             <span class="hljs-tag"></<span class="hljs-title">footer</span>></span>
         <span class="hljs-tag"></<span class="hljs-title">form</span>></span>
      <span class="hljs-tag"></<span class="hljs-title">div</span>></span>
    <span class="hljs-tag"></<span class="hljs-title">div</span>></span>
<span class="hljs-tag"></<span class="hljs-title">div</span>></span></code><ul style="opacity: 0.175627;" class="pre-numbering"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li><li>10</li><li>11</li><li>12</li><li>13</li><li>14</li><li>15</li><li>16</li><li>17</li><li>18</li><li>19</li><li>20</li><li>21</li><li>22</li><li>23</li><li>24</li><li>25</li><li>26</li><li>27</li><li>28</li></ul><ul style="" class="pre-numbering"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li><li>10</li><li>11</li><li>12</li><li>13</li><li>14</li><li>15</li><li>16</li><li>17</li><li>18</li><li>19</li><li>20</li><li>21</li><li>22</li><li>23</li><li>24</li><li>25</li><li>26</li><li>27</li><li>28</li></ul>

书写删除确认框模版

<code class="hljs xml has-numbering"><span class="hljs-comment"><!-- admin/confirm.html --></span>
<span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"modal-header"</span>></span>
    <span class="hljs-tag"><<span class="hljs-title">h3</span>></span>确认删除?<span class="hljs-tag"></<span class="hljs-title">h3</span>></span>
<span class="hljs-tag"></<span class="hljs-title">div</span>></span>
<span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"modal-footer"</span>></span>                  
    <span class="hljs-tag"><<span class="hljs-title">button</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"btn btn-default"</span> <span class="hljs-attribute">ng-click</span>=<span class="hljs-value">"cancel()"</span>></span>Cancel<span class="hljs-tag"></<span class="hljs-title">button</span>></span>
    <span class="hljs-tag"><<span class="hljs-title">button</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"btn btn-primary"</span> <span class="hljs-attribute">ng-click</span>=<span class="hljs-value">"ok()"</span>></span>OK<span class="hljs-tag"></<span class="hljs-title">button</span>></span>
<span class="hljs-tag"></<span class="hljs-title">div</span>></span></code><ul style="opacity: 0.175627;" class="pre-numbering"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li></ul><ul style="" class="pre-numbering"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li></ul>

添加路由，注意run里面增加了事件监听，后文详细说

<code class="hljs r has-numbering">// admin/router.js
app
  .run(
      <span class="hljs-keyword">function</span> (<span class="hljs-keyword">...</span>) {
          <span class="hljs-keyword">...</span>       
          $rootScope.$on(<span class="hljs-string">'$stateChangeSuccess'</span>, <span class="hljs-keyword">function</span>(event, to, toParams, from, fromParams) {
            $rootScope.previousState = from;
            $rootScope.previousStateParams = fromParams;
          });
      }
  )
<span class="hljs-keyword">...</span>
              .state(<span class="hljs-string">'app.news'</span>, {
                  abstract: true,
                  url: <span class="hljs-string">'/news'</span>,
                  template: <span class="hljs-string">'<div ui-view class="fade-in"></div>'</span>,
                  resolve: {
                      deps: [<span class="hljs-string">'$ocLazyLoad'</span>,
                        <span class="hljs-keyword">function</span>( $ocLazyLoad ){
                          <span class="hljs-keyword">return</span> $ocLazyLoad.load(<span class="hljs-string">'admin/news/ctrl.js'</span>);
                      }]
                  }
              })
              .state(<span class="hljs-string">'app.news.list'</span>, {
                  url: <span class="hljs-string">'/list?page&search'</span>,
                  templateUrl: <span class="hljs-string">'admin/news/list.html'</span>,
              })
              .state(<span class="hljs-string">'app.news.detail'</span>, {
                  url: <span class="hljs-string">'/detail/{id}'</span>,
                  templateUrl: <span class="hljs-string">'admin/news/detail.html'</span>,
              })
              .state(<span class="hljs-string">'app.news.create'</span>, {
                  url: <span class="hljs-string">'/create'</span>,
                  templateUrl: <span class="hljs-string">'admin/news/detail.html'</span>,
              })
<span class="hljs-keyword">...</span></code><ul style="opacity: 0.175627;" class="pre-numbering"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li><li>10</li><li>11</li><li>12</li><li>13</li><li>14</li><li>15</li><li>16</li><li>17</li><li>18</li><li>19</li><li>20</li><li>21</li><li>22</li><li>23</li><li>24</li><li>25</li><li>26</li><li>27</li><li>28</li><li>29</li><li>30</li><li>31</li><li>32</li><li>33</li><li>34</li><li>35</li><li>36</li></ul><ul style="" class="pre-numbering"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li><li>10</li><li>11</li><li>12</li><li>13</li><li>14</li><li>15</li><li>16</li><li>17</li><li>18</li><li>19</li><li>20</li><li>21</li><li>22</li><li>23</li><li>24</li><li>25</li><li>26</li><li>27</li><li>28</li><li>29</li><li>30</li><li>31</li><li>32</li><li>33</li><li>34</li><li>35</li><li>36</li></ul>

成果如下

我们这里搜索和分页都是采用URL跳转的方式(#/news/list/?search=str&page=int)，这样能保证刷新页面的时候能停留在之前的页面结果上，ng默认的页面跳转是不保留前一个页面状态的(链接和参数)，如果我们跳转到第2页，编辑，再返回，是会回到第1页去，为了比较好的用户体验所以我们有了如下代码

监听全局页面跳转信号($statChangeSuccess)，将参数保存下来

<code class="hljs r has-numbering">// admin/router.js
app.run(
    <span class="hljs-keyword">...</span>
    $rootScope.$on(<span class="hljs-string">'$stateChangeSuccess'</span>, <span class="hljs-keyword">function</span>(event, to, toParams, from, fromParams) {
            $rootScope.previousState = from;
            $rootScope.previousStateParams = fromParams;
          });
    <span class="hljs-keyword">...</span>
)</code><ul style="opacity: 0.175627;" class="pre-numbering"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li></ul><ul style="" class="pre-numbering"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li></ul>

详情页编辑完成返回时读取参数跳转

<code class="hljs r has-numbering">// admin/news/ctrls.js
app.controller(<span class="hljs-string">'DetailController'</span>,<span class="hljs-keyword">...</span>){
    <span class="hljs-keyword">...</span>
    $com.update({id:$stateParams.id},$scope.data,<span class="hljs-keyword">function</span>(data){
              $state.go($rootScope.previousState,$rootScope.previousStateParams);
          });
    <span class="hljs-keyword">...</span>
});</code><ul style="opacity: 0.175627;" class="pre-numbering"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li></ul><ul style="" class="pre-numbering"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li></ul>

---

完整的后台少不了导航

我们这里选用github上面一个写得挺棒的ng导航插件angular-breadcrumb，求简，我们直接下载https://raw.github.com/ncuillery/angular-breadcrumb/master/dist/angular-breadcrumb.min.js，由于我们是给ng装插件，所以建议放到vendor/里面去，接下来的改动也是针对原模版框架。

注入JS

<code class="hljs r has-numbering"><!-- index.html -->
<span class="hljs-keyword">...</span>
<script src=<span class="hljs-string">"vendor/angular/angular-breadcrumb/angular-breadcrumb.min.js"</span>></script>
<span class="hljs-keyword">...</span></code><ul style="opacity: 0.175627;" class="pre-numbering"><li>1</li><li>2</li><li>3</li><li>4</li></ul><ul style="" class="pre-numbering"><li>1</li><li>2</li><li>3</li><li>4</li></ul>

引入模块

<code class="hljs r has-numbering">// js/app.js
angular.module(<span class="hljs-string">'app'</span>, [
    <span class="hljs-keyword">...</span>
    <span class="hljs-string">'ncy-angular-breadcrumb'</span>,
]);</code><ul style="opacity: 0.175627;" class="pre-numbering"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li></ul><ul style="" class="pre-numbering"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li></ul>

配置扩展，让导航能支持HTML(具体就是能显示回首页的图标)

<code class="hljs r has-numbering">// js/config.js
<span class="hljs-keyword">...</span>
app.config(<span class="hljs-keyword">function</span>($breadcrumbProvider) {
    $breadcrumbProvider.setOptions({
      templateUrl: <span class="hljs-string">'tpl/blocks/breadcrumb.html'</span>
    });
  });</code><ul style="opacity: 0.175627;" class="pre-numbering"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li></ul><ul style="" class="pre-numbering"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li></ul>

扩展的导航模版，写法参考插件官方文档

<code class="hljs handlebars has-numbering"><span class="xml"><span class="hljs-comment"><!-- tpl/blocks/breadcrumb.html --></span>
<span class="hljs-tag"><<span class="hljs-title">ul</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"breadcrumb bg-white b-a"</span>></span>
    <span class="hljs-tag"><<span class="hljs-title">li</span> <span class="hljs-attribute">ng-repeat</span>=<span class="hljs-value">"step in steps | limitTo:(steps.length-1)"</span>></span>
        <span class="hljs-tag"><<span class="hljs-title">a</span> <span class="hljs-attribute">href</span>=<span class="hljs-value">"</span></span></span><span class="hljs-expression">{{<span class="hljs-variable">step.ncyBreadcrumbLink</span>}}</span><span class="xml"><span class="hljs-tag"><span class="hljs-value">"</span> <span class="hljs-attribute">ng-bind-html</span>=<span class="hljs-value">"step.ncyBreadcrumbLabel"</span>></span><span class="hljs-tag"></<span class="hljs-title">a</span>></span>
    <span class="hljs-tag"></<span class="hljs-title">li</span>></span>
    <span class="hljs-tag"><<span class="hljs-title">li</span> <span class="hljs-attribute">ng-repeat</span>=<span class="hljs-value">"step in steps | limitTo:-1"</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"active"</span>></span>
        <span class="hljs-tag"><<span class="hljs-title">span</span> <span class="hljs-attribute">ng-bind-html</span>=<span class="hljs-value">"step.ncyBreadcrumbLabel"</span>></span><span class="hljs-tag"></<span class="hljs-title">span</span>></span>
    <span class="hljs-tag"></<span class="hljs-title">li</span>></span>
<span class="hljs-tag"></<span class="hljs-title">ul</span>></span></span></code><ul style="opacity: 0.175627;" class="pre-numbering"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li></ul><ul style="" class="pre-numbering"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li></ul>

配置路由，加入导航

<code class="hljs r has-numbering">// admin/router.js
<span class="hljs-keyword">...</span>
              .state(<span class="hljs-string">'app.dashboard'</span>, {
                  <span class="hljs-keyword">...</span>
                  ncyBreadcrumb: {
                    label: <span class="hljs-string">'<i class="fa fa-home"></i> 首页'</span>
                  }
              })
              <span class="hljs-keyword">...</span>
              .state(<span class="hljs-string">'app.news.list'</span>, {
                  <span class="hljs-keyword">...</span>
                  ncyBreadcrumb: {
                    parent:<span class="hljs-string">'app.dashboard'</span>,
                    label: <span class="hljs-string">'新闻列表'</span>,
                  }
              })
              .state(<span class="hljs-string">'app.news.detail'</span>, {
                  <span class="hljs-keyword">...</span>
                  ncyBreadcrumb: {
                    parent:<span class="hljs-string">'app.news.list'</span>,
                    label: <span class="hljs-string">'编辑'</span>,
                  }
               })
              .state(<span class="hljs-string">'app.news.create'</span>, {
                  <span class="hljs-keyword">...</span>
                  ncyBreadcrumb: {
                    parent:<span class="hljs-string">'app.news.list'</span>,
                    label: <span class="hljs-string">'新增'</span>,
                  }
              })
<span class="hljs-keyword">...</span></code><ul style="opacity: 0.175627;" class="pre-numbering"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li><li>10</li><li>11</li><li>12</li><li>13</li><li>14</li><li>15</li><li>16</li><li>17</li><li>18</li><li>19</li><li>20</li><li>21</li><li>22</li><li>23</li><li>24</li><li>25</li><li>26</li><li>27</li><li>28</li><li>29</li><li>30</li><li>31</li></ul><ul style="" class="pre-numbering"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li><li>10</li><li>11</li><li>12</li><li>13</li><li>14</li><li>15</li><li>16</li><li>17</li><li>18</li><li>19</li><li>20</li><li>21</li><li>22</li><li>23</li><li>24</li><li>25</li><li>26</li><li>27</li><li>28</li><li>29</li><li>30</li><li>31</li></ul>