Angular4学习笔记之准备和环境搭建项目


Posted in Javascript onAugust 01, 2017

写在前面的废话1

我用angular的时候还是1.x,属于代码写的很反人类但是angular2还没出的蛮荒年代。我本身是从j2ee转到Android的工程师,也是就是说,我的日常开发语言是Java。突然切换到JavaScript那真是难受的像北极熊同企鹅讲话,更何况后来嫌webstorm太卡而用起了没有提示的sublime(嗯,终于治好了多年顽疾的“从不记函数名症候群”)。经过了一段痛苦不堪的撞墙经历后,总算是开始习惯了。

但我还是想大吼一声,JavaScriptWCNM。

发泄完了说正事。

现在前端的主要框架比较火的是React,Angular虽然背后是谷歌但还是差了那么一点。两者我都用过,说一下我感觉的Angular的特点,以及和React的不同。

首先直接拿Angular和React比较是不公平的。因为Angular是一个什么都有的全家桶,React只是MVC里的V,经常需要搭配一些别的东西使用比如redux(我用的标配是react+redux+router)。.

其次,Angular的特点是绑定,从写代码的角度上说比较符合MVC的概念。4.0里的component就相当于C和V的合体,template或者templateUrl就是view,而class就是所谓的controller。通过在Controller里声明唯一的Model在对应的View里使用,达到解耦的目的。而且Angular还支持注入service,进一步分离业务逻辑。

React的特点其实是虚拟dom,是提速性质的东西。Redux才是逻辑相关,通过唯一的state来解耦,你换state我换值。两者的思路都是很相似的,个人感觉Redux里的Reducer就是Angular里的service。

第三,哪个更好一点?我个人还是喜欢React更多,当然这个主观因素占了很大的层面。写Angular的时候我还是一副怨天尤人的Android程序员,写React的时候就是已经入门的前端开发者了。

写在前面的废话2

一些准备工作,是必须的。

node,一切的基础。

sublime,这个是我个人使用的ide。之前用过webstorm,但是要注册而且多少有点慢。但是用sublime小缺点就是需要自己下插件,webstorm确实功能全一点….subime对React的支持还是蛮好的,但是对Angular的支持还是有点坑。当然,也可能是我插件没装对。

git,本项目已经提交到github。当然,更新程度和我的懒惰程度成反比。其实这个项目我已经完成了,但是因为某种来自东方的神秘力量(直说了吧,就是手贱)又给删掉了…

英文好,非必须。但是英文好可以直接去看angular的官方网站就,传送门,翻墙的话速度快一些。Angular的中文版还停留在2.0,写法和4.0略有不同。

当然4.0和2.0其实也没差多少,至少比2.0和1.x之间的差距要小的多(滚蛋吧scope)

废话说完了,之所以有1有2没有3,是因为我觉得很多时候我只要犯二就可以了。

先说需求-任何没有需求的项目都是耍!流!氓!

需求很简单,也基本上是在模仿超级机器人大战的整备页面(没错我是个钢弹迷而且最近刚好正在玩机战z)。

首先本项目包含3个页面:

1 主页

Angular4学习笔记之准备和环境搭建项目 

上半部展示的是项目说明,下半部筛选出3个机体并进行简单的说明。

2 机体列表页

Angular4学习笔记之准备和环境搭建项目

机体展示,展示所有拥有的机体,包括名称和状态(为了防止图片侵权,用的都是我自己做的高达模型)。

3 机体详情页

Angular4学习笔记之准备和环境搭建项目

从主页和详情页面点击任意一部机体都可以跳转到这个页面,主要介绍机体的各项参数,基本情况以及状态。

环境搭建

首先要有node以及sublime,然后需要用sublime的package manager安装插件typescript。

关于如何安装node、sublime的包管理器并下载插件请参见之前文章里的方法。

其次,可以用sourceTree或者命令行克隆地址:

1)angular给的官方quickstart

https://github.com/angular/quickstart.git

2)我的改编后的版本,好处是集成了webpack和scss,缺点就是写的比较乱而且不知道有什么坑。

https://github.com/stormrabbit/gundam-meister.git

第三,npm install 安装各项依赖。

如果安装失败可以考虑用下cnpm

cnpm:

npm install -g cnpm --registry=http://r.cnpmjs.org
npm install microtime --registry=http://r.cnpmjs.org --disturl=http://dist.cnpmjs.org

假装安装一下

Angular4学习笔记之准备和环境搭建项目

运行命令 npm start

Angular4学习笔记之准备和环境搭建项目

目录结构:

Angular4学习笔记之准备和环境搭建项目

src/main.ts 项目的入口文件 暂时不需要修改

