1、简介

        angular-cli的使用以及一些重要参数配置以及在之前的文章里说过了，这里就不在废话了。

        首先我们知道Angular创建的项目是用typescript写的，所以我们不得不简单学习一下typescript的相关知识,然后就可以开始我们愉快代码之旅了，代码方面我们主要涉及到是组件创建，路由配置以及异步加载的路由配置等。

2、typescript快速入门

TypeScript可以给变量指定类型。指定类型后只能给该变量赋指定类型的值，如果不给初始值的话默认是undefined。 
格式： 变量声明 变量名：类型=初始值； 
例：var isDone:boolean=false; 
在TypeScript中，如果不指定类型直接给初始值的话,编译器会认为你给的初始值的类型就是这个变量的类型。

1.boolean类型

let isDone: boolean = false;

 

2.number类型 
和JavaScript一样，TypeScript里的所有数字都是浮点数。 这些浮点数的类型是 number。 除了支持十进 制和十六进制字面量，Typescript还支持ECMAScript 2015中引入的二进制和八进制字面量。

let decLiteral: number = 6;
let hexLiteral: number = 0xf00d;
let binaryLiteral: number = 0b1010;
let octalLiteral: number = 0o744;

 

3.String类型 
String类型有两个新特性，用起来很方便 
1）多行文本 
用键盘1左边的反引号括起来后，直接编写要显示的内容，编译成js会自动加上双引号和加号。 
比如在平时开发中我们拼接html代码，这个时候用多行文本就很方便了省去了编写加号和双引号，可读性也提高了。非常好用！

这是TypeScript代码

var str1 = `<div><h1>Hello TypeScript</h1><span>xxx</span></div>`;

 

编译成js代码后：

var str1 = "<div><h1>Hello TypeScript</h1><span>xxx</span></div>";

 

2)字符串模版 
字符串模版就是在多行文本里插入表达式或调用方法。表达式的形式是${ expr }。 
这是TypeScript代码

var name: string = "yzq";
function getAge(){return 23;
}
var info: string = `hello my name is ${name},
I'm ${getAge()} years old`;

 

编译成js代码后：

var name = "yzq";
function getAge() {return 23;
}
var info = "hello my name is " + name + ",\nI'm " + getAge() + " years old";

 

3）自动拆分字符串 
自动拆分字符串是指当你用字符串模版去调用一个方法的时候，字符串模版中的表达式的值会自动赋给被调用方法的参数。

TypeScript代码

var name: string = "yzq";
function getAge(){return 23;
}
function showInfo(template,name,age){console.log(template);console.log(name);console.log(age);
}
showInfo`my name is ${name},I'm ${getAge()} years old.`;//调用方式为方法命后面跟上反引号，将值传入。

 

编译成js代码后：

var name = "yzq";
function getAge() {return 23;
}
function showInfo(template, name, age) {console.log(template);console.log(name);console.log(age);
}
(_a = ["my name is ", ",I'm ", " years old."], _a.raw = ["my name is ", ",I'm ", " years old."], showInfo(_a, name, getAge())); //调用方式为方法命后面跟上反引号，将值传入。
var _a;

 

打印结果，可以看到，当我们调用这个方法的时候，会把传进去参数根据表达式的数量自动拆分了。 
第一个template的值就是被拆分的字符串模版的一个数组，后面的参数值就是相应表达式的值。 

4.Array 
TypeScript像javascript一样可以操作数组元素。 有两种方式可以定义数组。 
第一种，可以在元素类型后面接上 []，表示由此类型元素组成的一个数组：

var list:number[]=[1,2,3];

 

第二种方式是使用数组泛型，Array<元素类型>：

var list1:Array<String>=["1","2","3"];

 

5.Enum（枚举） 
一般在数据个数固定且值固定的情况下使用枚举。例如一个星期有七天，周一到周日。

enum Color{red,green,blue};
var c:Color=Color.blue;
var c1:Color=Color[0];
console.log(c);//这里打印的是下标
console.log(c1);//这里打印的是值

 

可以手动指定下标

enum Color{red=2,green=4,blue};
var c:Color=Color.blue;
var c1:Color=Color[2];
console.log(c);//这里打印的是下标  5
console.log(c1);//这里打印的是值   red

 

