Angular7.1.4+Typescript3.1框架学习(一)
起因:学习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框架学习(一)的更多相关文章
- Angular7.1.4+Typescript3.1框架学习(三)
接着第二部分,这部分介绍常见angular指令使用 1. 在父页面文件中添加组件(通过ng命令生成的component) <app-messages></app-messages&g ...
- Angular7.1.4+Typescript3.1框架学习(二)
接着第一部分,这篇文章就 Angular cli进行介绍总结: 1. ng g:列出当前命令 ng g 需在angular工程文件夹下执行: C:\Users\zb\angulardemo\heroe ...
- IdentityServer4 ASP.NET Core的OpenID Connect OAuth 2.0框架学习保护API
IdentityServer4 ASP.NET Core的OpenID Connect OAuth 2.0框架学习之保护API. 使用IdentityServer4 来实现使用客户端凭据保护ASP.N ...
- Hadoop学习笔记—18.Sqoop框架学习
一.Sqoop基础:连接关系型数据库与Hadoop的桥梁 1.1 Sqoop的基本概念 Hadoop正成为企业用于大数据分析的最热门选择,但想将你的数据移植过去并不容易.Apache Sqoop正在加 ...
- Spring框架学习一
Spring框架学习,转自http://blog.csdn.net/lishuangzhe7047/article/details/20740209 Spring框架学习(一) 1.什么是Spring ...
- EF框架学习手记
转载: [ASP.NET MVC]: - EF框架学习手记 1.EF(Entity Framework)实体框架EF是ADO.NET中的一组支持开发面向数据的软件应用程序的技术,是微软的一个ORM框架 ...
- web框架学习列表
转载自鲁塔弗的博客,原文网址:http://lutaf.com/148.htm web framework层出不穷,特别是ruby/python,各有10+个,php/java也是一大堆 根据我自己的 ...
- 2013 最新的 play web framework 版本 1.2.3 框架学习文档整理
Play framework框架学习文档 Play framework框架学习文档 1 一.什么是Playframework 3 二.playframework框架的优点 4 三.Play Frame ...
- SSH 框架学习之初识Java中的Action、Dao、Service、Model-收藏
SSH 框架学习之初识Java中的Action.Dao.Service.Model-----------------------------学到就要查,自己动手动脑!!! 基础知识目前不够,有感性 ...
随机推荐
- Angular4 管道
- JQuery小知识
一.禁用鼠标右键 $(document).ready(function() { $(document).bind("contextmenu", function(e) { retu ...
- 基于PLC1850平台的ARP包请求与响应
一.以太网ARP报文格式 ①.以太网目的地址:占6个字节(接收方的MAC地址,不清楚时发广播地址:FF-FF-FF-FF-FF-FF) ②.以太网源地址:占6个字节(发送方的MAC地址) ③.帧类型: ...
- Docker 构建 RabbitMQ 集群
刚开始,关于RabbitMQ集群的搭建,我找到了这篇文章:Docker 安装 RabbitMQ 集群 从而找到了第三方的RabbitMQ集群容器 rabbitmq-server 但是这个容器只有3.6 ...
- java 接口详解
定义接口 接口继承和实现继承的规则不同,一个类只有一个直接父类,但可以实现多个接口.Java 接口本身没有任何实现,只描述 public 行为,因此 Java 接口比 Java 抽象类更抽象化.Jav ...
- GHSpro文件上传
GHSpro文件上传 文章 GHSpro 文件上传 基本设计图 上传 上传方式的选择 采用iframe 的表单上传 ajaxfileupload <div id="step-2&quo ...
- 【Rice】Cultivar versus Variety
From Cindy Haynes, Department of Horticulture As a horticulturist, it is important that I use the ...
- Unity Ragdoll 实现死亡效果 心得+坑点总结
效果展示 正如其名,Ragdoll可以让人物模型实现像布娃娃一样物理效果 创建Ragdoll 在场景中新建 3D Object → Ragdoll... 接下来是一个初见复杂的绑定界面,这里我做了简单 ...
- Vue 组件&组件之间的通信 之 父组件向子组件传值
父组件向子组件传值:父组件通过属性向下传值的方式和子组件通信: 使用步骤: 定义组件:现有自定义组件com-a.com-b,com-a是com-b的父组件: 准备获取数据:com-b要获取父组件dat ...
- elasticsearch+logstash_jdbc 实现mysql数据实时同步至es
jdk安装1.8版本,es.ls.ik.kibana版本一致我这里使用的6.6.2版本 安装es tar xf elasticsearch-6.6.2.tar.gz mv elasticsearch- ...