帐号:密码:下次自动登录{url:/nForum/slist.json?uid=guest&root=list-section}{url:/nForum/nlist.json?uid=guest&root=list-section}
贴数:8&分页:请叫我小f发信人: facilitator (黄书中自有颜如玉 脸书中自有黄金屋), 信区: WebDev
标&&题: 经过研究 终于能让Angular2控件包装集合逻辑了
发信站: 水木社区 (Tue Nov 29 22:18:26 2016), 站内 && Angular2的一个短板就是当需要展示一个集合/数组的成员时（通常listview、treeview、table、datagrid等等模型），基本上没有办法绕开*ngFor && *ngFor实际上是*ngFor和*ngForOf两个template directive的合体形式，用户也可以自己实现ngFor（比如写成*ngEach=""），但是本质上还是绕不开这个*ngFor的模板语法&&&& 这样的缺点是什么呢？那就是用户很难用一个Component封装对一个数组的显示逻辑同时自定义显示的模板。 && WPF当中ItemsControl的设计就是封装逻辑，但是内部每个Item呈现是用的ItemTemplate/DataTemplate。但是Angluar2在这个问题上出现很大的问题，简单地说就是无法重复利用带有ngFor逻辑的Component来展示不同的内容。 && 1、在*ngFor模板当中嵌入transclusion的&ng-content&&/ng-content&。结果这个是不工作的，因为&ng-content&&/ng-content&的默认context是整个template对应的class而不是局部的Component，所以无法让&ng-content&&/ng-content&来呈现*ngFor的child。 && 2、就是让套在外层的ItemsSource控件来管理数组展示的逻辑（比如分页、筛选、查询等等）。但是同样的问题还是ItemsSource是不存在于当前template对应的class上的。所以在一个Component内部嵌套&ng-content&&/ng-content&的方案不论如何都是行不通的。
&div [ItemsSource]=Items&
&div *ngFor="let item of ItemsSource"&
&/div& && 3、所以解决方案必须还是回到Compile的问题上。
&div [ItemsSource]=Items [ItemTemplate]="/template.html#button"&
in template.html:
&div id="button" class="btn" [class.checked]="Parent.SelectedItem == Item"&
{{Item.Name}}
&/div& && 这实际上是一个无奈的work around。在Angular1当中，我可以直接把ItemTemplate嵌入到ItemsSource当中，但是Angular2是预编译的，在编译过程中就把它认为不合法的语法去掉了，或者会对不能到达的引用报错。这样导致在Angular2的component template当中嵌入template几乎是不可能的，但是我又需要在Angular2当中写一个template就可以呈现数据而不要对它做类定义。 && 所以构造这样一个能够管理内部集合元素的Angular2控件必须能够让它进行编译。
-- && ※ 来源:·水木社区 ·[FROM: 110.23.10.*]
小石发信人: dhcn (小石), 信区: WebDev
标&&题: Re: 经过研究 终于能让Angular2控件包装集合逻辑了
发信站: 水木社区 (Wed Nov 30 08:36:19 2016), 站内 && MVVM的情景下，就应该转换掉Template的思路，想自己整Template，jQuery以前就有这个，何须MVVM。
【 在 facilitator 的大作中提到: 】
: Angular2的一个短板就是当需要展示一个集合/数组的成员时（通常listview、treeview、table、datagrid等等模型），基本上没有办法绕开*ngFor
: *ngFor实际上是*ngFor和*ngForOf两个template directive的合体形式，用户也可以自己实现ngFor（比如写成*ngEach=""），但是本质上还是绕不开这个*ngFor的模板语法&&
: 这样的缺点是什么呢？那就是用户很难用一个Component封装对一个数组的显示逻辑同时自定义显示的模板。
: ...................
※ 修改:·dhcn 于 Nov 30 08:36:59 2016 修改本文·[FROM: 61.148.52.*]
※ 来源:·水木社区 ·[FROM: 61.148.52.*]
请叫我小f发信人: facilitator (黄书中自有颜如玉 脸书中自有黄金屋), 信区: WebDev
标&&题: Re: 经过研究 终于能让Angular2控件包装集合逻辑了
发信站: 水木社区 (Wed Nov 30 13:14:33 2016), 站内 && 我觉得你没理解angular2的缺陷 不用template就要每次都重写集合视图的后台逻辑 && Angular2自己本身支持模板Directive 但是它原生的模板不方便在别的Component当中复用 && 我是WPF背景 WPF是MVVM的祖宗 我个人感觉Angular1和2的MVVM概念做得都不如WPF完善 设计上感觉很有个人色彩 特别随意 没有WPF那么系统 个人看法吧 &&&& 【 在 dhcn 的大作中提到: 】
: MVVM的情景下，就应该转换掉Template的思路，想自己整Template，jQuery以前就有这个，何须MVVM。
&& -- && ※ 来源:·水木社区 ·[FROM: 110.23.10.*]
小石发信人: dhcn (小石), 信区: WebDev
标&&题: Re: 经过研究 终于能让Angular2控件包装集合逻辑了
发信站: 水木社区 (Wed Nov 30 15:44:17 2016), 站内 && WPF不一定是AngularJS的祖宗，不同的东西不能因为一个pattern name完全走认知copy的思路，共性是在个体中表现，而不是反之。
【 在 facilitator 的大作中提到: 】
: 我觉得你没理解angular2的缺陷 不用template就要每次都重写集合视图的后台逻辑
: Angular2自己本身支持模板Directive 但是它原生的模板不方便在别的Component当中复用
: 我是WPF背景 WPF是MVVM的祖宗 我个人感觉Angular1和2的MVVM概念做得都不如WPF完善 设计上感觉很有个人色彩 特别随意 没有WPF那么系统 个人看法吧
: ...................
※ 修改:·dhcn 于 Nov 30 15:49:04 2016 修改本文·[FROM: 61.148.52.*]
※ 来源:·水木社区 ·[FROM: 61.148.52.*]
请叫我小f发信人: facilitator (黄书中自有颜如玉 脸书中自有黄金屋), 信区: WebDev
标&&题: Re: 经过研究 终于能让Angular2控件包装集合逻辑了
发信站: 水木社区 (Wed Nov 30 17:35:53 2016), 站内 && 不过微软确实第一个搞MVVM的 && 我搞WPF五六年了 也接触过Android那套 我觉得我对MVVM框架的好坏是有清醒认识的 && 【 在 dhcn 的大作中提到: 】
: WPF不一定是AngularJS的祖宗，不同的东西不能因为一个pattern name完全走认知copy的思路，共性是在个体中表现，而不是反之。
&& -- && ※ 来源:·水木社区 ·[FROM: 110.23.10.*]
请叫我小f发信人: facilitator (黄书中自有颜如玉 脸书中自有黄金屋), 信区: WebDev
标&&题: Re: 经过研究 终于能让Angular2控件包装集合逻辑了
发信站: 水木社区 (Wed Nov 30 18:42:36 2016), 站内 && Angular2还有其他很多槽点 比如他们endorse了rxjs 结果async/await马上就成业界标准了 毕竟rxjs本质上跟promise差不多 都无法从形式上解决函数套函数的问题 && 总之我个人观点就是angular2其实是个在有些方面走差了路 个性色太强烈的一个作品 && 【 在 dhcn 的大作中提到: 】
: WPF不一定是AngularJS的祖宗，不同的东西不能因为一个pattern name完全走认知copy的思路，共性是在个体中表现，而不是反之。
&& -- && ※ 来源:·水木社区 ·[FROM: 110.23.10.*]
zxd发信人: zxdong262 (zxd), 信区: WebDev
标&&题: Re: 经过研究 终于能让Angular2控件包装集合逻辑了
发信站: 水木社区 (Wed Nov 30 21:43:10 2016), 站内 && 这玩意该被react/vue淘汰
-- && ※ 来源:·水木社区 ·[FROM: 223.73.58.*]
coder发信人: cnxs (coder), 信区: WebDev
标&&题: Re: 经过研究 终于能让Angular2控件包装集合逻辑了
发信站: 水木社区 (Sat Dec&&3 20:52:38 2016), 站内 && 能说说react哪方面特别突出无异议击溃angular2吗
【 在 zxdong262 的大作中提到: 】
: 这玩意该被react/vue淘汰
&& -- && ※ 来源:·水木社区 ·[FROM: 115.70.49.*]
文章数:8&分页:1.安装nodejs
直接去nodejs官网下载nodejs安装。
安装完成后，打开cmd
输入node -v 看看安装版本 2.安装cnmp
由于Angular CLi的一些资源被墙掉了，所以这里我们要用淘宝的镜像去下载安装，否则会很慢并且很容易出问题。
安装淘宝镜像，输入npm install -g cnpm之后安装angular cli的时候我们就用cnpm命令即可。3.安装Angular Cli
angular-cli
github也有方法。
之前电脑上如果安装过angular cli老版本的话建议先卸载，然后重新安装。卸载老版本：
npm uninstall -g angular-cli
npm uninstall –save-dev angular-cli
卸载新版本：
npm uninstall -g @angular/cli
清除下缓存
npm cache clean然后开始安装，记住，要用cnpmcnpm install -g @angular/cli@latest安装需要时间，耐心等待。
安装完成后输入
ng help查看是否安装成功 出现上图所示说明安装成功了。4.创建项目
切换到项目的存放目录，我的是在E盘的Angular文件夹下
projectName
rojectName就是你的项目名称，例如，我创建一个Test项目 然后耐心等待，这里会下载很多东西，我会说我等了将近半小时？所以不要着急 这就表示创建完成了，我们来看看目录结构 实际上刚才等半天下载的就是node_modules文件夹中的内容。
我们在创建下个项目的时候直接将这个文件夹复制过去就行了。不用再次下载。5运行项目
首先切换至项目目录，然后执行ng serve命令 出现上图所示表示项目运行成功了。
打开浏览器，输入localhost:4200即可访问。 大功告成！一个Angular2的项目就创建好了。').addClass('pre-numbering').hide();
$(this).addClass('has-numbering').parent().append($numbering);
for (i = 1; i <= i++) {
$numbering.append($('').text(i));
$numbering.fadeIn(1700);
以上就介绍了 安装Angular CLI快速搭建Angular2项目，包括了方面的内容，希望对Javascript教程有兴趣的朋友有所帮助。
本文网址链接：/article/detail_4291611.html
上一篇： 下一篇：如何在webstorm创建的angular2项目index.html中引用css和js
引用了css，样式渲染了，但是路径一直再报错,相对路径和绝对路径都不行Angular2（17）
上一篇主要关于项目构建和开发环境的一些内容。今天的内容将会讨论开发angular项目中的关于目录管理和Web安全内容。
项目目录管理：
说到一个大的项目，随着项目越做越大。会发现目录越来越多，层级越来越深。万一哪天临时来的新同事梳理目录，够他喝一壶的了。不仅梳理困难，而且平时debug，也是够呛 我在devtool里找我想要调试的脚本，简直是‘翻衣倒柜’。就这些花的功夫够写好几行代码了。
目录管理算不上啥技术活，但是管理不甚，真的会浪费大量时间效率，导致产能低下。凡是要花你超过3分钟的事情，一定要留个心&#30524;。要不为什么说日本一些大型工程做得好，主要他们流程细节讲究精确。
不扯这么多，其实每个团队都会有属于适合自己的一套规则规范，别人不一定适合你，你的不一定适合别人的。我简略说说我们在协同协作的一些约定吧。 在根目录无外乎：包依赖配置文件、代码缩进、css代码风&#26684;、ts代码风&#26684;等等一些配置文件，虽然有些零碎，但可以自动去维护我们项目一些基础规范。 当然包括代码规范的README.MD.下面简单罗列下：
├── dist
//打包输出目录
├── .editorconfig
//这个大家应该熟悉吧，具体可以访问 http://editorconfig.org
├── .gitignore
├── gulpfile.ts
├── .jshintrc
├── karma.conf.js
├── node_modules
├── package.json
├── protractor.conf.js
├── README.md
├── src
// 项目主入口
├── e2e
├── test
├── .stylelintrc
├── tools // 共用工具类，里面主要管理gulp不同任务脚本，以及依赖的一些第三方库管理，还包括自己写一些.d.ts声明文件
├── tsconfig.json
├── tslint.json
├── yarn.lock
├── 代码规范V2.MD
看完上面罗列的只是一级目录（ps：大家可以自己用tree -L 1等命令，查看自己的项目目录结构），其中一些大家都是可以通用的。 其实最核心还是我们主程序这一块，我们首先按照业务来划分譬如主页、登录、关于，进一步针对面向不同角色用户的划分会员、员工、管理。如果和角色关联性再进一步把业务抽象化划分：商品、门店等等抽象化概念。当然具体到某一功能时我们依据代码模式去 划分：例如数据模型、资源层、组件层等等。其实这些划分标准应该是自己团队统一讨论协商出来的，而且不是死的，阶段性去调整。当然大家要统一去执行，不然真的是如同虚设。
下面跟着我的逻辑来简单看看目录的划分：
└── client
├── app
├── assets
├── css
├── favicon.ico
├── index.html
这里划分很简单，前端客户端目录存放资源目录，样式管理目录，业务应用目录。就不做详述了。
├── app
│&& ├── about
│&& ├── ponent.e2e-spec.ts
│&& ├── ponent.html
│&& ├── ponent.spec.ts
│&& ├── ponent.ts
│&& ├── app.module.ts
│&& ├── app.resolver.ts
│&& ├── app.routes.ts
│&& ├── home
│&& ├── login
│&& ├── main
│&& ├── main-prod.ts
│&& ├── main.ts
│&& ├── rxjs-extensions.ts
│&& ├── shared
│&& ├── system-config.ts
ponent作为组件树顶级，首当其冲放在应用根目录下。项目里默认在ponent放置路由插座，也包括一些共用的sidebar和toolbar或者tabbar。大概构成整个web app的骨架。main目录则是我们应用主入口。对于shared资源共享目录，特地把共用的组件、服务工厂、pipe全部封装到SharedModule里。 利用Angular模块的特性，模块共享。不用额外去找我想要的组件或者服务工厂一一导入进来。当然SharedModule会面临一个越来越臃肿的问题，随着项目变大，我们可以把这个再进行下一拆分成多个小的Module，职能划分更加清楚。
对于单个功能如何去命名规范，其实Angular官方已经有很好的风&#26684;指南===》，对于单一功能主要有Module，Router，Component，Service，Model组成，一个大的功能也是由这些小的模块组成。其实module隔离性确实不错，有时担心某一模块的css会不会影响其他模块，其实不必担心。
├── index.ts
├── pay.module.ts
├── ponent.ts
├── pay.routes.ts
├── qrcode
│&& ├── index.ts
│&& ├── ponent.html
│&& ├── ponent.scss
│&& └── ponent.ts
├── shared
│&& ├── index.ts
│&& ├── product.model.ts
│&& └── wx-pay.service.ts
为了让其他功能引用多个该目录指定函数， 对象或者基础类型，为了代码看上去更加清爽,如下面
import { a, b, c, d } from '../shared/index';
在每个目录定义一个index.ts,导出该目录下的函数， 对象或者基础类型
export * from './a.model';
这其实就是所谓的封装桶,封装桶是把多个模块的导出结果汇总到单一的 ES2015 模块的一种方式。 封装桶本身是一个
ES2015 模块文件，它重新导出选中的导出，这些导入来自其它 ES2015 模块。
对于运营商的劫持注入，大家应该都见过。这种方法最快的解决方案是把网站升级为https，还是http的朋友建议尽快升级为https，chrome对http默认视为不安全网站。 运营商的劫持，无非放放广告，插入一些莫名其妙的广告，恶心你的用户。把网站升级为https基本解决问题了。
但是最可怕的是那些掌握你网站脚本漏洞的黑客，往你网站插入恶意代码，你却浑然不知。尤其是那些涉及金融的网站如比特币交易网站或者支付金融相关的。最为著名的莫过于前段时间的“抢月饼”事件，其实算不上恶意代码注入，只不过是利用脚本做了自动化的事情。但在web安全上，轰动整个圈子。
防范跨站脚本(XSS)攻击
XSS攻击 XSS攻击类&#20284;于SQL注入攻击，攻击之前，我们先找到一个存在XSS漏洞的网站，XSS漏洞分为两种，一种是DOM Based XSS漏洞，另一种是Stored XSS漏洞。理论上，所有可输入的地方没有对输入数据进行处理的话，都会存在XSS漏洞，漏洞的危害取决于攻击代码的威力，攻击代码也不局限于script。
如果你想知道如何利用xss攻击，你可以看看这篇文章简单了解下。
其实xss攻击就是想方设法在你的dom里执行我想要的脚本，如下面的实现
scr=1 onerror=alert('xss')&当找不到图片名为1的文件时，执行alert('xss')
href=javascrip:alert('xss')&s& 点击s时运行alert('xss')
src=javascript:alert('xss');height=0 width=0 /&&利用iframe的scr来弹窗
src=&1& onerror=eval(&\x61\x6c\x65\x72\x74\x28\x27\x78\x73\x73\x27\x29&)&&过滤了alert来执行弹窗
看完上面的你还觉得你的网站还是百分百的安全吗？凡是技术都有漏洞，但我们一定要想法设法去填补漏洞。 现在前端火热，把注意力放在web安全上估计很少，要不然哪有这么多闲扯的。 那么问题来了，有什么好的解决方案，让我马上去做一些基础的漏洞补救呢？ 其实Angular2自带一个微型’杀毒器’,他认为所有DOM都是不安全的，都是处于裸奔状态。如果你想在你的img里加一个不是同源的链接或者脚本，Angular2会告诉你：“同志，请麻烦你出示你的证件的原件和复印件。”
注入DomSanitizer服务，然后调用下面的方法之一，你就可以把一个&#20540;标记为可信任的。
bypassSecurityTrustScriptbypassSecurityTrustUrlbypassSecurityTrustResourceUrl
如果你不进行标记，会被强制标记为不安全不予显示。 Angular2温馨提示，尽可能少用原生的dom api，利用自带的模板机制，把一切处于掌控之中。
现在前端业务逻辑日益复杂，对于大型的Saas项目，一切细节都要考虑清楚。避免某一天收到一封邮件：
我们在你的网站上发现xxx漏洞，请速往比特币账户：xxxxxxxxxxxxxxxxxxxxxx，打入3比特
下篇&将主要涉及webpack打包和移动端Web app开发
&&相关文章推荐
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：4562次
排名：千里之外
原创：28篇
评论：10条
(4)(3)(17)(1)(2)(3)