Angular初步介绍金沙网址

花色利用的Angular版本是V6.0.3

Angular程序结构

金沙网址 1


npm install swiper --save

yarn add swiper --save

Angular开荒条件的布署

  • 金沙网址,Angular-CLI的安装

sudo npm install -g @angular/cli
  • Angular初步介绍金沙网址。查看安装版本

ng -v
  • 创办项目

ng new auction

在angular.json文件增添swiper.js和swiper.css

目录结构

  • e2e 端到端测验
  • src
    • app 模块和组件
      • app.component.ts → 组件的根
      • app.module.ts → 模块的根
    • assets → 静态资源文件
    • environments → 情状安排(Angular扶持多碰到开荒的, 开辟情状,
      测量试验意况, 分娩遭遇足以共用一套代码;
      分化条件的安插代码写到不一致的文件中,
      施行代码依据条件加载对应的结构景况文件卡塔尔(قطر‎
    • favicon.ico
    • index.html →整个项指标根html文件,
      系统运行第三遍访谈的正是那个文件
    • main.ts → 脚本实行的输入文件
    • polyfills.ts → 引进的库, 让ts在逐个浏览器中可以知道运营
    • styles.css → 全局css文件
    • test.ts → 测量试验相关
    • tsconfig.json → ts编写翻译器的布署
  • .editorconfig
  • .gitignore
  • .angular-cli.json → angular命令行的构造文件
  • karma.conf.js → karma单元测验配置文件
  • package.json
  • protractor.conf.js → 单元测验配置文件
  • tslint.json → TypeScript代码风格检查布署文件
  • tsconfig.json → TypeScript编写翻译配置文件

angular.json

app.component.ts分析

  • 组件相关的基本概念(必备要素, 全数的构件都有卡塔尔
    • 组件元数据装饰器(简单称谓装饰器卡塔尔@component
      成效: 告知Angular如什么地方理TypeScript类
      装饰器包罗七个属性, 那几个属性的值叫做元数据,
      Angular会根据那些元数据的值来渲染组件, 推行组件的逻辑
    • 模板: 通过组件的模版来定义组件的外观, 以HTML的样式存在,
      告诉Angular如何渲染组件,
      模板中得以利用Angular的多寡绑定语法来表现调控器中的数据
    • 调控器: 正是贰个不以为奇的TypeScript类会被Component装饰器装饰
      带有: 组件的质量和措施
      大许多的页面逻辑都以写在调整器中的, 通过数据绑定与模板进行通信,
      模板展现调控器的多少, 调节器管理模板上产生的风云

npm install @types/swiper --save

yarn add @types/swiper --save

app.component.ts源码解析

import { Component } from '@angular/core';
// 从Angular的core模块中引入了装饰器Component

@Component({
  selector: 'app-root',
  // 组件可以通过app-root这个标签来调用

  templateUrl: './app.component.html',
  // 组件的内容, app-root的位置会展示templateUrl中的内容

  styleUrls: ['./app.component.css']
  // 组件模板中使用的样式
})
// 定义组件/组件的元数据

export class AppComponent {
  title = 'app';
}
// 定义了控制器: 被Component装饰器装饰的TypeScript类

// 标准的TypeScript类, 通过装饰器附加元数据到类上, 成为一个组件
// 元数据会告诉Angular如何将TypeScript处理成组件

配置tsconfig文件

Angular数据绑定

  • 透过插值方法{{}}将零器件中的数据呈现到模板中

<h1>
    {{title}}
</h1>
  • 品质绑定
  • 事件绑定
  • 双向绑定

tsconfig.json

非供给组件内容

  • 可选的注入对象
    • 输入属性 @inputs(): 可用于老爹和儿子组件传值
    • 提供器 providers: 用于信任注入
    • 生命周期hook
  • 可选的输出对象
    • 样式表styles
    • 动画 Animations
    • 输出属性 @outputs

tsconfig.app.json

app.module.ts

  • 叁个module也是贰个带着装饰器的TypeScript类

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

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

@NgModule({
  declarations: [
    AppComponent
  ],
  // 声明module中有什么东西: 只能声明组件, 指令, 管道

  imports: [
    BrowserModule // 必选模块
  ],
  // 当前这个module依赖的其他module, 引入了之后可以使用这个module提供的组件, 指令, 服务

  providers: [],
  // 声明模块提供的服务, 这里只能声明服务

  bootstrap: [AppComponent]
  // 模块的主组件
})
export class AppModule { }

安分守己地方的布局实现后,angular里就可以用swiper。上边是一个小demo。

test.component.html

test.component.ts

import { AfterViewInit, Component, OnInit} from '@angular/core';@Component({ selector: 'app-test', templateUrl: './test.component.html'})export class TestComponent implements AfterViewInit { testSwiper: Swiper; slides = [ 'https://via.placeholder.com/300x200/FF5733/ffffff', 'https://via.placeholder.com/300x200/C70039/ffffff', 'https://via.placeholder.com/300x200/900C3F/ffffff' ]; constructor() {} ngAfterViewInit() { this.testSwiper = new Swiper('.swiper-container', { direction: 'horizontal', loop: true, // 如果需要分页器 pagination: { el: '.swiper-pagination', }, // 如果需要前进后退按钮 navigation: { nextEl: '.swiper-button-next', prevEl: '.swiper-button-prev', }, // 如果需要滚动条 scrollbar: { el: '.swiper-scrollbar', }, }); }}

上述就是本文的全体内容,希望对咱们的求学抱有助于,也期望大家多多照顾脚本之家。

发表评论

电子邮件地址不会被公开。 必填项已用*标注