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配置 |
Angular2入门体验的更多相关文章
- 有没有最好的学习Angularjs2的视频入门体验?
Which are the best video tutorials for learning AngularJS 2? 有没有最好的学习Angularjs2的视频入门体验? 翻译来源:https:/ ...
- Angular2入门系列教程7-HTTP(一)-使用Angular2自带的http进行网络请求
上一篇:Angular2入门系列教程6-路由(二)-使用多层级路由并在在路由中传递复杂参数 感觉这篇不是很好写,因为涉及到网络请求,如果采用真实的网络请求,这个例子大家拿到手估计还要自己写一个web ...
- Angular2入门系列教程6-路由(二)-使用多层级路由并在在路由中传递复杂参数
上一篇:Angular2入门系列教程5-路由(一)-使用简单的路由并在在路由中传递参数 之前介绍了简单的路由以及传参,这篇文章我们将要学习复杂一些的路由以及传递其他附加参数.一个好的路由系统可以使我们 ...
- Angular2入门系列教程5-路由(一)-使用简单的路由并在在路由中传递参数
上一篇:Angular2入门系列教程-服务 上一篇文章我们将Angular2的数据服务分离出来,学习了Angular2的依赖注入,这篇文章我们将要学习Angualr2的路由 为了编写样式方便,我们这篇 ...
- Angular2入门系列教程4-服务
上一篇文章 Angular2入门系列教程-多个组件,主从关系 在编程中,我们通常会将数据提供单独分离出来,以免在编写程序的过程中反复复制粘贴数据请求的代码 Angular2中提供了依赖注入的概念,使得 ...
- 第1章Java入门体验
第1章Java入门体验 1.java简介和平台应用 Java是sun公司开发出来,现在属于ORACLE公司java分为几个部分:首先是最基础的Java SE部分,这部分是Java的基础知识,主要包括: ...
- Vert.x入门体验
Vert.x入门体验 一.概述 Vert.x(http://vertx.io)是一个基于JVM.轻量级.高性能的应用平台,非常适用于最新的移动端后台.互联网.企业应用架构. 二.安装配置 访问Vert ...
- SpringBoot集成Spring Security入门体验
一.前言 Spring Security 和 Apache Shiro 都是安全框架,为Java应用程序提供身份认证和授权. 二者区别 Spring Security:重量级安全框架 Apache S ...
- Angular2入门系列(五)———— 路由参数设置
Angular2入门系列(五)---- 路由参数设置路由配置: { path: '', component: CarProFile, children: [ { path: 'add', compon ...
随机推荐
- Linux上安装java+tomcat+mysql运行环境
centos6.5jdk"1.7.0_79"mysql5.6apache-tomcat-7.0.53 安装jdk:1.先到oracle下载rpm包:jdk-7u80-linux-x ...
- Peter的烟(水题测试2017082401&洛谷1150)
题目链接:Peter的烟 这道题基本做法很水,不解释. #include<bits/stdc++.h> using namespace std; int main(){ int n,k; ...
- linux安装dpkg安装缺少依赖项的解决
问题: dpkg: error processing package rxvt:i386 (--install): dependency problems - leaving unconfigured ...
- Enjoy Markdown!
有一个神奇的语言,比HTML简单,它巧妙地将内容与格式结合在一起,它就是Markdown! 下面是一个用C语言写的四则运算小测试~ #include <stdio.h> #include ...
- 虚拟机 与 主机 Ping 中的设置
这段时间是学习华清远见的Linux A8 关于Linux移植,遇到虚拟机与主机Ping不通.经查阅后总结出以下 VM中设置. “虚拟机设置-->硬件--> 网络适配器--> 桥接模式 ...
- Java泛型总结——吃透泛型开发
什么是泛型 泛型是jdk5引入的类型机制,就是将类型参数化,它是早在1999年就制定的jsr14的实现. 泛型机制将类型转换时的类型检查从运行时提前到了编译时,使用泛型编写的代码比杂乱的使用objec ...
- 师弟推荐软件-/mathpix
将公式扫描为latex:https://mathpix.com/api.html mathtype与latex转换:http://www.mathtype.cn/jiqiao/zhuanhua-gon ...
- IntelliJ IDEA 2017版 编译器使用学习笔记(十) (图文详尽版);IDE快捷键使用;IDE关联一切
关联一切 一.与spring关联 通过图标跳转相关联的类 设置关联:进入project structure ===>facets =>选加号,===>选spring,默认添 ...
- goole Advance client 离线安装
1.下载插件:Advanced Rest Client 2.最新版的Chrome不支持本地安装插件,所以我们要使能开发者模式 3.把插件后缀名crx改为zip 4.解压,点击‘加载正在开发的扩展程序’ ...
- ArcGIS API for Silverlight/ 开发入门 环境搭建
Silverlight/ 开发入门 环境搭建1 Silverlight SDK下载ArcGIS API for Microsoft Silverlight/WPF ,需要注册一个ESRI Gloab ...