文档章节

Angular 4.x快速入门到项目发布 (一)

JX2011
 JX2011
发布于 2017/09/05 16:05
字数 2144
阅读 417
收藏 24

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{//指定返回值类型为string
    return "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启动应用的。

© 著作权归作者所有

共有 人打赏支持
JX2011
粉丝 25
博文 15
码字总数 6915
作品 0
成都
私信 提问
加载中

评论(1)

renwofei423
renwofei423
不错!学习学习!
《AngularJS学习整理》系列分享专栏

《AngularJS学习整理》系列分享专栏 《AngularJS学习整理》已整理成PDF文档,点击可直接下载至本地查阅 https://www.webfalse.com/read/201748.html 文章 教你用AngularJS框架一行JS代码实现...

开元中国2015
11/09
0
0
给 Web 开发者的 25 款最有用的 AngularJS 工具

AngularJS 是一种新 JavaScript 框架,目的是降低要求,加快开发速度。AngularJS 是让 HTML 标记动态,使其对 web 开发者更有帮助,同时从大量的分段中给定一个标准结构,使开发速度更快更高...

oschina
2015/03/05
67.5K
19
使用Yeoman快速构建基于angular的web应用

前言 最近在学习使用安哥拉(angular.js)编写web应用,看了一些网友实践了解到yeoman,这个工具实在太好用了,必须在这里介绍一下。 angular 首先简单介绍一下angular,它是由google开源的一套...

snakelxc
2013/08/25
0
0
使用Yeoman快速构建基于angular的web应用

前言 最近在学习使用安哥拉(angular.js)编写web应用,看了一些网友实践了解到yeoman,这个工具实在太好用了,必须在这里介绍一下。 angular 首先简单介绍一下angular,它是由google开源的一套...

kisops
2013/08/25
0
0
Angular中ui-grid的使用详解

Angular中ui-grid的使用   在项目开发的过程中,产品经理往往会提出各种需求,以提高用户体验。最近,项目中用到的表格特别多,而且表格的列数和行数也超多。为了让用户浏览更爽,产品经理...

半指温柔乐
08/05
0
0

没有更多内容

加载失败,请刷新页面

加载更多

EOS docker开发环境

使用eos docker镜像是部署本地EOS开发环境的最轻松愉快的方法。使用官方提供的eos docker镜像,你可以快速建立一个eos开发环境,可以迅速启动开发节点和钱包服务器、创建账户、编写智能合约....

汇智网教程
今天
3
0
《唐史原来超有趣》的读后感优秀范文3700字

《唐史原来超有趣》的读后感优秀范文3700字: 作者:花若离。我今天分享的内容《唐史原来超有趣》这本书的读后感,我将这本书看了一遍之后就束之高阁了,不过里面的内容一直在在脑海中回放,...

原创小博客
今天
6
0
IC-CAD Methodology知识图谱

CAD (Computer Aided Design),计算机辅助设计,指利用计算机及其图形设备帮助设计人员进行设计工作,这个定义同样可以用来近似描述IC公司CAD工程师这个岗位的工作。 早期IC公司的CAD岗位最初...

李艳青1987
今天
6
0
CompletableFuture get方法一直阻塞或抛出TimeoutException

问题描述 最近刚刚上线的服务突然抛出大量的TimeoutException,查询后发现是使用了CompletableFuture,并且在执行future.get(5, TimeUnit.SECONDS);时抛出了TimeoutException异常,导致接口响...

xiaolyuh
今天
5
0
dubbo 搭建与使用

官网:http://dubbo.apache.org/en-us/ 一,安装监控中心(可以不安装) admin管理控制台,monitor监控中心 下载 bubbo ops 这个是新版的,需要node.js环境,我没有就用老版的了...

小兵胖胖
今天
7
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部