网站先做前端还是后端,做局域网网站教程,佛山制作网页公司,梅兰商贸网站开发设计文章目录 1. 创建Angular 项目2.对Angular架构的最基本了解3.创建并引用新的组件#xff08;component#xff09;4.对Angular架构新的认识#xff08;多组件#xff09;5.组件中业务逻辑文件的编辑#xff08;ts文件#xff09;6.标签中属性的绑定(1) ID的绑定(2) class… 文章目录 1. 创建Angular 项目2.对Angular架构的最基本了解3.创建并引用新的组件component4.对Angular架构新的认识多组件5.组件中业务逻辑文件的编辑ts文件6.标签中属性的绑定(1) ID的绑定(2) class的绑定(3) 样式的绑定(4) ng内部样式的绑定(5)条件判断 1. 创建Angular 项目 ng version // 查看下angular 是否安装成功了ng new HelloWorld // 使用这种方式创建新项目最终没有app.modules.ts 这个文件对刚入口的人员不友好因为要学习到这个文件的用法ng new HelloWorldAngular --no-standalone --routing --ssrfalse // 这种方式创建的包含app.modules.ts文件应该是Angular 17 最新版才需要这样// 为什么最新版Angular 没有app.module.ts文件可参考如下link
// https://github.com/angular/angular/issues/52751npm start // 直接启动Angular 项目不会自动打开浏览器ng serve --open // 启动Angular 项目 并通过浏览器自动打开angular 入口页面 step1 ng new HelloWorldAngular --no-standalone --routing --ssrfalse step2 在VS code 中打开项目文件夹并在terminal中执行npm start启动项目 step3 点击terminal中的local 的网址或copy 到浏览器中即可看到angular 入口页面 step4 启动完项目如果想进行简单的服务操作输入h enter 即可看到如下命令提示
press r enter to force reload browserpress u enter to show server urlpress o enter to open in browserpress c enter to clear consolepress 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)条件判断
