【AngularJS】AngularJS学习 之 UI以及逻辑变化

读书《Angular高级编制程序》领会如下

要求:

创设如下界面,有导航栏,一个沃特chlists面板,面板上有个加号button,一句表达“”Use+to
create a list“”

AngularJS 1

 点击 + 会弹出如下窗口

AngularJS 2

 

 输入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

AngularJS, 打开看看

'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’ 说是
那个有五个趣味,3个是让这一个stk沃特chlistPanel作为二个Element存在,另1个意思是限量了它的职能范围,只万幸这几个上下文中有用,在其余地点就没用了。

3)link:里面纵使要写属性和办法了,怎么感觉像构造函数,

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

下面是自定义的指令,自己觉得应该就是 先定义一个默认的空的构造函数,也就是AngularJS所说的作用域 scope,然后给这个构造函数,也就是scope创建属性和方法。还是看图说话吧

AngularJS 5

相关文章