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

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

1. angular安装

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

执行命令:

  1. npm install -g @angular/cli

2. angular工程的创建

  1. ng new my-app

ng为angular的命令标识

new为新建操作符

my-app为项目名称

3. 启动angular项目

  1. cd my-app
  2. 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说明:

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

  app.module.ts说明: 

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

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

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

component.ts:

  1. import { Component } from '@angular/core';
  2.  
  3. @Component({
  4. selector: 'app-root',
  5. templateUrl: './app.component.html',
  6. styleUrls: ['./app.component.css']
  7. })
  8. export class AppComponent {
  9. title = 'heroes'; //自定义标题名称
  10. }  

component.html:

  1. <!--The content below is only a placeholder and can be replaced.-->
  2. <div style="text-align:center">
  3. <h1>
  4. {{ title }}
  5. </h1>
  6. <img width="100" alt="Angular Logo" src="data:image/png;base64,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">
  7.  
  8. </div>
  9.  
  10. <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. Java基础语法-Lambda表达式

    1.Lambda表达式主要用于简写接口的操作等出现匿名内部类的地方,如下:我这里先定义一个Swim接口,以及它所定义的swim()方法 interface Swim{ void swim(); } 2 ...

  2. Hadoop Mapreduce 调优

  3. Spring restful

    1. RESTful 不是一项技术,也不是一个标准,而是一种风格,跟servlet不在一个层面上,根本无法比较.一个基于servlet的application也是可以是符合RESTful风格的,换言之 ...

  4. 如何在Linux 中获取硬盘分区或文件系统的UUID?

    作为一个 Linux 系统管理员,你应该知道如何去查看分区的 UUID 或文件系统的 UUID.因为现在大多数的 Linux 系统都使用 UUID 挂载分区.你可以在 /etc/fstab 文件中可以 ...

  5. inodes 相关信息查看

    查看inode数量 df -ih 查看磁盘信息 tune2fs -l /dev/sdc1 查看相关目录信息 /data/osd.3/bean_test/7/8/9# debugfs /dev/sdc2 ...

  6. 5.1JAVA基础复习——JAVA中的静态代码块、构造代码块、构造函数、局部代码块区别

    构造代码块: 在类中定义可以给所有对象进行初始化.局部代码块: 在方法中定义属性的生命周期.静态代码块: 在类中定义用于给类调用时属性的初始化 构造函数与构造代码块的区别: 构造函数是给对应的对象进行 ...

  7. sai u 2016

    再过20分钟,我就要结束2016年的工作回家过春节了.真是难过的一天啊,从来没有今天那么感受深刻,那么嫌弃时间太慢,没有归家心似箭,没有近乡情怯,只是好想,呵呵,来个午睡,来场电影,来点小说,哈哈哈. ...

  8. appium+python3+pycharm踩得坑2

    没相当刚把上一个错误解决,这个马上就解决了: selenium.common.exceptions.WebDriverException: Message: A new session could n ...

  9. centos 7 rabbitmq 3.7.12 erlang 20.3源码安装

    1.下载erlang 官网地址 http://www.erlang.org/download 挑选合适的版本 然后 建议20.3运行命令 wget http://erlang.org/download ...

  10. 16: mint-ui移动端

    1.1 mint-ui安装与介绍  官网:http://mint-ui.github.io/docs/#/zh-cn2/loadmore 1.安装与引用 // 安装Vue 2.0 npm instal ...