Angular2初识
来源:互联网 发布:c语言强制类型转换 编辑:程序博客网 时间:2024/05/19 06:38
与Angular2的第一次亲密接触
这是博主刚入职一份寻觅两周后才找到的实习工作后的第一篇博文,因为客户需要我们使用angular2技术,之前一直学习的是安卓开发,所以对前端知识都不是很清楚。经过近三天的自学,对angular2多了一分了解,希望这篇博文对和我一样迷茫且有需要的童鞋能起到一点点帮助(ps:开始只是听说要使用angular2,但粗心的我以为angular2就是angular1的升级版,抱着学习基础的目标就开始学起angularJs了,所以浪费了不少时间。在这里温馨提示一下,学angularJs可能会对你的angular2之路产生影响,此外建议有TypeScript基础,具体我就不讲了)
开发环境
首先你得安装node.js,为什么要安装这个?因为很多js框架都需要npm工具进行管理,尤其是你要对angular2项目进行构建、启动服务。
没有安装node.js的可以到node.js官网进行下载,有环境的可以跳过。
不知道有没有环境?好吧!在cmd里输入以下两条命令,如果都显示出版本号,那就是可以了。
node -v
npm -v
接下来,我们安装Angular/Cli。为什么要安装这个?这个就是能让angular2程序正常运行起来的一个环境,没有这个,搭建环境将会变得很复杂… …虽然安装它也要费事,同样复制下面的代码完成angularCli的安装。
npm install -g @angular/cli
安装完,下面的代码能帮你检测是否安装成功
ng -v
HelloAngular2
烦人的开发环境终于被我们搞定了,接下来,开发界的老规矩HelloWorld。
首先,我们先在我们的工作空间新建一个项目文件夹,然后按住shift+鼠标右键,选择在此处打开命令窗口,进入命令提示符。输入以下命令:
ng new 刚刚建立的文件夹名例如我的:ng new HelloAngular2
如果你卡在installing packages for tooling via npm的话不要急着去关闭窗口,在这里直接ctrl + c结束批处理,这时我们可以看到,文件夹下多了不少json格式的文件,下面有介绍。
然后输入 npm install -g cnpm --registry=https://registry.npm.taobao.org
明白的人已经知道这是什么意思了,这里不解释了,让你的网络嗖嗖嗖!
接着输入 cnpm install
然后原本只有一些配置文件的文件夹会多出很多文件及文件夹,这就是一个最标准的angular2项目结构。然后我讲下几个比较重要的文件
明白了这些文件和文件夹的意义之后,我们打开src/app/app.component.ts:
进行如图修改之后,保存代码
。进入命令提示符,进入项目目录,输入指令:
ng server
构建完数秒之后会自动打开浏览器,如果没有的话手动
打开浏览器输入地址:http://localhost:4200/
到此为止,我们第一个HelloAngular项目就创建并运行成功了!
是不是很简单呢!
- Angular2初识
- Angular2 初识管道
- angular2
- angular2
- Angular2
- angular2
- 【Angular2】新建Angular2项目
- Angular2 进阶
- Why Angular2
- Angular2 Routing
- angular2 Displaying
- angular2 组件
- Angular2 服务
- angular2 quickstart
- angular2资料
- Angular2学习指南
- Angular2-开始
- Angular2初探
- 日常软件测试工具总结
- linux基础2-11系统恢复技术
- 关于angular js 监听
- html上下标实现
- Canvas:绘制坦克
- Angular2初识
- 钱宝计算器
- MySQL/ 第一章 MySQL数据库
- Java (JSONArray、JSONObject、String字符串中)引号""替换成"-"
- 使用MINGW搭载c语言编译环境
- linux基础2-7访问网络文件共享服务
- 免费馅饼
- 李航 统计学习方法 第一章 课后 习题 答案
- 结构化查询语言分类