虽然angular是适合开发大项目使用,但是笔者还是决定要入坑了,毕竟之前有了ts的基础,不学是在心里痒痒.
之前有讲解的搭建angular脚手架的博客,我用脚手架创建一个My-app的项目
项目安装完成之后 目录结构大概就是这样的了
angular是使用模块化开发 他这个模块下有组件
学过vue的同学可能知道 vue是一个组件化开发的框架,里面的一个.vue文件中集中了
html js 和css 代码
而angular则是将这三部分分别拆开成了三个文件
1.快速创建一个 angular组件
在命令行中输入 ng g component 组件名字 如 app-zyc
angular会自动帮我们注册到模块中
同时会在 app的文件夹下多一个app-zyc的文件夹
然后在 app 文件夹下 的 app.component.html
注册使用 创建好的 组件
然后就可以看到我们的app-zyc 工作在页面上了
你想要修改的 组件中的内容 然后就去 app-zyc文件夹下的html中进行 页面内容编辑
也可以在 css文件中进行样式的书写
2.然后我们开始进行基础的学习
我们的 组件内部的ts文件 就像下面的部分
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-app-zyc',
templateUrl: './app-zyc.component.html',
styleUrls: ['./app-zyc.component.css']
})
export class AppZycComponent implements OnInit {
// 我们在这里定义属性和方法
count=1;
price=6779;
total=this.price;
add(){
this.count++;
}
constructor() { }
ngOnInit(): void {
}
}
// 然后在html中的文件中使用
<span>单价:{{price}}￥</span> // 这里和vue中的数据绑定一样
<p title="{{name}}"><p> // 属性的绑定
// 下面的 [disabled]="false" 也是属性绑定的另一种方式
<button (click)="decrease()" [disabled]="count==1">-1</button>// 方法绑定是 (click)=""
<span>{{count}}</span>
<button (click)="add()">+1</button>
<span>总价:{{price*count}}￥</span>
3.在angular中图片资源的引入
在assets 静态资源库中 将图片放入其中
// 第一种直接路径进行书写
<img src="../../assets/img/0.jpg" />
// 第二种 网络资源引入 直接将图片的网络路径写入进去就成
<img src="https://dss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=194233767,3078416653&fm=26&gp=0.jpg" />
好了 今天就到此为此 往后会继续更新的
