文档章节

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

JX2011
 JX2011
发布于 2017/09/05 16:05
字数 2144
阅读 406
收藏 24
点赞 0
评论 1

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
不错!学习学习!
Angular 6.0正式版发布,都有哪些新功能

点击关注异步图书,置顶公众号 每天与你分享IT好书 技术干货 职场知识 在Angular 5发布半年之后,Angular 6在昨天正式发布,那么在这个版本有哪些新功能呢?新版本重点关注工具链以及工具链在...

异步社区 ⋅ 05/08 ⋅ 0

Angular 6正式版发布,都有哪些新功能

在Angular 5发布半年之后,Angular 6在昨天正式发布,那么在这个版本有哪些新功能呢?新版本重点关注工具链以及工具链在 Angular 中的运行速度问题。除此之外,这次更新还包括框架包(@angu...

code_xzh ⋅ 05/05 ⋅ 0

勿以 star 数论高低!React 在前端框架世界仍是领先地位

上周在前端的 JavaScript 框架世界发生了一件称得上是“里程碑”的事:Vue.js 在 GitHub 上的 star 数量终于超过了 React.js 的 star 数量。 通过使用一个叫做 Star History 的工具,我们可以...

局长 ⋅ 昨天 ⋅ 0

【前端】—聊聊我认识的Angular

前言 最近接触的项目前端用到了Angular框架,之前略有耳闻,从vue换到Angular,感觉东西差不多,还是要系统学习的,先来了解下。 正文 1、Angular 的发展 AngularJS 是一款来自Google的前端J...

zt15732625878 ⋅ 05/19 ⋅ 0

构建 Web 应用程序的开发平台 Angular 6.0.0-rc.5 发布

Angular 6.0.0-rc.5 发布了。Angular 是一个使用 TypeScript / JavaScript 和其他语言构建移动和桌面 Web 应用程序的开发平台。 官方暂未提供更新内容,您可以查看以下页面保持关注: 发布主...

周其 ⋅ 04/15 ⋅ 0

Multi-Stage Build多阶段Build Docker镜像

我们在上一篇手记 中给大家介绍了如何完全使用Docker搭建Angular开发和测试环境,今天我们接着这个话题给大家看看如果通过Docker部署Angular项目。 我们先看看假如没有Docker,我们一般怎么去...

麦兜搞IT ⋅ 05/29 ⋅ 0

Angular 6.0 即将发布,承诺更小更快更易用

本月早些时候,Angular 团队发布了 6.0 的第五版候选版本,其中包括一些错误修复以及添加令牌标记和支持配置导航网址。 根据 Angular 的开发者支持者 Stephen Fluin 的说法,RC 意味着团队已...

达尔文 ⋅ 04/24 ⋅ 0

AngularJS:跟随官方教程,一起构建一个简单的项目

AngularJS大白话简介: AngularJS是一个前端框架,和Bootstrap不同,他是一个为了构建 单页应用 而诞生的。Bootstrap是为了解决CSS样式和一些简单的互动(主要是提供了各种各样的样式,我们直...

那就远走 ⋅ 05/11 ⋅ 0

Angular 6 服务端渲染之 udao 终章

先介绍下小朋友 udao,首先是一个开源项目,代码足够简单,其次是跟随 Angular 大小版本一起成长的项目,会定期更新所有依赖包以及兼容最新版本的写法 Github 地址也贴出来好多次了:github....

orangexc ⋅ 05/10 ⋅ 0

[Angular Material完全攻略] Day 01 - 开始 & 简介

转载 从Angular第2版正式release后,根据全球最大工程师讨论区StackOverflow的统计,从2016开始的Angular讨论度就不断窜升,甚至超越了React,直到了2017年,甚至摆脱了前一代Angularjs的阴影...

readilen ⋅ 05/21 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

MySQL 数据库设计总结

规则1:一般情况可以选择MyISAM存储引擎,如果需要事务支持必须使用InnoDB存储引擎。 注意:MyISAM存储引擎 B-tree索引有一个很大的限制:参与一个索引的所有字段的长度之和不能超过1000字节...

OSC_cnhwTY ⋅ 53分钟前 ⋅ 0

多线程(四)

线程池和Exector框架 什么是线程池? 降低资源的消耗 提高响应速度,任务:T1创建线程时间,T2任务执行时间,T3线程销毁时间,线程池没有或者减少T1和T3 提高线程的可管理性。 线程池要做些什...

这很耳东先生 ⋅ 今天 ⋅ 0

使用SpringMVC的@Validated注解验证

1、SpringMVC验证@Validated的使用 第一步:编写国际化消息资源文件 编写国际化消息资源ValidatedMessage.properties文件主要是用来显示错误的消息定制 [java] view plain copy edit.userna...

瑟青豆 ⋅ 今天 ⋅ 0

19.压缩工具gzip bzip2 xz

6月22日任务 6.1 压缩打包介绍 6.2 gzip压缩工具 6.3 bzip2压缩工具 6.4 xz压缩工具 6.1 压缩打包介绍: linux中常见的一些压缩文件 .zip .gz .bz2 .xz .tar .gz .tar .bz2 .tar.xz 建立一些文...

王鑫linux ⋅ 今天 ⋅ 0

6. Shell 函数 和 定向输出

Shell 常用函数 简洁:目前没怎么在Shell 脚本中使用过函数,哈哈,不过,以后可能会用。就像java8的函数式编程,以后获取会用吧,行吧,那咱们简单的看一下具体的使用 Shell函数格式 linux ...

AHUSKY ⋅ 今天 ⋅ 0

单片机软件定时器

之前写了一个软件定时器,发现不够优化,和友好,现在重写了 soft_timer.h #ifndef _SOFT_TIMER_H_#define _SOFT_TIMER_H_#include "sys.h"typedef void (*timer_callback_function)(vo...

猎人嘻嘻哈哈的 ⋅ 今天 ⋅ 0

好的资料搜说引擎

鸠摩搜书 简介:鸠摩搜书是一个电子书搜索引擎。它汇集了多个网盘和电子书平台的资源,真所谓大而全。而且它还支持筛选txt,pdf,mobi,epub、azw3格式文件。还显示来自不同网站的资源。对了,...

乔三爷 ⋅ 今天 ⋅ 0

Debian下安装PostgreSQL的表分区插件pg_pathman

先安装基础的编译环境 apt-get install build-essential libssl1.0-dev libkrb5-dev 将pg的bin目录加入环境变量,主要是要使用 pg_config export PATH=$PATH:/usr/lib/postgresql/10/bin 进......

玛雅牛 ⋅ 今天 ⋅ 0

inno安装

#define MyAppName "HoldChipEngin" #define MyAppVersion "1.0" #define MyAppPublisher "Hold Chip, Inc." #define MyAppURL "http://www.holdchip.com/" #define MyAppExeName "HoldChipE......

backtrackx ⋅ 今天 ⋅ 0

Linux(CentOS)下配置php运行环境及nginx解析php

【part1:搭建php环境】 1.选在自己需要安装的安装包版本,wget命令下载到服务器响应目录 http://php.net/releases/ 2.解压安装包 tar zxf php-x.x.x 3.cd到解压目录执行如下操作 cd ../php-...

硅谷课堂 ⋅ 今天 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部