Angular基础---HelloWorld---Day1

这篇具有很好参考价值的文章主要介绍了Angular基础---HelloWorld---Day1。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

1. 创建Angular 项目


ng version			// 查看下angular 是否安装成功了

ng new  HelloWorld        // 使用这种方式创建新项目,最终没有app.modules.ts 这个文件(对刚入口的人员不友好,因为要学习到这个文件的用法)

ng new HelloWorldAngular --no-standalone --routing --ssr=false  // 这种方式创建的包含app.modules.ts文件(应该是Angular 17 最新版才需要这样)

// 为什么最新版Angular 没有app.module.ts文件,可参考如下link
// https://github.com/angular/angular/issues/52751


npm start  		// 直接启动Angular 项目,不会自动打开浏览器

ng serve --open  // 启动Angular 项目 并通过浏览器自动打开angular 入口页面



step1: ng new HelloWorldAngular --no-standalone --routing --ssr=false
Angular基础---HelloWorld---Day1,Angular基础,angular.js,前端,javascript,开发语言,前端框架


step2: 在VS code 中打开项目文件夹,并在terminal中执行npm start启动项目

Angular基础---HelloWorld---Day1,Angular基础,angular.js,前端,javascript,开发语言,前端框架


step3: 点击terminal中的local 的网址,或copy 到浏览器中,即可看到angular 入口页面
Angular基础---HelloWorld---Day1,Angular基础,angular.js,前端,javascript,开发语言,前端框架
Angular基础---HelloWorld---Day1,Angular基础,angular.js,前端,javascript,开发语言,前端框架


step4: 启动完项目,如果想进行简单的服务操作,输入h + enter 即可看到如下命令提示


  press r + enter to force reload browser
  press u + enter to show server url
  press o + enter to open in browser
  press c + enter to clear console
  press q + enter to quit



2.对Angular架构的最基本了解


Angular基础---HelloWorld---Day1,Angular基础,angular.js,前端,javascript,开发语言,前端框架

  • 入口文件会一直存在,方便加载新建的页面
  • app.component.ts 文件复制加载不同的组件,以及执行某个文件使用的模板文件、样式文件
  • 强化理解,可以通过如下几个step了解和实践

step1.上面看到的入口页面,index.html页面加载的流程介绍:
Angular基础---HelloWorld---Day1,Angular基础,angular.js,前端,javascript,开发语言,前端框架

Angular基础---HelloWorld---Day1,Angular基础,angular.js,前端,javascript,开发语言,前端框架



step2.将项目的入口文件变更为新建的html文件:app.simplepage.html效果
Angular基础---HelloWorld---Day1,Angular基础,angular.js,前端,javascript,开发语言,前端框架

Angular基础---HelloWorld---Day1,Angular基础,angular.js,前端,javascript,开发语言,前端框架

Angular基础---HelloWorld---Day1,Angular基础,angular.js,前端,javascript,开发语言,前端框架



3.创建并引用新的组件(component)

ng g c my-new-component  		// 创建新的组件(generate component)


step1: 创建新的组件

Angular基础---HelloWorld---Day1,Angular基础,angular.js,前端,javascript,开发语言,前端框架


step2: 查看组件选择器(selector)的名字:app-my-new-component’
Angular基础---HelloWorld---Day1,Angular基础,angular.js,前端,javascript,开发语言,前端框架

Angular基础---HelloWorld---Day1,Angular基础,angular.js,前端,javascript,开发语言,前端框架

step3: 引用组件:app-my-new-component’

下图说明,新建的组件如果希望被引用,需要找到一个组件(app.component)去引用这个新组件(my-new-component)才可以。

Angular基础---HelloWorld---Day1,Angular基础,angular.js,前端,javascript,开发语言,前端框架


step4: 修改新组件:将CSS文件& HTML文件修改
Angular基础---HelloWorld---Day1,Angular基础,angular.js,前端,javascript,开发语言,前端框架


step5: 修改新组件:启动项目,最终看到的效果

Angular基础---HelloWorld---Day1,Angular基础,angular.js,前端,javascript,开发语言,前端框架



4.对Angular架构新的认识(多组件)


Angular基础---HelloWorld---Day1,Angular基础,angular.js,前端,javascript,开发语言,前端框架



5.组件中业务逻辑文件的编辑(ts文件)


step1: 修改新组件html文件、TS文件。并在ts文件中引入新的变量name&在构造器中打印内容
Angular基础---HelloWorld---Day1,Angular基础,angular.js,前端,javascript,开发语言,前端框架


constructor & ngOnInit可参考如下文章,目前阶段不需要完全看懂

Angular 生命周期(constructor & ngOnInit)的作用
Angular基础---HelloWorld---Day1,Angular基础,angular.js,前端,javascript,开发语言,前端框架

step2: 最终看到的效果
Angular基础---HelloWorld---Day1,Angular基础,angular.js,前端,javascript,开发语言,前端框架

step3: 花括号语法支持的其他类型:
Angular基础---HelloWorld---Day1,Angular基础,angular.js,前端,javascript,开发语言,前端框架

最终展示的效果如下:

Angular基础---HelloWorld---Day1,Angular基础,angular.js,前端,javascript,开发语言,前端框架



6.标签中属性的绑定


(1) ID的绑定

Angular基础---HelloWorld---Day1,Angular基础,angular.js,前端,javascript,开发语言,前端框架

看到的最终效果:

Angular基础---HelloWorld---Day1,Angular基础,angular.js,前端,javascript,开发语言,前端框架

(2) class的绑定

Angular基础---HelloWorld---Day1,Angular基础,angular.js,前端,javascript,开发语言,前端框架

