起因:学习ionic4之前先学习下angular+ts

以win10为开发平台;当前最新版本为angular7;根据官网资料做如下总结:

1. angular安装

前提:Node.js 的 8.x 或 10.x 版本(要想安装 Node.js,请访问 nodejs.org)

执行命令:

npm install -g @angular/cli

2. angular工程的创建

ng new my-app

ng为angular的命令标识

new为新建操作符

my-app为项目名称

3. 启动angular项目

cd my-app
ng serve --open

--open(或只用 -o)选项会自动打开默认浏览器,并访问 http://localhost:4200/

4. 使用visual studio工具编辑相应文件

文件目录在执行cli创建命令时的目录下,加载整个项目目录后,在src/app下看到如下文件:

其中,css——页面布局;

html——前端页面文件;

component.spec.ts——组件测试文件,暂时不知道怎么用;

component.ts—— typescript组件文件,相关程序在此编写;

module.ts——模块文件,加入依赖和声明

app.component.ts说明:

/*这里是从Angular核心模块里面引入了component装饰器*/
import {Component} from '@angular/core'; /*用装饰器定义了一个组件以及组件的元数据 所有的组件都必须使用这个装饰器来注解*/
@Component({
/*组件元数据 Angular会通过这里面的属性来渲染组件并执行逻辑
* selector就是css选择器,表示这个组件可以通过app-root来调用,index.html中有个<app-root>Loading...</app-root>标签,这个标签用来展示该组件的内容
*templateUrl 组件的模板,定义了组件的布局和内容
*styleUrls 该模板引用那个css样式
* */
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
/*AppComponent本来就是一个普通的typescript类,但是上面的组件元数据装饰器告诉Angular,AppComponent是一个组件,需要把一些元数据附加到这个类上,Angular就会把AppComponent当组件来处理*/
export class AppComponent {
/*这个类实际上就是该组件的控制器,我们的业务逻辑就是在这个类中编写*/
title = '学习Angular';
}

  app.module.ts说明: 

其他目录介绍如下(源自网络):

页面文件(html & css)之间的关系:

5. 修改html和ts文件,可以实现对页面的简单修改

component.ts:

import { Component } from '@angular/core';

@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'heroes'; //自定义标题名称
}  

component.html:

<!--The content below is only a placeholder and can be replaced.-->
<div style="text-align:center">
<h1>
{{ title }}
</h1>
<img width="100" alt="Angular Logo" src="data:image/png;base64,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"> </div> <router-outlet></router-outlet>

 其中图片替换是通过转换成base64码后填充到src里实现的

就这样一个简单的angular7项目就搭建起来啦

----------------------------------------------------------------技术成就梦想--------------------------------------------------------------

Angular7.1.4+Typescript3.1框架学习(一)的更多相关文章

  1. Angular7.1.4+Typescript3.1框架学习(三)

    接着第二部分,这部分介绍常见angular指令使用 1. 在父页面文件中添加组件(通过ng命令生成的component) <app-messages></app-messages&g ...

  2. Angular7.1.4+Typescript3.1框架学习(二)

    接着第一部分,这篇文章就 Angular cli进行介绍总结: 1. ng g:列出当前命令 ng g 需在angular工程文件夹下执行: C:\Users\zb\angulardemo\heroe ...

  3. IdentityServer4 ASP.NET Core的OpenID Connect OAuth 2.0框架学习保护API

    IdentityServer4 ASP.NET Core的OpenID Connect OAuth 2.0框架学习之保护API. 使用IdentityServer4 来实现使用客户端凭据保护ASP.N ...

  4. Hadoop学习笔记—18.Sqoop框架学习

    一.Sqoop基础:连接关系型数据库与Hadoop的桥梁 1.1 Sqoop的基本概念 Hadoop正成为企业用于大数据分析的最热门选择,但想将你的数据移植过去并不容易.Apache Sqoop正在加 ...

  5. Spring框架学习一

    Spring框架学习,转自http://blog.csdn.net/lishuangzhe7047/article/details/20740209 Spring框架学习(一) 1.什么是Spring ...

  6. EF框架学习手记

    转载: [ASP.NET MVC]: - EF框架学习手记 1.EF(Entity Framework)实体框架EF是ADO.NET中的一组支持开发面向数据的软件应用程序的技术,是微软的一个ORM框架 ...

  7. web框架学习列表

    转载自鲁塔弗的博客,原文网址:http://lutaf.com/148.htm web framework层出不穷,特别是ruby/python,各有10+个,php/java也是一大堆 根据我自己的 ...

  8. 2013 最新的 play web framework 版本 1.2.3 框架学习文档整理

    Play framework框架学习文档 Play framework框架学习文档 1 一.什么是Playframework 3 二.playframework框架的优点 4 三.Play Frame ...

  9. SSH 框架学习之初识Java中的Action、Dao、Service、Model-收藏

    SSH 框架学习之初识Java中的Action.Dao.Service.Model-----------------------------学到就要查,自己动手动脑!!!   基础知识目前不够,有感性 ...

随机推荐

  1. Machine Learning 第一二周

    # ML week 1 2 一.关于machine learning的名词 学习 从无数数据提供的E:experience中找到一个函数使得得到T:task后能够得到P:prediction 监督学习 ...

  2. Java 中 this 和 super 的用法总结

    his this 是自身的一个对象,代表对象本身,可以理解为:指向对象本身的一个指针. this 的用法在 Java 中大体可以分为3种: 1.普通的直接引用 这种就不用讲了,this 相当于是指向当 ...

  3. Vue 中如何引入第三方 JS 库

    一绝对路径直接引入全局可用 二绝对路径直接引入配置后import 引入后再使用 三webpack中配置 aliasimport 引入后再使用 四webpack 中配置 plugins无需 import ...

  4. ps top 命令

    pstree :显示进程树 ps: a:查看和终端有关的进程 u:显示进程是哪个用户启动的 x:和终端无关 ps aux |head 进程的分类: 和终端有关 和终端无关 进程状态: D:不可中断睡眠 ...

  5. Codeforces Gym 101190M Mole Tunnels - 费用流

    题目传送门 传送门 题目大意 $m$只鼹鼠有$n$个巢穴,$n - 1$条长度为$1$的通道将它们连通且第$i(i > 1)$个巢穴与第$\left\lfloor \frac{i}{2}\rig ...

  6. 解决 “MoveFile”: 类型库“XXX.dll”中的标识符已经是宏;使用“rename”限定符 类型库符号与系统符号冲突问题

    今天在VS工程当中引入一个组件,编译的时候出现警告, “MoveFile”: 类型库“XXX.dll”中的标识符已经是宏:使用“rename”限定符.虽然只是一个警告,但看着实在不爽,更重要的是,警告 ...

  7. Elasticsearch .net client NEST使用说明 2.x -更新版

    Elasticsearch .net client NEST使用说明 目录: Elasticsearch .net client NEST 5.x 使用总结 elasticsearch_.net_cl ...

  8. 一键git push脚本(python版)

    #!/usr/bin/env python import os import subprocess import sys import time gitconfig = { 'cwd': './blo ...

  9. Python游戏编程入门

    <Python游戏编程入门>这些文章负责整理在这本书中的知识点.注意事项和课后习题的尝试实现.并且对每一个章节给出的最终实例进行分析和注释. 初识pygame:pie游戏pygame游戏库 ...

  10. 11_vim

    vim编辑器 文本编辑器,字处理器linux重要哲学思想之一:使用纯文本格式来保存软件的配置信息,大多数情况下都是如此,而且一切皆文件此前学过nano,sed..nano入门简单,但功能简陋 vi:V ...