下载文档原格式
快速上手学习Angular前端框架与单页应用开发正文：第一章：认识Angular前端框架Angular是一种流行的前端框架，被广泛应用于单页应用（SPA）的开发。
它由Google开发，已经发展成为一个强大、灵活且易于使用的工具。
在开始学习Angular之前，我们需要了解一些基本概念。
1.1 Angular的特点和优势Angular提供了一种基于组件的开发模式，使得前端应用的开发更加模块化和可维护。
它采用了TypeScript语言进行开发，具有强大的静态类型检查能力，可以提升开发效率和代码质量。
与其他前端框架相比，Angular还具有以下优势：- 数据驱动的界面更新：Angular通过数据绑定机制可以自动更新界面，减少了手动DOM操作的繁琐过程。
- 响应式编程：Angular支持响应式编程的特性，可以方便地处理用户输入和异步操作。
- 强大的组件化和模块化：Angular的组件化开发模式可以让开发者更好地组织和复用代码。
- 丰富的生态系统：Angular拥有庞大而活跃的开发者社区，提供了大量的插件和第三方库支持。
1.2 Angular的基本概念在学习Angular之前，我们需要了解一些基本概念：- 模块（Module）：Angular应用由多个模块组成，每个模块包含一组相关的组件、服务等。
- 组件（Component）：组件是Angular应用的基本构建块，它封装了HTML模板、样式和逻辑。
- 模板（Template）：模板用于定义组件的视图，采用HTML 语法和Angular的模板语法。
- 数据绑定（Data binding）：数据绑定是Angular提供的一种机制，用于将组件的数据与界面进行关联。
- 服务（Service）：服务提供了一种组件之间共享数据和逻辑的方式，可以实现复用和业务分离。
第二章：快速开始Angular的开发2.1 安装Angular CLIAngular提供了一个命令行工具Angular CLI，可以简化项目的初始化和构建过程。
初⼊angular4——实际项⽬搭建总结前⾔接到⼀个pc端后台项⽬，还会加⼊两个安卓同事⼀起学习和做这个项⽬，需要带⼀下他们。
既ng1之后，我就没怎么有过其它后台框架的实际项⽬经验了，期间⽤的移动端框架也并⾮vue、angular系列、react，包括es6、webpack等也都并不熟悉。
公司⼀个其它后台项⽬使⽤了vue，偶尔我会维护⼀下但是总体来说对体系不熟悉。
⼀直⽐较喜欢angular，应该是有过ng1框架搭建的经验的原因（前⾯也有写过博客），学习过ng2和ng4的官⽅demo，总的来说照着抄写⼀遍意义不⼤，必须要⽤于实际项⽬才能真正吸收。
⽬前ng1肯定不要⽤了，我要重新熟悉和搭建⼀个架⼦，从⾃我喜好和前期⼀些基础来讲，ng4是最好的选择，刚好typescript的语法对安卓同事也⽐较友好。
向领导请⽰了之后，也得到了允许。
⼊坑之初，问题⼀般⽐较多，使⽤的是官⽅angular-cli创建项⽬。
中途完善cli的功能，理解整个框架是⽐较费精⼒的事情。
总的来说这次就花了两三天时间，梳理好了框架，配置好了⼀些基本功能和依赖，⽐如环境部署，路由嵌套，主页⾯布局（侧边栏，导航栏，内容，底部），公共服务（loading，http请求封装，全局服务title，⽤户信息存取）。
⽽后就直接和同事⼀起开发了。
最开始还有点没底，不知道搭架⼦要花多久时间，现在来看这个进度和时间还是很满意的，当然过程中参考了⼀些⽹上的同⾏分享的资源和代码。
⾮常感谢两位同事的积极⽀持，他们学习的也很快。
问题细节点scssangular-cli.json 设置 styleExt为scss之后，在组件⾥写Styles，并不会编译把scss编译成css，必须要写在独⽴的scss，然后通过styleUrls引⼊。
routes pathroutes path前⾯不能加 / 否则会报错const routes: Routes = [{ path: '', redirectTo: '/main', pathMatch: 'full' },{path: 'main',component: MainComponent},]<router-outlet><router-outlet> 的意思是当通过路由访问component的时候，component的selector会找到 <router-outlet></router-outlet> ，@Component定义的selector会直接⽣成⼀个标签，载⼊到<router-outlet></router-outlet>下⽅，如果不设置selector标签名就是默认的ng-component。
angular4的用法Angular4的用法Angular4是一个非常强大的前端框架，用于构建现代化的Web应用程序。
它提供了许多工具和功能，使开发者能够轻松地构建复杂的应用程序。
在本文中，我们将一步一步地回答关于Angular4的使用方法。
第一步：安装Angular4首先，我们需要确保我们的开发环境中已经安装了Node.js。
然后，我们可以使用npm（Node.js的包管理器）在命令行中全局安装Angular CLI （Command Line Interface）。
在命令行中运行以下命令：npm install -g @angular/cli这将安装Angular CLI并使其在我们的项目中可用。
第二步：创建一个新的Angular4项目接下来，我们可以使用Angular CLI创建一个新的Angular4项目。
在命令行中，我们可以运行以下命令：ng new my-app这将创建一个名为"my-app"的新文件夹，并在其中安装Angular4的基本文件和目录。
第三步：启动开发服务器一旦新项目创建完成，我们可以进入新创建的文件夹，并在命令行中运行以下命令来启动开发服务器：cd my-appng serve这将启动一个本地开发服务器，并在默认端口上运行我们的应用程序。
我们可以在浏览器中访问"第四步：修改应用程序模板Angular4使用HTML模板来定义应用程序的外观和感觉。
在"src/app"目录下，我们可以找到名为"appponent.html"的文件。
打开这个文件，我们可以看到一个简单的HTML代码块。
我们可以根据我们的需求修改这个模板。
第五步：修改应用程序样式在"src/app"目录下，我们可以找到名为"appponent.css"的文件。
这个文件用于定义我们的应用程序的样式。
我们可以根据我们的需求修改这个样式。
Angular基础什么是AngularAngular是一种流行的前端框架，用于构建Web应用程序。
它由Google开发并维护，是一个开源项目。
Angular提供了一种结构化的方法来构建动态、可扩展的Web应用程序。
它采用了一种声明式的编程风格，通过HTML模板和JavaScript代码来描述应用程序的行为。
Angular的特点Angular具有以下几个主要特点：1.双向数据绑定：Angular使用双向数据绑定来实现模板和组件之间的数据交互。
当模型数据发生变化时，视图会自动更新，反之亦然。
这大大简化了开发过程，减少了手动更新视图的工作量。
2.组件化架构：Angular采用组件化架构，将应用程序划分为多个组件，每个组件负责一部分功能。
组件之间可以进行嵌套和通信，使应用程序更易于管理和维护。
3.模块化开发：Angular使用模块化开发的方式来组织代码。
每个Angular应用程序由一个或多个模块组成，模块定义了应用程序的各个部分之间的依赖关系。
模块化开发使得代码更易于重用和测试。
4.强大的模板语法：Angular的模板语法非常强大，可以用于描述应用程序的视图结构和行为。
它支持条件语句、循环语句、事件处理等常用功能，并提供了丰富的内置指令和管道来简化开发。
5.依赖注入：Angular使用依赖注入来管理组件之间的依赖关系。
通过依赖注入，我们可以将组件的依赖项注入到组件中，使得组件更加灵活和可测试。
Angular的基本概念组件组件是Angular应用程序的基本构建块。
每个组件都由以下几个部分组成：•模板：用于定义组件的视图结构，采用HTML语法。
•类：用于定义组件的行为，包含属性和方法。
•元数据：用于描述组件的特性，如选择器、样式、依赖等。
组件是可重用的，可以在应用程序的不同部分进行复用。
模块模块是Angular应用程序的容器，用于组织和管理应用程序的各个部分。
每个Angular应用程序至少有一个根模块，用于启动应用程序。
Angular前端开发从入门到精通一、什么是AngularAngular是一种用于构建Web应用程序的JavaScript框架，由Google开发和维护。
它采用了基于组件的开发模式，通过一系列的组件、服务、指令和管道构建起一个完整的应用程序。
1.1 Angular的优势Angular具有以下几个优势：1）模块化：Angular将应用程序拆分为多个模块，每个模块负责不同的功能，提高了代码的可维护性和可重用性。
2）双向数据绑定：Angular支持双向数据绑定，数据的变化会自动反映到视图上，大大简化了开发过程。
3）依赖注入：Angular使用依赖注入来管理组件之间的依赖关系，提高了代码的可测试性和可扩展性。
4）强大的路由功能：Angular的路由功能可以实现单页面应用（SPA），提供更好的用户体验和性能。
二、环境配置和项目搭建2.1 环境配置首先，我们需要安装Node.js和npm，Node.js是JavaScript的运行环境，而npm是Node.js的包管理工具。
接下来，我们可以使用npm命令安装Angular CLI（Angular命令行界面）。
Angular CLI是一个命令行工具，可以帮助我们快速创建、开发和构建Angular应用程序。
2.2 项目搭建使用Angular CLI可以快速创建一个新的Angular项目。
通过运行ng new命令，我们可以创建一个名为my-app的项目。
三、Angular基础知识3.1 组件组件是Angular应用程序的基本构建模块，它由HTML模板、样式和逻辑代码组成。
通过使用@Component装饰器，我们可以定义一个组件。
3.2 模块模块可以将相关的组件、指令、服务等逻辑代码组织在一起，并提供一个清晰的架构。
通过使用@NgModule装饰器，我们可以定义一个模块。
3.3 路由路由是Angular应用程序中导航的核心部分。
通过配置路由，我们可以实现不同URL之间的跳转，并加载不同的组件。
Angular框架入门指南Angular是一种流行的开发框架，被广泛用于构建Web应用程序。
下面是一个1500字的Angular入门指南，详细介绍了该框架的基本概念和使用方法。
1. Angular简介- Angular是一个用于构建Web应用程序的开源框架，由Google开发和维护。
- 它通过使用TypeScript语言和JavaScript编写的一组库，来简化Web应用程序的开发过程。
2. 安装和配置- 首先，你需要安装Node.js，这是一个生成和运行Web应用程序所需的运行时环境。
- 然后，使用npm命令在终端中安装Angular CLI (Command Line Interface)工具。
- 一旦安装完成，你就可以使用ng命令来创建新的Angular项目和组件。
3. 创建一个Angular项目- 使用ng命令创建一个新的Angular项目。
例如，运行"ng new my-app"将创建一个名为"my-app"的新项目。
- 进入项目目录，运行"ng serve"命令来启动开发服务器。
默认情况下，应用程序将在http://localhost:4200上运行。
4. 组件和模板- Angular使用组件来构建Web应用程序的用户界面。
每个组件都由一个模板和相应的类组成。
- 模板使用HTML语法来定义应用程序的布局和呈现。
- 类定义了组件的行为和数据模型。
5. 数据绑定- Angular支持双向数据绑定，这意味着数据的变化会自动反映在视图中，而视图的变化也会自动更新数据。
- 数据绑定可以在模板的属性、标签、事件等方面进行。
6. 依赖注入- 依赖注入是Angular的重要概念之一，它使你能够更轻松地管理组件之间的依赖关系。
- 通过注入依赖项，你可以将服务或其他对象提供给组件中的其他组件。
7. 路由和导航- 路由和导航是构建多页应用程序的关键部分。
Geant4基础知识G4模拟粒子过程:建立一次模拟，在 G4 中称为一次Run；Run 建立后，需要对几何结构、物理过程进行初始化；初始化完成后就开始模拟过程了，首先发射一个粒子。
在G4 中，发射一个（或一系列）粒子到所有次级粒子死亡的过程成为一次 Event。
而每次发射的初始粒子则有粒子发射器进行控制。
而在每一个event过程中，粒子与材料反应后会可能生成多个次级粒子，每个粒子都会有一条径迹，称之为 track；而每一个粒子（初始的或次级的）的径迹又是由很多步组成的，称之为step。
G4模拟的基本算法：A Run Start -> 初始化物理模型/几何模型-> An Event Start -> 调用粒子发射器发射粒子-> A Track Start-> A Step Start-> A Step End-> Next Step Start-> ……-> All Step End-> A Track End-> Next Track Start-> ……-> All Track End-> An Event End -> Next Event Start-> ……-> All Event End(All Primaries Shot) -> A Run End -> Next Run Start-> ……1) main()中应该包括的内容Geant4是一个探测器模拟工具, 但它对于某个特定的模拟程序没有固定的main()函数, 用户在建立模拟程序的过程中需要提供自己的main()函数. 一个最基本的main()函数需要包括以下几个方面:G4RunManager(模拟整个过程)G4VUserDetectorConstruction(定义探测器材料, 几何形状, 灵敏区和读出方案)G4VUserPhysicsList(定义粒子种类和物理过程, 还有截断参数)G4VUserPrimaryGeneratorAction(定义了源粒子的种类, 能量, 出射方向等)一个最简单的main()函数如下:#include "G4RunManager.hh"#include "G4UImanager.hh"#include "ExN01DetectorConstruction.hh"#include "ExN01PhysicsList.hh"#include "ExN01PrimaryGeneratorAction.hh"int main(){// Construct the default run managerG4RunManager* runManager = new G4RunManager;// set mandatory initialization classesrunManager->SetUserInitialization(new ExN01DetectorConstruction);runManager->SetUserInitialization(new ExN01PhysicsList);// set mandatory user action classrunManager->SetUserAction(new ExN01PrimaryGeneratorAction);// Initialize G4 kernelrunManager->Initialize();// get the pointer to the UI manager and set verbositiesG4UImanager* UI = G4UImanager::GetUIpointer();UI->ApplyCommand("/run/verbose 1");UI->ApplyCommand("/event/verbose 1");UI->ApplyCommand("/tracking/verbose 1");// start a runint numberOfEvent = 3;runManager->BeamOn(numberOfEvent); // job terminationdelete runManager;return 0;}main()首先生成一个 G4RunManager类，这个类是在主程序中用以初始化模拟信息，用来连接子程序，连接方式是通过 Set函数来完成。
Angular应用开发基础教程Angular是一种流行的前端开发框架，被广泛应用于Web应用和移动应用的开发中。
本文将介绍Angular应用开发的基础教程，包括搭建开发环境、组件化架构、数据绑定、路由导航和服务等方面。
第一章：搭建开发环境在开始Angular应用开发之前，首先需要搭建适合的开发环境。
首先，确保已安装Node.js和npm包管理器，它们对于构建和运行Angular应用是必需的。
然后，使用npm安装Angular CLI（命令行界面工具），它将帮助我们创建、构建和测试Angular应用。
第二章：组件化架构Angular的核心思想是组件化架构，即将应用拆分为多个可复用的组件。
在这一章节中，我们将学习如何创建组件，并且理解组件之间的通信机制。
我们将介绍组件的生命周期钩子函数，以及如何使用输入和输出属性在组件之间传递数据。
通过这些概念，我们能够更好地设计和构建Angular应用。
第三章：数据绑定数据绑定是Angular的又一重要特性，它能够将组件中的数据与模板（视图）进行关联。
我们将介绍插值绑定、属性绑定和事件绑定等常用的数据绑定方式。
此外，我们还将学习如何使用ngModel指令实现双向数据绑定，以及如何利用管道对数据进行格式化和转换。
第四章：路由导航在一个复杂的应用中，不同的页面需要通过路由导航进行切换。
Angular提供了强大的路由模块，可以帮助我们实现这一功能。
我们将学习如何配置路由，定义路由器导航组件，并使用路由参数传递数据。
此外，我们还将介绍路由守卫的概念，以及如何实现路由守卫来控制页面的访问权限。
第五章：服务服务在Angular应用中扮演着重要的角色，它们用于共享数据和功能。
我们将学习如何创建和使用服务，并了解依赖注入的概念。
通过服务，我们能够有效地组织和管理应用的业务逻辑。
此外，我们还将介绍如何使用HttpClient模块与后端服务器进行通信，实现数据的CRUD操作。
第六章：表单处理表单是Web应用中常见的用户交互方式之一，Angular提供了丰富的表单处理功能。
Angular4学习之AngularCLI的安装与使⽤教程简介关于"Angular"版本，"Angular"官⽅已经统⼀命名Angular 1.x同⼀为Angular JS，Angular 2.x及以上统称"Angular"。
"CLI"是"Command Line Interface"的简写，是⼀种命令⾏接⼝，实现⾃动化开发流程。
⽐如：ionic-cli、vue-cli等；它可以创建项⽬、添加⽂件（组件，服务等）以及执⾏⼀⼤堆开发任务，⽐如测试、打包和发布下⾯就来给⼤家详细介绍关于Angular4 Angular CLI的安装与使⽤教程，需要的朋友可以参考借鉴，下⾯话不多说了，来⼀起看看详细的介绍吧。
安装Angular CLI1. 需要安装 nodejs 以及 npm2. 全局安装 typescript，angular 推荐使⽤ typescript编写(.ts ⽂件)。
使⽤命令：npm install -g typescript3. 安装 angular-cli使⽤命令：npm install -g @angular/cli图⽰注：因为安装 angular-cli 的时间有点早了，不过⼤家安装的时候不是我这个版本没有关系的。
新建Angular项⽬使⽤命令 new// ngStudy 是⼯程名称可以随意修改的ng new ngStudy项⽬图⽰注：需要等待漫长的时间，因为这个需要下载 node_modules，有 140多MB⽣成的项⽬结构：运⾏Angular项⽬使⽤命令 serve//需要进⼊⼯程的⽬录中ng serve运⾏图⽰界⾯访问写在最后1.安装过程因为好多依赖包都是国外的，所以有可能下载不下来1.1 可以尝试修改 npm 的镜像，改为淘宝的1.2 通过 "蓝灯" 代理去下载4.介绍下更新 angular-cli 的版本⽅法可以直接使⽤npm install -g @angular/cli 进⾏更新总结以上就是这篇⽂章的全部内容了，希望本⽂的内容对⼤家的学习或者⼯作具有⼀定的参考学习价值，如果有疑问⼤家可以留⾔交流，谢谢⼤家对的⽀持。
AngularJs基础（60分钟⼊门）AngularJS 是⼀个创建富客户端应⽤的JavaScript MVC框架。
你仍然需要具有服务端后台，但⼤多数的⽤户交互逻辑将放到客户端上处理。
它可以创建单页的应⽤程序，⼀个页⾯的应⽤仅仅需要HTML,CSS和JavaScript在客户端。
它的⽬标是增强页⾯的模型-视图-控制（MVC）的功能，为简化开发和测试。
单页Web应⽤（single page web application，SPA），就是只有⼀张Web页⾯的应⽤。
浏览器⼀开始会加载必需的HTML、CSS和JavaScript，所有的操作都在这张页⾯上完成，由JavaScript来控制不同view在这个页⾯上的呈现。
本⽂源于Youtube上⼀个不错的AngularJs的⼊门教程视频：，主要讲解了AngularJs中Directive,Data Binding,Filter和Module的概念和⽤法。
个⼈认为这四个概念是AngularJs的核⼼，⽀撑起了AngularJs的⾻架。
掌握了他们对全局上把握AngularJs很有帮助。
进阶则需要⼤量实践和官⽹API⽂档的阅读。
看看下图⼤致就可以了解AngularJs有何能耐。
在VS中创建⼀个空的Empty Web项⽬。
Directive 和 Data BindingAngularJs 中的Directive概念不是很容易理解，⼊门阶段可暂且将其理解为⽤来扩展HTML的⼀种tag. Angularjs会解析这些tag，以实现Angularjs的Magic.可以对照传统的Imperative UI来理解AngularJs的Declarative UI:AngularJs之前我们实现前台页⾯逻辑⼀般是通过给HTML元素设置ID，然后使⽤Javascript或jQuery来操纵HTML DOM，这就是典型的Imperative UI。
⽽AngularJs不再需要给HTML元素设置ID，⽽使⽤Declarative,由Declarative“指导”HTML 元素的⾏为。
Angular4基础知识培训之快速入门目录∙第一节- Angular 简介∙第二节- Angular 环境搭建∙第三节- 插值表达式∙第四节- 自定义组件∙第五节- 常用指令简介∙第六节- 事件绑定∙第七节- 表单模块简介∙第八节- Http 模块简介∙第九节- 注入服务∙第十节- 路由模块简介第一节Angular 简介Angular 是什么Angular是由谷歌开发与维护一个开发跨平台应用程序的框架，同时适用于手机与桌面。
Angular 有什么特点∙基于Angular 我们可以构建适用于所有平台的应用。
比如：Web 应用、移动Web 应用、移动应用和桌面应用等。
∙通过Web Worker和服务端渲染(SSR)，达到在如今Web平台上所能达到的最高渲染速度。
∙Angular 让你能够有效掌控可伸缩性。
基于RxJS、Immutable.js 和其它推送模型，能适应海量数据需求。
Angular 提供了哪些功能∙动态HTML∙强大的表单系统(模板驱动和模型驱动)∙强大的视图引擎∙事件处理∙快速的页面渲染∙灵活的路由∙HTTP 服务∙视图封装∙AOT、Tree ShakingAngular 与AngularJS 有什么区别∙不再有Controller和Scope∙更好的组件化及代码复用∙更好的移动端支持∙引入了RxJS与Observable∙引入了Zone.js，提供更加智能的变化检测第二节- Angular 环境搭建基础要求∙Node.js∙GitAngular 开发环境配置方式∙基于Angular Quickstarto https:///angular/quickstart∙基于Angular CLIo npm install -g @angular/cli配置开发环境我们选用第一种配置方式搭建Angular 开发环境：基于Angular Quickstart∙使用Git克隆quickstart 项目git clone https:///angular/quickstart ng4-quickstart ∙使用IDE打开已新建的项目code ./ng4-quickstart∙安装项目所需依赖npm i∙验证环境是否搭建成功npm start基于Angular CLI∙安装Angular CLI (可选)npm install -g @angular/cli∙检测Angular CLI 是否安装成功ng --version∙创建新的项目ng new PROJECT-NAME∙启动本地服务器cd PROJECT-NAME ng serve第三节- 插值表达式在Angular 中，我们可以使用{{}}插值语法实现数据绑定。
绑定普通文本import { Component } from'@angular/core'; @Component({ selector: 'my-app', template: `<h1>Hello {{name}}</h1>`, }) export classAppComponent { name = 'Angular'; }绑定对象属性import { Component } from'@angular/core'; @Component({ selector: 'my-app', template: ` <h2>大家好，我是{{name}}</h2> <p>我来自<strong>{{address.province}}</strong>省,<strong>{{address.city}}</strong>市 </p> `, }) export class AppComponent { name = 'Semlinker'; address = { province: '福建', city: '厦门' } }值得一提的是，我们可以使用Angular 内置的json管道，来显示对象信息：@Component({ selector: 'my-app', template: ` ... <p>{{address | json}}</p> `, }) export class AppComponent { name = 'Semlinker'; address = { province:'福建', city: '厦门' } }第四节- 自定义组件在Angular 中，我们可以通过Component装饰器和自定义组件类来创建自定义组件。
基础知识定义组件的元信息在Angular 中，我们可以使用Component装饰器来定义组件的元信息：@Component({ selector: 'my-app', // 用于定义组件在HTML代码中匹配的标签template: `<h1>Hello {{name}}</h1>`, // 定义组件内嵌视图 })定义组件类export class AppComponent { name = 'Angular'; }定义数据接口在TypeScript 中的接口是一个非常灵活的概念，除了可用于对类的一部分行为进行抽象以外，也常用于对「对象的形状（Shape）」进行描述。
interface Person { name: string; age: number; } let semlinker: Person = { name: 'semlinker', age: 31 };自定义组件示例创建UserComponent 组件import { Component } from'@angular/core'; @Component({ selector:'sl-user', template: ` <h2>大家好，我是{{name}}</h2> <p>我来自<strong>{{address.province}}</strong>省,<strong>{{address.city}}</strong>市 </p> `}) export class UserComponent { name = 'Semlinker'; address = { province: '福建', city: '厦门' }; }声明UserComponent 组件// ...import { UserComponent } from'./ponent';@NgModule({ imports: [ BrowserModule ], declarations: [ AppComponent, UserComponent], bootstrap: [ AppComponent ] }) export class AppModule { }使用UserComponent 组件import { Component } from'@angular/core'; @Component({ selector:'my-app', template: ` <sl-user></sl-user> `, }) export class AppComponent {}使用构造函数初始化数据@Component({...}) export class UserComponent { name: string; address: any; constructor() { = 'Semlinker'; this.address = { province: '福建', city: '厦门' } } }接口使用示例定义Address 接口interface Address { province: string; city: string; }使用Address 接口export class UserComponent { name: string; address: Address; // ... }第五节- 常用指令简介在Angular 实际项目中，最常用的指令是ngIf和ngFor指令。
基础知识ngIf 指令简介该指令用于根据表达式的值，动态控制模板内容的显示与隐藏。
它与AngularJS 1.x 中的ng-if指令的功能是等价的。
ngIf 指令语法<div *ngIf="condition">...</div>ngFor 指令简介该指令用于基于可迭代对象中的每一项创建相应的模板。
它与AngularJS 1.x 中的ng-repeat指令的功能是等价的。
ngFor 指令语法<li *ngFor="let item of items;">...</li>ngIf 与ngFor 指令使用示例import{ Component } from'@angular/core'; interface Address { province: string; city: string; } @Component({ selector: 'sl-user', template: ` <h2>大家好，我是{{name}}</h2> <p>我来自<strong>{{address.province}}</strong>省, <strong>{{address.city}}</strong>市 </p> <div *ngIf="showSkills"> <h3>我的技能</h3> <ul> <li *ngFor="let skill of skills"> {{skill}} </li></ul> </div> ` }) export class UserComponent { name: string; address: Address; showSkills: boolean; skills: string[]; constructor() { = 'Semlinker'; this.address = { province: '福建', city: '厦门' };this.showSkills = true; this.skills = ['AngularJS 1.x', 'Angular 2.x', 'Angular 4.x']; } }第六节- 事件绑定在Angular 中，我们可以通过(eventName)的语法，实现事件绑定。
