comsol入门指南

Angular is easy — but it’s also hard at the same time.

Angular很容易-但同时也很困难。

The thing with Angular is that it’s a framework, which means that it comes as a complete package. Unlike React, which is just a single library, Angular is a collection of libraries organized and arranged in a way that it works as seamlessly as possible with one other.

Angular的事情是它是一个框架，这意味着它是一个完整的软件包。 与React只是一个库不同，Angular是一组库的集合，这些库的组织和安排以尽可能彼此无缝的方式进行。

When we start out, we often create some sort of to-do list app. But a to-do list doesn’t exactly cover everything that you need to know about something.

当我们开始时，我们经常创建某种待办事项列表应用程序。 但是，待办事项清单并不能完全涵盖您需要了解的所有内容。

Below is a compiled list of topics and subjects that I’ve gathered (and summarized) to help you kickstart your Angular exploration journey, along with some helpful resource links.

下面是ACØ主题和主题，我已经收集(总结)，以帮助mpiled列表中，您的kickstart您的角度探索的旅程，一些有用的资源链接一起。

从头开始：Angular如何工作 (Start at the Beginning: How Angular works)

In a nutshell, Angular is a bunch of classes that are connected together to form the framework. It runs on a series of libraries and coordinates how these libraries are imported and used in the app.

简而言之，Angular是一堆连接在一起以形成框架的类。 它在一系列库上运行，并协调如何在应用程序中导入和使用这些库。

设置一切 (Setting everything up)

The short instructions –

简短说明–

Go download Angular CLI — npm install -g @angular/cli

转到下载Angular CLI — npm install -g @angular/cli

Run the following commands:

运行以下命令： ng new your-app-name-herecd your-app-name-hereng serve

Angular CLI lets you scaffold a barebones Angular app via the console. It saves you having to manually figure out all the routing, the setups, the best structures and practices.

Angular CLI使您可以通过控制台搭建准系统Angular应用程序。 它省去了您手动找出所有路由，设置，最佳结构和实践的麻烦。

了解@Component (Understanding @Component)

A component in Angular is the thing that allows you to connect data to view. It is the basic building block of an Angular app.

Angular中的组件使您可以连接数据以进行查看。 它是Angular应用程序的基本构建块。

If you think of a patchwork quilt, each square, triangle or whatever geometric shape makes up a component of the overall blanket. That’s what components essentially are in Angular.

如果想到拼布被子，则每个正方形，三角形或任何几何形状都构成整个毯子的组成部分。 这就是Angular中本质上的组件。

了解@NgModule (Understanding @NgModule)

Angular is a framework, which means that it organizes multiple libraries and coordinates them to make everything work. These libraries are called and are available as NgModules, accessible through an import and declared using the @NgModule decorator.

Angular是一个框架，这意味着它组织了多个库并对其进行协调以使所有工作正常进行。 这些库被称为NgModule，可以作为NgModule使用，可通过导入进行访问，并使用@NgModule装饰器进行声明。

使用Angular Material使其在视觉上更具吸引力 (Make it visually appealing with Angular Material)

Angular Material uses material design principles from Google and turns them into a usable visual component library for your Angular app. If you want to bootstrap your app to look visually acceptable, using Angular Material can speed up the process.

Angular Material使用Google的材料设计原则，并将其转变为Angular应用程序可用的可视组件库。 如果您希望引导您的应用在外观上看起来可以接受，则使用Angular Material可以加快该过程。

Use the following commands to install:

使用以下命令进行安装：

ng add @angular/material

Install HammerJS if you want to gesture recognition.

如果要进行手势识别，请安装HammerJS。

npm install --save hammerjs

TypeScript速成课程 (TypeScript Crash Course)

分类，点差，箭头功能和不变性 (Classes, spreads, arrow functions & immutability)

Here is an example of TypeScript syntax for classes:

这是类的TypeScript语法示例：

class Cat { greeting: string; constructor(message: string){ this.greeting = message; } greet() { return "Meow, meow, meow, " + this.greeting; }}let tibbers = new Cat("hello there");