6.any（任意值） 
有时候，我们会想要为那些在编程阶段还不清楚类型的变量指定一个类型。 这些值可能来自于动态的内容，比如来自用户输入或第三方代码库。 这种情况下，我们不希望类型检查器对这些值进行检查而是直接让它们通过编译阶段的检查。 那么我们可以使用 any类型来标记这些变量。 
如果变量被指定位any类型，则可以任意赋值。

var anyStr:any=123;
anyStr="字符串";
anyStr=false;
var list:Array<any>=[1,"2",false];

 

7.void 
void类型像是与any类型相反，它表示没有任何类型。 当一个函数没有返回值时，你通常会见到其返回值类型是 void

function tell():string{//指定返回值类型为stringreturn "1";
}
function tell1():void{//无返回值}

以上为转载类容，原文地址：http://blog.csdn.net/yuzhiqiang_1993/article/details/54136491

3、目录结构&启动

• 创建项目

        如何创建项目以及配置一些重要的json参数之前的文章以及讲过了这里不再重复了。传送门：https://my.oschina.net/u/1403181/blog/1529041

• 目录结构

        

根目录：

e2e                 端到端的测试目录  用来做自动测试的
node_modules        第三方依赖包存放目录
src                 应用源代码目录  

src目录：

app目录               包含应用的组件和模块，我们要写的代码都在这个目录
assets目录            资源目录，存储静态资源的  比如图片
environments目录      环境配置。Angular是支持多环境开发的，我们可以在不同的环境下（开发环境，测试环境，生产环境）共用一套代码，主要用来配置环境的
index.html          整个应用的根html，程序启动就是访问这个页面
main.ts             整个项目的入口点，Angular通过这个文件来启动项目
polyfills.ts        主要是用来导入一些必要库，为了让Angular能正常运行在老版本下
styles.css          主要是放一些全局的样式
tsconfig.app.json   TypeScript编译器的配置,添加第三方依赖的时候会修改这个文件
test.ts             自动化测试

app目录：

app.module.ts           根模块
app.component.ts        根模块的组件
app.component.css       组件的样式
app.component.html      组件的template

        每个 Angular 应用至少有一个模块（根模块），通过angular-cli创建一个新的项目这个更模块的文件也直接在app目录下帮我们生成了——app.module.ts（这就是应用的根模块（AppModule））

src/app/app.module.ts
======================
import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent }  from './app.component';@NgModule({imports:      [ BrowserModule ],declarations: [ AppComponent ],bootstrap:    [ AppComponent ]
})
export class AppModule { }

        可以看到这里使用import语法导入了2个Angular模块和一个根组件（这里暂时把app.component.ts叫根组件），然后就是@NgModule装饰器的应用：

        @NgModule装饰器将该文件标记为 Angular 模块类。@NgModule接受一个元数据对象，告诉 Angular 如何编译和启动应用：

• imports——模块把特性合并成离散单元的一种方式，当应用需要模块的特性时，将其添加到imports数组中，它告诉Angular应用需要它们来正常工作。比如要用到input的双向数据绑定指令[(ngModel)]时就遇到导入FormsModule。
• declarations——告诉Angular那些组件属于AppModule,目前这里只声明了一个根组件。
• bootstrap——通过引导AppModule（根模块）启动应用，将bootstrap数组里的组件插入到浏览器的DOM结构中。

        AppModule介绍完了，现在我们来看看如何引导AppModule启动应用。首先找到Angular引导启动的入口点，前面介绍目录时也标示了，就是main.ts       

src/main.ts
===========
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule }              from './app/app.module';platformBrowserDynamic().bootstrapModule(AppModule);

        引导过程搭建运行环境，从模块的bootstrap数组中提出根AppComponent， 创建该组件的实例，并将其插入到组件selector标识的元素标签中，AppComponent选择器 — 在这里以及文档大部分例子中 — 是my-app， 所以 Angular 在index.html中查找像这样的<my-app>标签【ps:这里有一点点组件语法的东西，不清楚可以跳过，组件语法后面教程会有的】。

src/index.html
===========
<app-root></app-root>

          就这样Angular通过main.ts这个入口点动态 (JiT) 编译创建浏览器平台并引导AppModule启动。

       至此，我们也算简单入门了typescript,同时了解了项目的目录结构以及Angular是如何引导AppModule启动应用的。