Angular系列教程-第一节

Html、CSS、Javascript介绍

什么是Angular
Angular 是一个应用设计框架与开发平台,用于创建高效、复杂、精致的单页面应用。
Angular 是一个用 HTML 和 TypeScript 构建客户端应用的平台与框架。 Angular 本身就是用 TypeScript 写成的。它将核心功能和可选功能作为一组 TypeScript 库进行实现,你可以把它们导入你的应用中。

模块
NgModule 为一个组件集声明了编译的上下文环境,它专注于某个应用领域、某个工作流或一组紧密相关的能力。 NgModule 可以将其组件和一组相关代码(如服务)关联起来,形成功能单元。
每个 Angular 应用都有一个根模块,通常命名为 AppModule。根模块提供了用来启动应用的引导机制。 一个应用通常会包含很多特性模块。

组件
每个 Angular 应用都至少有一个组件,也就是根组件,它会把组件树和页面中的 DOM 连接起来。 每个组件都会定义一个类,其中包含应用的数据和逻辑,并与一个 HTML 模板相关联,该模板定义了一个供目标环境下显示的视图。

模板、指令、绑定
模板会把 HTML 和 Angular 的标记(markup)组合起来,这些标记可以在 HTML 元素显示出来之前修改它们。
指令是指使用在模板当中的语法结构。
绑定分为事件和属性绑定,事件绑定可以让你根据用户输入响应不同数据,属性绑定是将你的应用数据显示到html当中。

路由
路由器会根据你应用中的导航规则和数据状态来拦截 URL。 当用户点击按钮、选择下拉框或收到其它任何来源的输入时,你可以导航到一个新视图。 路由器会在浏览器的历史日志中记录这个动作,所以前进和后退按钮也能正常工作。

官方文档:https://angular.io/docs

环境搭建
Node.js
Angular 需要 Node.js 版本 10.9.0 或更高版本
下载地址:https://nodejs.org/en/

检查版本指令
node -v

npm包管理器
Angular、Angular CLI 和 Angular 应用都依赖于 npm 包中提供的特性和功能。要想下载并安装 npm 包,你必须拥有一个 npm 包管理器。

检查是否安装指令
npm -v

安装Angular  CLI
指令
npm install -g @angular/cli
检查
ng -h

更多参考:https://angular.io/cli

创建工作目录和初始化应用
指令
ng new my-test-app

运行应用
打开工作目录
执行cli命令
ng server –open

Vscode插件
TSLint:Typescript语法检查
Prettier:代码格式化
IntelliJ IDEA Keybindings:IDEA风格的快捷键
Angular 7 Snippets:Angular语法填充(标签)
Angular Files:生成Angular的文件模板(Component、Module、Pipe等等)
Angular Follow Selector:文件跳转(Component跳转到html、scss文件)
Angular Language Service:引用填充和跳转到定义(html中进行引用补全)
Debugger for Chrome:调试Angular代码

部署环境并运行应用

Tagged . Bookmark the permalink.

Comments are closed.