Angular Web前端框架开发基础
Angular Web前端框架开发基础
1000+ 人选课
更新日期:2025/05/18
开课平台智慧树
开课高校北方工业大学
开课教师杜春涛
学科专业工学计算机类
开课时间2025/01/21 - 2025/07/20
课程周期26 周
开课状态开课中
每周学时-
课程简介
课程基于2020年教育部产学合作协同育人项目(谷歌支持)建设而成,获2022年北京高校优质本科教材课件(重点)。Angular是目前最流行的Web前端三大框架(Vue,Angular,React)之一,用于设计动态Web应用,它横跨所有平台,达到如今以及未来Web 平台上所能达到的最高速度,在几乎所有的 IDE 中获得即时帮助和反馈。课程全部以案例方式讲授,每个案例都采用:案例描述→实现效果→案例实现→知识要点的讲解步骤,符合认知规律,使学习者能够在轻松愉悦中掌握Angular Web开发的方法和技巧。
课程大纲

在线教程

章节简介教学计划
TypeScript编程基础
登录后可预览视频
TypeScript简介
TypeScript简介( 一)
杜春涛
TypeScript简介(二)
杜春涛
TypeScript简介(三)
杜春涛
TypeScript简介(四)
杜春涛
案例:Hello World
杜春涛
案例:数据类型
案例:数据类型(一)
杜春涛
案例:数据类型(二)
杜春涛
案例:数据类型(三)
杜春涛
案例:数据类型(四)
杜春涛
案例:数据类型(五)
杜春涛
案例:函数
案例:函数(一)
杜春涛
案例:函数(二)
杜春涛
案例:函数(三)
杜春涛
案例:函数(四)
杜春涛
案例:函数(五)
杜春涛
案例:函数(六)
杜春涛
案例:类和对象
案例:类和对象(一)
杜春涛
案例:类和对象(二)
杜春涛
案例:类和对象(三)
杜春涛
案例:类和对象(四)
杜春涛
案例:类和对象(五)
杜春涛
案例:接口
案例:接口(一)
杜春涛
案例:接口(二)
杜春涛
案例:接口(三)
杜春涛
案例:接口(四)
杜春涛
案例:泛型
案例:泛型(一)
杜春涛
案例:泛型(二)
杜春涛
案例:类、接口和泛型的综合应用
杜春涛
案例:模块和命名空间
案例:模块和命名空间(一)
杜春涛
案例:模块和命名空间(二)
杜春涛
案例:类装饰器
案例:类装饰器(一)
杜春涛
案例:类装饰器(二)
杜春涛
Angular
Angular简介
杜春涛
案例:基础编程——Hello Angular
案例:基础编程——Hello Angular( 一)
杜春涛
案例:基础编程——Hello Angular(二)
杜春涛
案例:基础编程——文本与图片
案例:基础编程——文本与图片(一)
杜春涛
案例:基础编程——文本与图片(二)
杜春涛
案例:基础编程——文本与图片(三)
杜春涛
案例:基础编程——Flex布局
案例:基础编程——Flex布局(一)
杜春涛
案例:基础编程——Flex布局(二)
杜春涛
案例:基础编程——Flex布局(三)
杜春涛
案例:创建组件——多组件布局
案例:创建组件——多组件布局(一)
杜春涛
案例:创建组件——多组件布局(二)
杜春涛
案例:创建组件——多组件布局(三)
杜春涛
创建组件——多组件布局(四)
杜春涛
案例:数据与事件绑定—计时器
案例:数据与事件绑定—计时器(一)
杜春涛
案例:数据与事件绑定—计时器(二)
杜春涛
案例:数据与事件绑定—计时器(三)
杜春涛
案例:数据与事件绑定—计时器(四)
杜春涛
案例:属性与事件绑定——国旗与国歌
案例:属性与事件绑定——国旗与国歌(一)
杜春涛
案例:属性与事件绑定——国旗与国歌(二)
杜春涛
案例:属性与事件绑定——国旗与国歌(三)
杜春涛
案例:属性与事件绑定——国旗与国歌(四)
杜春涛
案例:数据和属性绑定——动态格式设置
案例:数据和属性绑定——动态格式设置(一)
杜春涛
案例:数据和属性绑定——动态格式设置(二)
杜春涛
案例:数据和属性绑定——动态格式设置(三)
杜春涛
案例:数据和属性绑定——动态格式设置(四)
杜春涛
案例:双向数据传递——摄氏/华氏温度转换器
案例:双向数据传递——摄氏/华氏温度转换器(一)
杜春涛
案例:双向数据传递——摄氏/华氏温度转换器(二)
杜春涛
案例:双向数据传递——摄氏/华氏温度转换器(三)
杜春涛
案例:双向数据传递——三角形面积计算器
案例:双向数据传递——三角形面积计算器(一)
杜春涛
案例:双向数据传递——三角形面积计算器(二)
杜春涛
案例:模板文件向逻辑文件传值——数学公式计算
杜春涛
案例:ngStyle指令——自动随机变化的三色旗
案例:ngStyle指令——自动随机变化的三色旗(一)
杜春涛
案例:ngStyle指令——自动随机变化的三色旗(二)
杜春涛
案例:ngClass指令——页面布局
案例:ngClass指令——页面布局(一)
杜春涛
案例:ngClass指令——页面布局(二)
杜春涛
案例:ngIf指令——阶乘计算器
杜春涛
案例:ngSwitch指令——选择颜色
案例:ngSwitch指令——选择颜色(一)
杜春涛
案例:ngSwitch指令——选择颜色(二)
杜春涛
案例:ngIf和ngSwitch——成绩等级计算器
案例:ngIf和ngSwitch——成绩等级计算器(一)
杜春涛
案例:ngIf和ngSwitch——成绩等级计算器(二)
杜春涛
案例:ngFor指令——神舟飞船载人航天历程
杜春涛
案例:ngIf和ngFor指令——打印九九乘法表
案例:ngIf和ngFor指令——打印九九乘法表(一)
杜春涛
案例:ngIf和ngFor指令——打印九九乘法表(二)
杜春涛
案例:模板式表单——个人信息管理
案例:模板式表单——个人信息管理(一)
杜春涛
案例:模板式表单——个人信息管理(二)
杜春涛
案例:模板式表单——个人信息管理(三)
杜春涛
案例:模板式表单——个人信息管理(四)
杜春涛
案例:复选框和单选按钮——设置字体样式和大小
案例:复选框和单选按钮——设置字体样式和大小(一)
杜春涛
案例:复选框和单选按钮——设置字体样式和大小(二)
杜春涛
案例:表单综合应用——代办事项
案例:表单综合应用——代办事项(一)
杜春涛
案例:表单综合应用——代办事项(二)
杜春涛
案例:表单综合应用——代办事项(三)
杜春涛
案例:创建类——数据管理
案例:创建类——数据管理(一)
杜春涛
案例:创建类——数据管理(二)
杜春涛
案例:服务——宠物商店
案例:服务——宠物商店(一)
杜春涛
案例:服务——宠物商店(二)
杜春涛
案例:服务和依赖注入——产品展示
案例:服务和依赖注入——产品展示(一)
杜春涛
案例:服务和依赖注入——产品展示(二)
杜春涛
案例:服务和依赖注入——子组件向父组件传值
案例:服务和依赖注入——子组件向父组件传值(一)
杜春涛
案例:服务和依赖注入——子组件向父组件传值(二)
杜春涛
案例:服务和依赖注入——随机数
案例:服务和依赖注入——随机数(一)
杜春涛
案例:服务和依赖注入——随机数(二)
杜春涛
案例:Input装饰器——父组件向子组件传值
杜春涛
案例:Input和ViewChild装饰器——父子组件之间的通讯
案例:Input和ViewChild装饰器——父子组件之间的通讯(一)
杜春涛
案例:Input和ViewChild装饰器——父子组件之间的通讯(二)
杜春涛
案例:Input和ViewChild装饰器——父子组件之间的通讯(三)
杜春涛
案例:Input和ViewChild装饰器——父子组件之间的通讯(四)
杜春涛
案例:ViewChild装饰器——获取Dom节点和与子组件通信
案例:ViewChild装饰器——获取Dom节点和与子组件通信(一)
杜春涛
案例:ViewChild装饰器——获取Dom节点和与子组件通信(二)
杜春涛
案例:管道——数据格式化
案例:管道——数据格式化(一)
杜春涛
案例:管道——数据格式化(二)
杜春涛
案例:管道——数据格式化(三)
杜春涛
案例:管道——数据格式化(四)
杜春涛
案例:路由——组件间跳转
案例:路由——组件间跳转(一)
杜春涛
案例:路由——组件间跳转(二)
杜春涛
案例:路由——组件间跳转(三)
杜春涛
案例:路由——组件间跳转(四)
杜春涛
案例:路由——组件间跳转(五)
杜春涛
案例:路由——组件间跳转(六)
杜春涛
案例:生命周期函数——函数的执行顺序
案例:生命周期函数——函数的执行顺序(一)
杜春涛
案例:生命周期函数——函数的执行顺序(二)
杜春涛
案例:生命周期函数——函数的执行顺序(三)
杜春涛
案例:生命周期函数——函数的执行顺序(四)
杜春涛
案例:Ng-Zorro-Antd——按钮、图标和分割线
案例:Ng-Zorro-Antd——按钮、图标和分割线(一)
杜春涛
案例:Ng-Zorro-Antd——按钮、图标和分割线(二)
杜春涛
案例:Ng-Zorro-Antd——按钮、图标和分割线(三)
杜春涛
案例:Ng-Zorro-Antd——按钮、图标和分割线(四)
杜春涛
案例:Ng-Zorro-Antd——页面布局
案例:Ng-Zorro-Antd——页面布局(一)
杜春涛
案例:Ng-Zorro-Antd——页面布局(二)
杜春涛
案例:Ng-Zorro-Antd——页面布局(三)
杜春涛
案例:Ng-Zorro-Antd——页面布局(四)
杜春涛
案例:Ng-Zorro-Antd——页面布局(五)
杜春涛
案例:Ng-Zorro-Antd——页面布局(六)
杜春涛
案例:Ng-Zorro-Antd——组件综合应用
案例:Ng-Zorro-Antd——组件综合应用(一)
杜春涛
案例:Ng-Zorro-Antd——组件综合应用(二)
杜春涛
案例:Ng-Zorro-Antd——组件综合应用(三)
杜春涛
案例:Ng-Zorro-Antd——组件综合应用(四)
杜春涛
案例:Ng-Zorro-Antd——组件综合应用(五)
杜春涛
案例:Ng-Zorro-Antd——组件综合应用(六)
杜春涛
案例:Ng-Zorro-Antd——组件综合应用(七)
杜春涛
案例:Ng-Zorro-Antd——组件综合应用(八)
杜春涛
案例:Ng-Zorro-Antd——组件综合应用(九)
杜春涛
案例:Ng-Zorro-Antd——组件综合应用(十)
杜春涛
案例:Ng-Zorro-Antd——组件综合应用(十一)
杜春涛
案例:Ng-Zorro-Antd——组件综合应用(十二)
杜春涛
案例:Ng-Zorro-Antd——组件综合应用(十三)
杜春涛
案例:Ng-Zorro-Antd——组件综合应用(十四)
杜春涛
案例:Ng-Zorro-Antd——组件综合应用(十五)
杜春涛
案例:Ng-Zorro-Antd——组件综合应用(十六)
杜春涛
案例:Ng-Zorro-Antd——组件综合应用(十七)
杜春涛
案例:服务器部署——网站发布
案例:服务器部署——网站发布(一)
杜春涛
案例:服务器部署——网站发布(二)
杜春涛
  • 第一章TypeScript编程基础

    TypeScript编程基础

  • 1.1TypeScript简介

    TypeScript简介

  • 1.2案例:Hello World

    案例:Hello World

  • 1.3案例:数据类型

    案例:数据类型

  • 1.4案例:函数

    案例:函数

  • 1.5案例:类和对象

    案例:类和对象

  • 1.6案例:接口

    案例:接口

  • 1.7案例:泛型

    案例:泛型

  • 1.8案例:类、接口和泛型的综合应用

    案例:类、接口和泛型的综合应用

  • 1.9案例:模块和命名空间

    案例:模块和命名空间

  • 1.10案例:类装饰器

    案例:类装饰器

  • 第二章Angular

    Angular

  • 2.1Angular简介

    Angular简介

  • 2.2案例:基础编程——Hello Angular

    案例:基础编程——Hello Angular

  • 2.3案例:基础编程——文本与图片

    案例:基础编程——文本与图片

  • 2.4案例:基础编程——Flex布局

    案例:基础编程——Flex布局

  • 2.5案例:创建组件——多组件布局

    案例:创建组件——多组件布局

  • 2.6案例:数据与事件绑定—计时器

    案例:数据与事件绑定—计时器

  • 2.7案例:属性与事件绑定——国旗与国歌

    案例:属性与事件绑定——国旗与国歌

  • 2.8案例:数据和属性绑定——动态格式设置

    案例:数据和属性绑定——动态格式设置

  • 2.9案例:双向数据传递——摄氏/华氏温度转换器

    案例:双向数据传递——摄氏/华氏温度转换器

  • 2.10案例:双向数据传递——三角形面积计算器

    案例:双向数据传递——三角形面积计算器

  • 2.11案例:模板文件向逻辑文件传值——数学公式计算

    案例:模板文件向逻辑文件传值——数学公式计算

  • 2.12案例:ngStyle指令——自动随机变化的三色旗

    案例:ngStyle指令——自动随机变化的三色旗

  • 2.13案例:ngClass指令——页面布局

    案例:ngClass指令——页面布局

  • 2.14案例:ngIf指令——阶乘计算器

    案例:ngIf指令——阶乘计算器

  • 2.15案例:ngSwitch指令——选择颜色

    案例:ngSwitch指令——选择颜色

  • 2.16案例:ngIf和ngSwitch——成绩等级计算器

    案例:ngIf和ngSwitch——成绩等级计算器

  • 2.17案例:ngFor指令——神舟飞船载人航天历程

    案例:ngFor指令——神舟飞船载人航天历程

  • 2.18案例:ngIf和ngFor指令——打印九九乘法表

    案例:ngIf和ngFor指令——打印九九乘法表

  • 2.19案例:模板式表单——个人信息管理

    案例:模板式表单——个人信息管理

  • 2.20案例:复选框和单选按钮——设置字体样式和大小

    案例:复选框和单选按钮——设置字体样式和大小

  • 2.21案例:表单综合应用——代办事项

    案例:表单综合应用——代办事项

  • 2.22案例:创建类——数据管理

    案例:创建类——数据管理

  • 2.23案例:服务——宠物商店

    案例:服务——宠物商店

  • 2.24案例:服务和依赖注入——产品展示

    案例:服务和依赖注入——产品展示

  • 2.25案例:服务和依赖注入——子组件向父组件传值

    案例:服务和依赖注入——子组件向父组件传值

  • 2.26案例:服务和依赖注入——随机数

    案例:服务和依赖注入——随机数

  • 2.27案例:Input装饰器——父组件向子组件传值

    案例:Input装饰器——父组件向子组件传值

  • 2.28案例:Input和ViewChild装饰器——父子组件之间的通讯

    案例:Input和ViewChild装饰器——父子组件之间的通讯

  • 2.29案例:ViewChild装饰器——获取Dom节点和与子组件通信

    案例:ViewChild装饰器——获取Dom节点和与子组件通信

  • 2.30案例:管道——数据格式化

    案例:管道——数据格式化

  • 2.31案例:路由——组件间跳转

    案例:路由——组件间跳转

  • 2.32案例:生命周期函数——函数的执行顺序

    案例:生命周期函数——函数的执行顺序

  • 2.33案例:Ng-Zorro-Antd——按钮、图标和分割线

    案例:Ng-Zorro-Antd——按钮、图标和分割线

  • 2.34案例:Ng-Zorro-Antd——页面布局

    案例:Ng-Zorro-Antd——页面布局

  • 2.35案例:Ng-Zorro-Antd——组件综合应用

    案例:Ng-Zorro-Antd——组件综合应用

  • 2.36案例:服务器部署——网站发布

    案例:服务器部署——网站发布

  • 开始学习
  • 第一章  作业测试
    第一章 TypeScript编程基础

    1.1 TypeScript简介

    1.2 案例:Hello World

    1.3 案例:数据类型

    1.4 案例:函数

    1.5 案例:类和对象

    1.6 案例:接口

    1.7 案例:泛型

    1.8 案例:类、接口和泛型的综合应用

    1.9 案例:模块和命名空间

    1.10 案例:类装饰器

    视频数32
  • 第二章  作业测试
    第二章 Angular

    2.1 Angular简介

    2.2 案例:基础编程——Hello Angular

    2.3 案例:基础编程——文本与图片

    2.4 案例:基础编程——Flex布局

    2.5 案例:创建组件——多组件布局

    2.6 案例:数据与事件绑定—计时器

    2.7 案例:属性与事件绑定——国旗与国歌

    2.8 案例:数据和属性绑定——动态格式设置

    2.9 案例:双向数据传递——摄氏/华氏温度转换器

    2.10 案例:双向数据传递——三角形面积计算器

    2.11 案例:模板文件向逻辑文件传值——数学公式计算

    2.12 案例:ngStyle指令——自动随机变化的三色旗

    2.13 案例:ngClass指令——页面布局

    2.14 案例:ngIf指令——阶乘计算器

    2.15 案例:ngSwitch指令——选择颜色

    2.16 案例:ngIf和ngSwitch——成绩等级计算器

    2.17 案例:ngFor指令——神舟飞船载人航天历程

    2.18 案例:ngIf和ngFor指令——打印九九乘法表

    2.19 案例:模板式表单——个人信息管理

    2.20 案例:复选框和单选按钮——设置字体样式和大小

    2.21 案例:表单综合应用——代办事项

    2.22 案例:创建类——数据管理

    2.23 案例:服务——宠物商店

    2.24 案例:服务和依赖注入——产品展示

    2.25 案例:服务和依赖注入——子组件向父组件传值

    2.26 案例:服务和依赖注入——随机数

    2.27 案例:Input装饰器——父组件向子组件传值

    2.28 案例:Input和ViewChild装饰器——父子组件之间的通讯

    2.29 案例:ViewChild装饰器——获取Dom节点和与子组件通信

    2.30 案例:管道——数据格式化

    2.31 案例:路由——组件间跳转

    2.32 案例:生命周期函数——函数的执行顺序

    2.33 案例:Ng-Zorro-Antd——按钮、图标和分割线

    2.34 案例:Ng-Zorro-Antd——页面布局

    2.35 案例:Ng-Zorro-Antd——组件综合应用

    2.36 案例:服务器部署——网站发布

    视频数112
  • 期末考试