Angular2入门体验
好的工具往往使得开发应用更快更简单,而不是任何模块都手动开发。angualr cli就是一个支持 创建工程,添加文件,对各种任务如测试、打包、部署等迭代。
本文的目的就是基于TypeScript开发构建一个angualr应用,使用angualr cli可以选择工程的风格。
在本章的 末尾,你可以理解CLI的开发以及开发完整应用的样例。
也可以通过这个链接直接下载源码。
第一步,配置环境变量
在开始开发前,需要安装nodejs。
点击这个网址,Nodejs安装文件下载
在命令行中,执行:
sudo npm install -g @angular/cli
注意执行命令的权限,否则会提示无法写入文件异常。
第二步,创建新工程
打开命令行,创建一个新的工程框架:
ng new my-app
创建工程需要花点时间,稍等一会就行了。
第三步,启动应用
在项目目录,执行命令:
cd my-app
ng serve --open
ng serve
会启动服务器,监控文件,当修改的时候重启应用。
使用--open 选项会自动开启浏览器并访问http://localhost:4200
可以看到下面的信息:
第四步,编辑angular组件
cli创建了angualr组件,应用组件被命名为app=root,可以在./src/app/app,component.ts
中看到。打开文件,修改:
src/app/app.component.ts
export class AppComponent {
title = 'My First Angular App!';
}
浏览器会自动加载重新显示标题。看起来还不错,不过可以在优化一下。
打开src/app/app.component.css
设置样式
h1 {
color: #369;
font-family: Arial, Helvetica, sans-serif;
font-size: 250%;
}
看起来就不错了。
项目文件
首先可以关注下readme.md,它里面包含了cli的基本操作。
更多信息可以参考:
src目录
应用所有的内容都在src目录中,包括组件、模板、样式、图片或者任何app需要的东西。在src之外的内容都被认为是支持app构建的资源。
src
.
├── README.md
├── e2e
│ ├── app.e2e-spec.ts
│ ├── app.po.ts
│ └── tsconfig.e2e.json
├── karma.conf.js
├── node_modules
│ ├──...
├── package-lock.json
├── package.json
├── protractor.conf.js
├── src
│ ├── app
│ ├── assets
│ ├── environments
│ ├── favicon.ico
│ ├── index.html
│ ├── main.ts
│ ├── polyfills.ts
│ ├── styles.css
│ ├── test.ts
│ ├── tsconfig.app.json
│ ├── tsconfig.spec.json
│ └── typings.d.ts
├── tsconfig.json
└── tslint.json
app目录
file |
作用 |
---|---|
app/app.component.{ts,html,css,spec.ts} |
通过html模板定义app,是应用基础组件 |
app/app.module.ts |
描述如何定义应用 |
assets/* |
用来放置图片和部署应用时需要的资源 |
environments/* |
配置信息 |
favicon.ico |
网站图标 |
index.html |
主要的html文件,一般时候不需要修改。CLI会自动添加js和css资源 |
main.ts |
应用的主要入口,基于JIT编译应用,并在浏览器中运行。 |
polyfills.ts |
浏览器支持标准相关 |
styles.css |
样式文件 |
test.ts |
单元测试 |
tsconfig.{app |
spec}.json |
root目录
src
目录下包含了工程内部的内容,其他的文件则帮助测试、支持、文档、发布应用。
file |
作用 |
---|---|
e2e |
里面包含了点对点的测试文件 |
node_modules |
依赖的资源,基于package.json管理 |
.angular-cli.json |
cli的配置文件 |
.editorconfig |
编辑器配置 |
.gitignore |
git忽略的文件 |
karma.conf.js |
karma test 单元测试 |
package.json |
npm管理的第三方组件 |
protractor.conf.js |
Protractor测试配置文件 |
readme.md |
工程基本的信息 |
tsconfig.json |
TypeScript编译配置 |
tslint.json |
TSLint配置 |
- Java常用工具类之删除文件
- Java常用工具类之Excel导出
- js行内式遇到的一些问题 DOM对象和jq对象转换的问题
- JavaWeb(三)servlet
- PL/SQL 编程(三 )程序包和包体,触发器,视图,索引
- 一次关于js事件出发机制反常的解决记录
- Java综合题目
- Ubuntu 16.04下为TITAN 1080 显卡安装驱动及Gpu版TensorFlow|深度学习
- 给新生成的节点(动态生成节点)绑定事件方法总结
- JavaWeb(四)JDBC操作Oracle
- JavaWeb(六)Listener监听器
- JSP引入 - UEditor 富文本编辑器
- JavaWeb(五)Filter过滤器
- JavaWeb(七)Cookie,EL表达式,标准标签库
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法