Angular基础教程+Demo项目——尽可能全面一些——第一节

最新推荐文章于 2024-08-13 11:11:39 发布

开发菜鸡

最新推荐文章于 2024-08-13 11:11:39 发布

阅读量1.7k

点赞数 1

分类专栏：前端文章标签： angular

本文链接：https://blog.csdn.net/Burnup_110/article/details/109753055

版权

本文是Angular基础教程的第一节，涵盖了Angular项目架构、组件创建、HTML语法简介，以及父子组件间通讯的基本操作。文章通过实例演示如何在Angular中创建组件，并介绍服务和服务在组件间通讯的角色。最后，预告了后续章节将涉及的生命周期函数、Rxjs、数据请求和路由等内容。

摘要由CSDN通过智能技术生成

第二节预告：生命周期函数、Rxjs、数据请求、路由
学习过程中所写的Demo_GitHub——学习Angular——浅度学习Demo
官网：https://angular.cn/（官网是最好的老师哦，追求技术的大神可以继续深入啦）

Angular前言（跳过即可，自勉而已）

一写博客，不例外的喜欢啰嗦一下，本人是广大java后端开发中的一员，但是因为工作需要不得不利用工作之余学习Angular前端，虽然我对于学习前端技术不反感，但是我更加信奉T型发展，先精后广，后端远远称不上精通，就要走广而多的路子了，就怕以后面试官问我会什么，什么都会一点，深入一些后，什么好像又不会。
不过这也没办法，生活不只是有理想远方，还有眼下的面包和生存，先把工作做好，这也是我所追求的。啰嗦结束，进入正题↓

Angular项目架构介绍

关于如何安装Angular，这个百度太多了，我来个传送门吧
特意提一下创建新项目

ng new demo --skip-install
使用这个命令创建项目的话，是不在创建的过程中下载依赖的，因为ng命令下载依赖的话会比较慢，项目创建成功后，进入项目目录下使用cnpm install 下载依赖即可

项目接口图：
在这里插入图片描述
大概这个意思吧，不常用的话，也记不住这么多，记住几个关键的就可以了。
比如：

src:根目录，存放所有开发的文件；
src/app: 存放组件和模块的文件
src/assets: 存放静态资源文件
src/index.html ：入口页面
src/styles.scss ：全局样式
package.json：配置依赖文件

还有下图：
在这里插入图片描述

结构介绍大概就是这样，组件主要是由页面（Html），样式（scss/css/less），业务逻辑（ts）组成，Angular的语法偏向于后台逻辑语法，如果有后台开发技术学习起来应该不难理解

创建一个组件并启动项目

创建组件命令：

ng g component components/header

这个意思是创建一个名叫header的组件，它在components的目录下。
在这里插入图片描述
命令执行完，如上图所示，我们可以看一下Angular最重要的概念——组件的展示效果，打开header.component.ts查看一下组件的名字叫什么？我这边是app-header

想要看一下这个组件的展示效果，首先在组件的html中输入内容，如下

<h2>我是一个头部组件</h2>

然后清除app.component.html的全部内容（里边原来的内容是Angular自带的欢迎页面），然后在这个页面中使用组件，如下图
在这里插入图片描述
这样让我们启动项目，因为我使用的是Webstorm，所以直接使用自带的插件就可以启动了，如果快捷启动的话，可以使用命令

ng serve --open

启动Angular项目，效果如下：
在这里插入图片描述

已经展示出来我们组件的内容了，其实Angular很好理解，他的页面就是由一个个组件拼装出来的，他只会启动index.html页面，然后在这个页面中装载根组件，由根组件装载头部组件，这样一个流程

angular html简单语法介绍

Html文件

<h2>我是一个头部组件</h2>


<h1>Angular 数据绑定</h1>
<h3>{
   {
   data}}</h3>
<h3>{
   {
   data1}}</h3>
<h3>{
   {
   data2}}</h3>
<h3>{
   {
   data3}}</h3>
<!--<h3>{
   {
   data4}}</h3>-->
<!--<h3>{
   {
   data5}}</h3>-->
<br>
<br>
<hr/>
<br>
<br>
<h1>Angular 属性绑定</h1>
<input readonly="readonly" [value]="data6">
<br>
<br>
<hr/>
<br>
<br>
<h1>Angular 简单数学运算</h1>
<h3>1+2={
   {
   1+2}}</h3>
<br>
<br>
<hr/>
<br>
<br>
<h1>Angular 数组循环</h1>
<ol>
  <li *ngFor="let item of arr">
    {
   {
   item}}
  </li>
</ol>
<br>
<ul>
  <li *ngFor="let item of arr1;let key = index;">
    {
   {
   item.name}},{
   {
   item.age}}--{
   {
   key}}
  </li>
</ul>
<br>
<ul>
  <li *ngFor="let item of arr2">
    {
   {
   item.name}}
    <br>
    <ol>
      <li *ngFor="let content of item.content">
        {
   {
   content}}
      </li>
    </ol>
  </li>
</ul>

<br>
<br>
<br>
<br>
<br>
<br>
<hr/>
<h1>图片展示</h1>
<img [src]="img" style="max-width: 80px">
<br>
<br>
<hr/>
<br>
<br>
<br>
<br>
<h1>条件判断——ngif,ngswitch</h1>
<div>
  <h3>ngif 展示:</h3>
  <p *ngIf="flag">我是true</p>
  <p *ngIf="false">false</p>
</div>
<div [ngSwitch]="choose">
  <h3>ngswitch 展示:</h3>
  <p *ngSwitchCase="1">我是1</p>
  <p *ngSwitchCase="2">我是2</p>
  <p *ngSwitchDefault>--其实我是个不得已的选择--（~_~）</p>
</div>
<br>
<br>
<hr/>
<br>
<br>
<br>
<br>
<h1>class、style展示，[ngClass]/[ngStyle]</h1>
<h3>ngClass 展示:</h3>
<div [ngClass]="{'red':true}">你在我心中是最美诶！</div>
<div [ngClass]="{'red':true,'max':flag}">你在我心中是最美诶！</div>
<