src/index.html 项目展示的html,容器,相当于java的虚拟机,标签是自定义的component的标签化。

src/app/app.module.ts 项目的配置文件,所用的component、注册的service以及以后会有的routing等等都会注册到这里。相当于Android的mainfist.xml文件。

src/app/component/appcomponent/app.component.ts 项目的第一个容器,也是项目的正式入口。相当于java中的main函数,Android中的MainActivity。当然也不是一定要叫这个名字,不过是一种约定俗成。其中template是html页面,相当于view,class相当于controller。

访问http://localhost:3000/,显示页面

Angular4学习笔记之准备和环境搭建项目

环境搭建完毕,hello,world。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js小技巧--自动隐藏红叉叉
Aug 13 Javascript
JQuery与Ajax常用代码实现对比
Oct 03 Javascript
javascript 判断数组是否已包含了某个元素的函数
May 30 Javascript
jQuery中slice()方法用法实例
Jan 07 Javascript
javascript实现的闭包简单实例
Jul 17 Javascript
js中unicode转码方法详解
Oct 09 Javascript
javascript实现可键盘控制的抽奖系统
Mar 10 Javascript
js将json格式的对象拼接成复杂的url参数方法
May 25 Javascript
vue自定义filters过滤器
Apr 26 Javascript
Javasript设计模式之链式调用详解
Apr 26 Javascript
Vue通过ref父子组件拿值方法
Sep 12 Javascript
vue组件添加事件@click.native操作
Oct 30 Javascript
jQuery上传插件webupload使用方法
Aug 01 #jQuery
js实现鼠标拖拽多选功能示例
Aug 01 #Javascript
使用Node.js实现RESTful API的示例
Aug 01 #Javascript
关于jquery form表单序列化的注意事项详解
Aug 01 #jQuery
js下拉菜单生成器dropMenu使用方法详解
Aug 01 #Javascript
简述jQuery Easyui一些用法
Aug 01 #jQuery
js图片上传的封装代码
Aug 01 #Javascript
You might like
怎样在UNIX系统下安装php3
2006/10/09 PHP
PHP实现视频文件上传完整实例
2014/08/28 PHP
PHP截取指定图片大小的方法
2014/12/10 PHP
document 和 document.all 分别什么时候用
2006/06/22 Javascript
JavaScript中的Location地址对象
2008/01/16 Javascript
最佳的addEvent事件绑定是怎样诞生的
2011/10/24 Javascript
打开新窗口关闭当前页面不弹出关闭提示js代码
2013/03/18 Javascript
jQuery中用dom操作替代正则表达式
2014/12/29 Javascript
jQuery中:has选择器用法实例
2014/12/30 Javascript
DOM基础教程之事件类型
2015/01/20 Javascript
JavaScript中的定时器之Item23的合理使用
2015/10/30 Javascript
使用javascript插入样式
2016/03/14 Javascript
深入浅析JavaScript函数前面的加号和叹号
2016/07/09 Javascript
零基础轻松学JavaScript闭包
2016/12/30 Javascript
Bootstrap中glyphicons-halflings-regular.woff字体报404错notfound的解决方法
2017/01/19 Javascript
基于hover的用法实例(推荐)
2017/07/04 Javascript
浅谈JavaScript的innerWidth与innerHeight
2017/10/12 Javascript
JavaScript实现计算圆周率到小数点后100位的方法示例
2018/05/08 Javascript
微信小程序实现slideUp、slideDown滑动效果及点击空白隐藏功能示例
2018/12/11 Javascript
ES6中的class是如何实现的(附Babel编译的ES5代码详解)
2019/05/17 Javascript
Jquery使用each函数实现遍历及数组处理
2020/07/14 jQuery
[06:33]DOTA2亚洲邀请赛小组赛第二日 TOP10精彩集锦
2015/01/31 DOTA
Python读取图片为16进制表示简单代码
2018/01/19 Python
医药营销专业个人自荐信
2013/09/29 职场文书
公司同意接收函
2014/01/13 职场文书
公司业务员岗位职责
2014/03/18 职场文书
初中生操行评语大全
2014/04/24 职场文书
党的群众路线教育实践活动宣传标语口号
2014/06/06 职场文书
电话客服专员岗位职责
2014/06/28 职场文书
四风问题对照检查整改措施思想报告
2014/10/05 职场文书
2015年超市工作总结
2015/04/09 职场文书
青年志愿者服务活动总结
2015/05/06 职场文书
活动费用申请报告
2015/05/15 职场文书
浅谈Python 中的复数问题
2021/05/19 Python
详解vue身份认证管理和租户管理
2021/05/25 Vue.js
Node.js实现爬取网站图片的示例代码
2022/04/04 NodeJs