0
点赞
收藏
分享

微信扫一扫

突破编程_C++_设计模式(外观模式)

文章目录

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
在这里插入图片描述


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

在这里插入图片描述


step3: 点击terminal中的local 的网址,或copy 到浏览器中,即可看到angular 入口页面
在这里插入图片描述
在这里插入图片描述


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架构的最基本了解


在这里插入图片描述

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

step1.上面看到的入口页面,index.html页面加载的流程介绍:
在这里插入图片描述

在这里插入图片描述



step2.将项目的入口文件变更为新建的html文件:app.simplepage.html效果
在这里插入图片描述

在这里插入图片描述

在这里插入图片描述



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

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


step1: 创建新的组件

在这里插入图片描述


step2: 查看组件选择器(selector)的名字:app-my-new-component’
在这里插入图片描述

在这里插入图片描述

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

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

在这里插入图片描述


step4: 修改新组件:将CSS文件& HTML文件修改
在这里插入图片描述


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

在这里插入图片描述



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


在这里插入图片描述



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


step1: 修改新组件html文件、TS文件。并在ts文件中引入新的变量name&在构造器中打印内容
在这里插入图片描述


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

Angular 生命周期(constructor & ngOnInit)的作用
在这里插入图片描述

step2: 最终看到的效果
在这里插入图片描述

step3: 花括号语法支持的其他类型:
在这里插入图片描述

在这里插入图片描述



6.标签中属性的绑定


(1) ID的绑定

在这里插入图片描述

在这里插入图片描述

(2) class的绑定

在这里插入图片描述

在这里插入图片描述


(3) 样式的绑定

在这里插入图片描述

在这里插入图片描述


(4) ng内部样式的绑定

在这里插入图片描述

在这里插入图片描述


(5)条件判断

在这里插入图片描述

在这里插入图片描述

举报

相关推荐

0 条评论