Anguler入门开发

最新推荐文章于 2023-10-16 14:17:00 发布

原创

最新推荐文章于 2023-10-16 14:17:00 发布 · 959 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#Angular

这篇博客介绍了Angular的基础知识，包括Angular程序架构、开发环境搭建步骤，详细阐述了组件的元数据装饰器、模板、控制器等基本概念，并讲解了Angular的启动过程和开发准备，如引入类库和生成组件。最后，通过开发app组件，展示了如何布局静态页面。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

进行一下简单的Angular入门，开发第一版股票管理系统的静态页面布局。

一.Angular程序架构

在这里插入图片描述

Parent component:组件是Angular应用的基本构建块，你可以把一个组件理解为一段带有业务逻辑和数据的HTML
Service1：服务用来封装可重用的业务逻辑
指令：允许你向HTML元素添加自定义行为
模块用来将应用中不同的部分组织成一个Angular框架可以理解的单元

二.搭建Anguler开发环境

安装Nodejs,Angular CLI,WebStorm
- 安装Nodejs、WebStorm请自行百度
- 利用sudo npm install -g @angular/cli安装Angular命令行工具,使用ng -v命令查看
- 使用ng new first-app创建项目名为first-app的项目
使用Angular CLI创建并运行Angular项目
- 使用WebStorm打开创建的first-app项目
- 目录结构（除非明确知道要做什么，否则不要修改目录文件）
  - e2e文件夹：用来做测试
  - src文件夹：应用源代码目录（app文件夹包含应用组件和模块；assets文件夹存静态资源如图片；environments文件夹进行环境配置；favicon.ico图标文件；index.html应用的根html；main.ts整个web应用脚本执行的入口点；polyfills.ts用来导入必要的库；styles.css应用的全局样式；test.ts自动化测试文件；tsconfig.json是typescript编译器的配置）
  - .editorconfig：webstorm的配置文件
  - .gitignore：git的配置文件
  - angular-cli.json：angular命令行工具的配置文件
  - karma.conf.js：执行自动化测试的文件
  - package.json：标准的npm工具的配置文件
  - protractor.conf.js：自动化测试的配置文件
  - README.md：项目的标注说明
  - tslint.json：tslint的配置文件，用于定义typescript检查的文件
分析Angular项目的目录结构及Angular CLI生成的基础代码

三.与组件相关的基本概念

1.组件元数据装饰器（简称：装饰器）@Component【必备元素】

用来告知angular框架如何处理TypeScript类

实例代码

//组件元数据装饰器
@Component({
  //元数据
  selector: 'app-root',//css选择器，表示此组件可以通过app-root标签调用，组件的内容就是templateUrl定义
  templateUrl: './app.component.html',//templateUrl模板，指定了一个html文件作为模板，最终在index.html中的app-root标签中显示
  styleUrls: ['./app.component.css']//styleUrls指向了一组css文件，可以指定html模板中的样式
})
//通过装饰器将元数据附加到TypeScript类上
export class AppComponent {//定义了控制器，包含模板相关的所有属性和方法，与页面相关的逻辑都写在控制器中
  title = 'first-app';//属性的值会通过{
    
    {title}}显示到页面中,将模板和控制器连接起来，常见方式：插值表达式{
    
    {}}
}

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';

@NgModule({
  declarations: [//声明组件、指令和管道
    AppComponent
  ],
  imports: [//声明此模块依赖的其他模块
    BrowserModule//浏览器模块
  ],
  providers: [],//声明模块中提供了什么服务
  bootstrap: [AppComponent]//声明模块的主组件
})
export class AppModule { }

2.模板Templete【必备元素】

通过组件自带的模板，定义组件的外观
模板以html的形式存在，告诉angular如何来渲染组件

3.控制器Controller【必备元素】

普通的TypeScript类，会被component的装饰器装饰
页面逻辑写在控制器中
模板显示数据，控制器处理数据

4.【可选的可注入对象】

注入属性@Inputs()：接受外部传入的数据，使父组件可以直接传递给子组件
提供器providers：做依赖注入
生命周期钩子Lifecycle Hooks

5.【可选的输出对象】

生命周期钩子Lifecycle Hooks
样式表styles
动画Animations
输出属性@Outputs：在组件间共享数据

四.Angular的启动过程

index.html是Angular应用启动时加载的文件
main.ts为Angular启动时加载的脚本
启动Angular
- 添加npm的脚本命令Edit Configuration -> + -> npm ->自定义名称并选择start脚本
- 点”播放“按钮运行脚本命令
启动后，Angular会自动侦测src文件夹信息的改变，任何改变都会刷新页面

五.开发准备

1.引入类库

将第三方类库安装到本地
- 可以当前项目目录下使用npm install命令安装，如npm install jquery --save npm install bootstrap --save

将两个库引入到项目中

修改angular-cli.json文件的styles和scripts

添加内容

"styles":[
    "styles.css",
    "../node_modules/bootstrap/dist/css/bootstrap.css"
],
"scripts":[
    "../node_modules/jquery/dist/jquery.js",
    "../node_modules/bootstrap/dist/js/bootstrap.js"
]

安装类型描述文件
- 为了让typescript认识bootstrap和jquery的方法，需要引入类型描述文件
  
  npm install @types/jquery --save-dev npm install @types/bootstrap --save-dev

2.生成组件

生成组件（会生成到app文件夹下）
- 在项目目录下使用命令ng g component navbar生成navbar组件——会生成4个文件并且更新app.module.ts，将新生成的组件注册到模块中
- 在项目目录下使用命令ng g component footer生成footer组件
- 在项目目录下使用命令ng g component search生成search组件
- 在项目目录下使用命令ng g component carousel生成carouse组件
- 在项目目录下使用命令ng g component product生成product组件
- 在项目目录下使用命令ng g component stars生成stars组件

执行完生成组件的命令后，app文件夹下回多出6个组件包，并且app.module.ts中的declarations中会多出组件的声明，如下

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';
import { NavbarComponent } from './navbar/navbar.component';
import { FooterComponent } from './footer/footer.component';
import { SearchComponent } from './search/search.component';
import { ProductComponent } from './product/product.component';
import { StarsComponent } from './stars/stars.component';
import { CarouselComponent } from './carousel/carousel.component';

@NgModule({
  declarations: [
    AppComponent,
    NavbarComponent,
    FooterComponent,
    SearchComponent,
    ProductComponent,
    StarsComponent,
    CarouselComponent
  ],
  imports: [
    BrowserModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

六.开发app组件

在app.component.html中编辑页面布局

<app-navbar></app-navbar>
<div class="container">
    <div class="row">
        <div class="col-md-3">
            <app-search></app-search>
        </div>
        <div class="col-md-9">
            <div class="row">
                <app-carousel></app-carousel> 
            </div>
            <div class="row"<