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

本文是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>
<
  • 1
    点赞
  • 12
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值