进出口商品 (Imports and exports)

Angular keeps everything organized with imports and exports. Imports lets you pull in a library and use it. Export lets you create libraries of your own.

Angular通过进出口来保持一切井井有条。 导入使您可以引入库并使用它。 导出使您可以创建自己的库。

When it comes to TypeScript, the imported and exported thing is called a module. You can create your own classes and various other interfaces and hooks to be used exclusively for your app or shared among different components.

当涉及TypeScript时，导入和导出的东西称为模块。 您可以创建自己的类以及各种其他接口和挂钩，以专用于您的应用程序或在不同组件之间共享。

基础知识：内插和表达 (The Fundamentals: Interpolation and expressions)

Interpolation in Angular is the act of embedding expressions into marked-up text.

Angular中的插值是将表达式嵌入标记文本中的行为。

For example — {{ name }} – would print the associated name variable that’s set in the component. name is a property and the data printed is from the binding made in the component.

例如， {{ name }} –将打印在组件中设置的关联名称变量。 name是属性，打印的数据来自组件中的绑定。

An expression is when you do something with the variable. For example, take a look at the following: *ngFor="let item of items;" – thelet item of items is an expression.

表达式是您对变量进行操作时的情况。 例如，看一下以下内容： *ngFor="let item of items;" – let item of items的let item of items是一个表达式。

财产约束 (Property binding)

Property binding is a one-way data street that lets you set the property of an element. It uses [] to bind data in one direction and the item doesn’t expect to do anything (such as processing or passing it along) with the data.

属性绑定是一条单向数据街，可让您设置元素的属性。 它使用[]在一个方向上绑定数据，并且该项目不希望对数据做任何事情(例如处理或传递数据)。

Look at the example below:

看下面的例子：

<button [disabled]="buttonDisabled">Click me</button>

buttonDisabled is a boolean variable in the component.

buttonDisabled是组件中的布尔变量。

事件绑定 (Event binding)

Event binding in Angular is the ability to attach events to elements on the DOM. For example, a click event can make a button do something by executing a function.

Angular中的事件绑定是将事件附加到DOM上的元素的能力。 例如，单击事件可以使按钮通过执行功能来执行某些操作。

The target event name is identified within a pair of parentheses — ()

目标事件名称在一对括号中标识- ()

双向单向绑定 (Two-way, Unidirectional binding)

Two-way binding deals with the way data flows in an application. It’s a data management pattern that can be implemented in Angular and often represented through [()] kind of syntax.

双向绑定处理数据在应用程序中的流动方式。 这是一种数据管理模式，可以在Angular中实现，并且通常通过[()]类语法表示。

That’s why you should also check out unidirectional data binding to get an idea of how things flow in an Angular application.

因此，您还应该检查单向数据绑定，以了解事物在Angular应用程序中的流动方式。

模板#ref变量 (Template #ref variables)

Angular lets you capture DOM elements via # inside a pair of HTML tags. These tags may just be your regular HTML pairs or component or directives.

Angular允许您在一对HTML标签中通过＃捕获DOM元素。 这些标记可能只是您的常规HTML对或组件或指令。

For example:

例如：

<h1 #h1Element>Hello there</h1>{{h1Element.textContent}}

The above {{h1Element.textContent}} will return the content inside <h1> – Hello there – as plain text.

上面的{{h1Element.textContent}}将以纯文本形式返回<h1>内的内容– Hello，在那里。

And that’s basically it for this edition of Angular’s resource guide. More coming soon. The aim of this series is to eventually go through everything you need to know (or have awareness of) to be a proficient Angular developer.

这就是本版Angular资源指南的基本内容。 更多即将推出。 本系列的目的是最终学习您需要成为熟练的Angular开发人员所需要了解(或具有的意识)的所有内容。

Stay tuned for part 2!

请继续关注第2部分！

翻译自: https://medium.com/madhash/angular-resource-guide-the-starter-checklist-cf2638d8d804

comsol入门指南

相关资源：comsol几何建模用户指南（中文）