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

相关文章