AngularJSAngularJS学习 之 UI以及逻辑变化

无评论

学《Angular高级编程》理解如下

要求：

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

AngularJS 1

 点击 + 会弹出如下窗口

AngularJS 2

 

 输入一个name （比如：医疗）一个description（医疗股票监视），
Create按钮就见面高亮，点击create后，就会见来得如下样式

AngularJS 3

 

实现

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">

    Watchlists
    <!-- Invoke showModal() handler on click -->
    <button type="button"
      class="btn btn-success btn-xs pull-right"
      ng-click="showModal()">

    </button>
  </div>
  <div class="panel-body">
    <!-- Show help text if no watchlists exist -->
    <div ng-if="!watchlists.length" class="text-center">
      Use  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

AngularJS 4

 打开看看

'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创建属性和方法。还是看图说话吧

AngularJS 5

相关文章