Angular基础---HelloWorld---Day1,Angular基础,angular.js,前端,javascript,开发语言,前端框架


(3) 样式的绑定

Angular基础---HelloWorld---Day1,Angular基础,angular.js,前端,javascript,开发语言,前端框架

Angular基础---HelloWorld---Day1,Angular基础,angular.js,前端,javascript,开发语言,前端框架


(4) ng内部样式的绑定

Angular基础---HelloWorld---Day1,Angular基础,angular.js,前端,javascript,开发语言,前端框架

Angular基础---HelloWorld---Day1,Angular基础,angular.js,前端,javascript,开发语言,前端框架


(5)条件判断

Angular基础---HelloWorld---Day1,Angular基础,angular.js,前端,javascript,开发语言,前端框架

Angular基础---HelloWorld---Day1,Angular基础,angular.js,前端,javascript,开发语言,前端框架文章来源地址https://www.toymoban.com/news/detail-838922.html

到了这里,关于Angular基础---HelloWorld---Day1的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 前端Angular框架基础知识(一)

    1.1 数据绑定 数据驱动DOM:将组件 类 (.ts文件)中的数据显示在组件 模板 (.html文件)中,当类中的数据发生变化会自动同步到模板中. Angular中使用差值表达式进行数据绑定, {{ }}语法 1.2 属性绑定 1.2.1 普通属性 使用【属性名称】为元素绑定DOM对象属性 使用【attr.属性名称】为元

    2024年01月17日
    浏览(40)
  • [Angular 基础] - 自定义指令,深入学习 directive

    这篇笔记的前置笔记为 [Angular 基础] - 数据绑定(databinding),对 Angular 的 directives 不是很了解的可以先过一下这篇笔记 后面也会拓展一下项目,所以感兴趣的也可以补一下文后对应的项目: 第一个 Angular 项目 - 静态页面 第一个 Angular 项目 - 动态页面 directive 的创建方式和 com

    2024年02月21日
    浏览(39)
  • [Angular 基础] - 视图封装 & 局部引用 & 父子组件中内容传递

    之前的笔记: [Angular 基础] - Angular 渲染过程 组件的创建 [Angular 基础] - 数据绑定(databinding) [Angular 基础] - 指令(directives) 以上为静态页面,即不涉及到跨组件交流的内容 以下涉及到组件内的沟通,从这开始数据就“活”了 [Angular 基础] - 自定义事件 自定义属性 下面的例子依旧

    2024年02月22日
    浏览(38)
  • 学习JavaSE基础-day1

    JRE 和 JDK JRE:Java运行环境,如果想要运行Java程序至少要安装JRE JDK:Java开发环境(开发工具包),如果要开发Java程序,必须安装JDK JRE = JVM + 核心类库 JDK = JRE + 开发工具包 JDK JRE JVM 关系如图所示:     JDK下载地址:www.oracle.com 配置Path环境变量:希望可以在命令窗口的任意的

    2024年02月07日
    浏览(103)
  • Day1 - Hive基础知识

    概述 Hive是由Facobook开发的后来贡献给了Apache的一套用于进行 数据仓库 管理的工具,使用类SQL语言来对分布式文件系统中的PB级别的数据来进行读写、管理以及分析 Hive基于Hadoop来使用的,底层的默认计算引擎使用的是MapReduce。Hive利用类SQL(HQL,Hive Query Language)语言来操作数据

    2024年04月29日
    浏览(35)
  • day1 QT 入门与基础控件

    qt下载方法:https://www.yuque.com/uh1h8r/dqrma0/ 目录 界面框架 种类 特点: 1、QWidget 2、QDialog 3、QMainWindow 布局管理器 输入输出控件 QWidget、QDialog、QMainWindow 1、QWidget QWidget是Qt中所有用户界面控件的 基类 。 它表示一个 矩形的窗口区域 ,可以 包含其他的子控件 。 继承自QWidget的控

    2024年02月11日
    浏览(39)
  • Datawhale 大模型基础理论 Day1 引言

    开源链接如下:https://github.com/datawhalechina/so-large-lm/blob/main/docs/content/ch01.md 语言模型的概念:即能够赋予每个有意义的词(token)以一定的概率的一个函数的集合。 语言模型可以被用来评估输入的质量,也可以根据prompt生成对应的内容(作画、描述、回答等) 温度,可以控制

    2024年01月16日
    浏览(35)
  • 网络安全day1-基础入门概念名词 超详细!!!

    目录 一、域名 1.域名概念: 2.二级域名和多级域名:​编辑 3.域名对安全测试的意义: 二、DNS 1.域名系统 2.本地Hosts与DNS的关系 3.CDN概念以及和DNS的关系: 4.常见的DNS安全攻击 三、脚本语言  四、后门 1.什么是后门?有哪些后门? 2.后门在安全测试中的实际意义? 3.关于后门需

    2024年02月07日
    浏览(51)
  • 【Java】零基础上手SpringBoot学习日记(day1)

    此帖为本人学习Springboot时的笔记,由于是个接触计算机一年左右的新手,也没有网站开发经验,所以有些地方的理解会比较浅显并且可能会出现错误,望大佬们多多包涵和指正。 在我的理解中,Web应用的开发大体分为两个部分,一个是前端的页面设计以及实现,比如使用H

    2024年02月14日
    浏览(43)
  • angular前端环境搭建、安装angular

    1.下载node.js安装包(要求node版本大于12.20) Node.js官方网站 : https://nodejs.org/en/ 进入官网后,当前页面下载的是最新版本,如需要下载历史版本,点击红框标注的其他下载,在进入的新的页面底部,选择红框标准的先前版本,然后下载相应的版本,在跳转的页面下载win64的版

    2024年02月03日
    浏览(58)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包