学《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">
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)">×
</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创建属性和方法。还是看图说话吧