Angular 4.x快速入门到项目发布 （一）

一、简介

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

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

二、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{//指定返回值类型为string
    return "1";
}
function tell1():void{//无返回值

}

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

三、目录结构&启动

• 建立项目

        如何建立项目以及配置一些重要的json参数以前的文章以及讲过了这里再也不重复了。传送门：http://www.javashuo.com/article/p-ozosgmxr-co.html

• 目录结构

        

根目录：

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启动应用的。