AngularJS学习 之 UI以及逻辑生成

学习《Angular高级编程》理解以下

要求：

建立以下界面，有导航栏，一个Watchlists面板，面板上有个加号button，一句说明“”Use+to create a list“”

 点击 + 会弹出以下窗口

 

 输入一个name （好比：医疗）一个description（医疗股票监视）， Create按钮就会高亮，点击create后，就会显示以下样式

 

实现

1.UI 也就是html以及css的实现

固然是到app/view/目录下建立Html文件啦，由于这两个页面的形式 在后面的设计中会常常 重复 ，因此将他们做为模板单独存放，就放在app/view/templates中，一个叫

watchlist-panel.html,一个叫addlist-modal.html 做者起的名字都很形象对吧。

 

先看第一个页面的Html：里面的样式明显调用了bootstrap的各类class；里面的陌生面孔就是ng-click和ng-repeat，这两个就是AngularJS的东西，如今看

ng-click="showModal()"就是说当用户点击button的时候要执行showModal（）这个方法，跟onclick="showModal()"是否是一个模子出来的呢，O(∩_∩)O哈哈哈~ 恩，没什么难的，ng-repeat在这先不解释；那么showModal()这个function在哪里呢？咱们平时的web开发像这个function都是放在xxx.js文件里，而后都统一放到scripts文件夹里。AngularJS就换了个新名词叫 directive中文翻译说叫指令,目录就在app/scripts/directives。好吧。

<div class="panel panel-info">
  <div class="panel-heading">
    <span class="glyphicon glyphicon-eye-open"></span>
    Watchlists
    <!-- Invoke showModal() handler on click -->
    <button type="button"
      class="btn btn-success btn-xs pull-right"
      ng-click="showModal()">
      <span class="glyphicon glyphicon-plus"></span>
    </button>
  </div>
  <div class="panel-body">
    <!-- Show help text if no watchlists exist -->
    <div ng-if="!watchlists.length" class="text-center">
      Use <span class="glyphicon glyphicon-plus"></span> to create a list
    </div>
    <div class="list-group">
      <!-- Repeat over each list in watchlists and create link -->
      <a class="list-group-item"
        ng-class="{ active: currentList == list.id }"
        ng-repeat="list in watchlists track by $index"
        ng-click="gotoList(list.id)">
        {{list.name}}
        <!-- Delete this list by invoking deleteList() handler -->
        <button type="button" class="close"
          ng-click="deleteList(list)">&times;
        </button>
      </a>
    </div>
  </div>
</div>

 

AngularJS把不是以ng开头的都 看作是用户自定义的directive(好吧，我老是想说是function)，须要用它的一条指令生成js文件。

yo angular:directive stk-Watchlist-Panel

╭(╯^╰)╮ 执行后生成了两份,具体我如今也不知道为何，之后理解了再说。anyway，它是在directives目录生成了stk-watchlist-panel.js

 打开看看

'use strict';

/**
 * @ngdoc directive
 * @name stockDogApp.directive:stkWatchlistPanel
 * @description
 * # stkWatchlistPanel
 */
angular.module('stockDogApp')
  .directive('stkWatchlistPanel', function () {
    return {
      template: '<div></div>',
      restrict: 'E',
      link: function postLink(scope, element, attrs) {
        element.text('this is the stkWatchlistPanel directive');
      }
    };
  });

哦，书上又是注册又是依赖的，看的稀里糊涂。仍是本身理解的简单。开始咱们不是建立了StockDog这个项目嘛，AngularJS就给它分配了一个什么module名字，叫stockDogApp，而后调用本身内置的 .directive()这个方法，这个方法做用就是 返回 用户 自定义的那些 directives，也叫指令（仍是想说是function）。看这里传给.directive()的参数就是刚才咱们用yo angular:directive指令建立的，只不过去掉了链接符号，O(∩_∩)O哈哈~

 

看return了些什么 

1)template:'<div></div>' 哦意思是要返回html内容

2) restrict:'E' 说是 这个有两个意思，一个是让这个stkWatchlistPanel做为一个Element存在，另外一个意思是限制了它的做用范围，只能在这个上下文中有用，在别的地方就没用了。

3）link:里面就是要写属性和方法了，怎么感受像构造函数，

 link: function postLink(scope, element, attrs) { element.text('this is the stkWatchlistPanel directive'); }
也就是在这个postLink的函数里面要写咱们自定义的指令。

下面是自定义的指令，本身以为应该就是 先定义一个默认的空的构造函数，也就是AngularJS所说的做用域 scope，而后给这个构造函数，也就是scope建立属性和方法。仍是看图说话吧