起因:学习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. ansible批量管理

    编写批量安装脚本 [root@m01 scripts]# vim install.sh for ip in $* do echo "=======start install to $ip = ...

  2. 03-python3.5-模拟购物车流程--更新追加细节注释功能

    03-python3.5-模拟购物车流程--更新追加细节注释功能: 模拟购物车更新脚本: #!/usr/bin/env python #-*- coding: utf-8 -*- #__author_ ...

  3. GO : 斐波纳契数列

    package main import "fmt" // fibonacci is a function that returns // a function that retur ...

  4. SDK?JDK?JDK 下载、安装、配置图文教程

    什么是软件开发工具包(SDK)   开发一个软件,需要经过编辑.编译.调试.运行几个过程. 编辑:使用编程语言编写程序代码的过程. 编译:如上一节所讲,就是将编写的程序进行翻译. 调试:程序不可能一次 ...

  5. pgrep

    优势:可以只显示进程号 pgrep -l 显示进程名

  6. CSS3@media媒体查询

    CSS3@media媒体查询 定义 media媒体查询, 当文档宽度变化时, 就可以根据文档宽度的变化来运用样式,不同的宽度应用不同的样式 使用 @media 查询,你可以针对不同的媒体类型定义不同的 ...

  7. my work

    Dad, what's your first job? How did you achieved?

  8. ASUS RT-N16 使用OpenWrt 安装 ss记录

    本文用于记录一下使用ASUS RT-N16 使用OpenWrt 安装 shadowsocks的过程. 前后一共折腾了一个星期,原先使用的是tomato固件,但是在配置iptables的过程中,执行 r ...

  9. 【MySQL】InnoDB 内存管理机制 --- Buffer Pool

    InnoDB Buffer Pool 是一块连续的内存,用来存储访问过的数据页面 innodb_buffer_pool_size 参数用来定义 innodb 的 buffer pool 的大小 是 M ...

  10. [C++ Primer Plus] 第9章、内存模型和名称空间(二)课后习题

    一.复习题 2.using声明和using编译指令的区别 using声明: using std::cin; using std::cout; using std::endl; using编译指令:us ...