起因:学习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. nginx 阻止非自己域名解析到服务器

    server模块加入 default_server server { listen 80 default_server; return 403; # return 301 https://$serve ...

  2. Node.js基础学习四之注册功能

    前言:在Node.js学习(二)和(三)中介绍了如何在Node.js 中获取登录的用户名和密码与数据库进行验证并返回数据给客户端 需求:实现注册功能 为了区分登录和注册是两个不同的请求,在端口后面加上 ...

  3. mysql中的内置函数

    这里主要介绍mysql丰富的内置函数. 数学函数 数学函数相对比较简单,就是涉及一些数值的计算,这里列出数学函数的功能,仅个别给出实例. 函数 作 用 ABX(x) 返回x的绝对值 CEIL(X),C ...

  4. Redis查漏补缺:最易错过的技术要点大扫盲

    考虑到绝大部分写业务的程序员在实际开发中使用Redis时,只会Setvalue和Getvalue两个操作,对Redis整体缺乏一个认知.又恰逢笔者有同事下周要去培训Redis,所以笔者斗胆以Redis ...

  5. linux下 如何切换到root用户

    默认安装完成之后并不知道root用户的密码,那么如何应用root权限呢? (1)sudo 命令 xzm@ubuntu:~$  sudo 这样输入当前管理员用户密码就可以得到超级用户的权限.但默认的情况 ...

  6. C# 模拟 HTTP POST请求

    /// <summary> /// 用于以 POST 方式向目标地址提交表达数据 /// 使用 application/x-www-form-urlencoded 编码方式 /// 不支持 ...

  7. bzoj 3513: [MUTC2013]idiots FFT

    bzoj 3513: [MUTC2013]idiots FFT 链接 bzoj 思路 参考了学姐TRTTG的题解 统计合法方案,最后除以总方案. 合法方案要不好统计,统计不合法方案. \(a+b< ...

  8. jQuery Validate和Thymeleaf相关

    jQuery Validate https://www.cnblogs.com/liuhongfeng/p/5135676.html https://www.cnblogs.com/linjiqin/ ...

  9. 【我的前端自学之路】【HTML5】web 存储

    以下为自学笔记内容,仅供参考. 转发请保留原文链接:https://www.cnblogs.com/it-dennis/p/10503539.html 什么是Web存储 cookie最大的缺陷是在每一 ...

  10. SetForegroundWindow Win32-API not always works on Windows-7

    BIG NOTE After messing with this API for the last 2 months, the solution/s below are all not stable ...