机器学习角度和统计学角度
重点(Top highlight)
“Experience is the name everyone gives to their mistakes — Oscar Wilde”
“经验就是每个人都犯错误的名字-奥斯卡·王尔德”
I have spent most of my career working on web applications developed in Angular. I started by learning and doing simple static html websites. Earlier, I had the experience of developing dynamic web applications made in jQuery.
我的大部分职业生涯都花在Angular开发的Web应用程序上。 我从学习和做简单的静态html网站开始。 之前，我有开发jQuery制作的动态Web应用程序的经验。
Learning Angular basics was overwhelming, but not hard. A couple of Udemy courses and tons of youtube videos made it easy and fun to learn. Working at a startup, I got my hands on multiple projects developed in Angular and I had fun creating them.
学习Angular基础知识非常困难，但并不难。 几个Udemy课程和大量的youtube视频使学习变得简单而有趣。 在一家初创公司工作时，我参与了Angular中开发的多个项目，并且创建它们很有趣。
Recently, I wrote an article on mistakes I made as an Angular developer.
最近，我写了一篇关于我作为Angular开发人员犯的错误的文章。
I figured out from response that many developers feel the same way thus decided to tailor-make a list of concepts to master while learning Angular.
我从响应中发现，许多开发人员也有相同的感觉，因此决定量身定制一系列概念，以在学习Angular时掌握这些概念。
实现点 (The realization point)
You won’t realize you were writing your code the wrong way until you actually come across the right way, and if you’re only watching youtube tutorials, this would never happen.
在您真正遇到正确的方法之前，您不会意识到自己是在以错误的方式编写代码，而且，如果您只看youtube教程，那将永远不会发生。
After having a good grasp on Angular basics, I started finding Angular Open Source projects and I tried to inspect the architecture of each. I strangely found it confusing and complicated. I could see a lot of concepts that I never had an idea about. I could see design patterns that I never learned and way of coding I never experimented with!
在掌握了Angular基础知识之后，我开始寻找Angular开源项目，并尝试检查每个项目的体系结构。 我奇怪地发现它令人困惑和复杂。 我可以看到很多我从未想到过的概念。 我可以看到我从未学过的设计模式以及从未尝试过的编码方式！
This was the point I realized that I have to learn beyond youtube videos.
这就是我意识到必须超越youtube视频学习的重点。
Don’t take me wrong. You can absolutely write stunning, user friendly web applications in Angular just knowing the basics. But creating a enterprise-level product will require more than just that!
不要误会我的意思。 只需了解基础知识，您就可以在Angular中绝对编写出色的，用户友好的Web应用程序。 但是，创建企业级产品不仅需要更多！
一切都取决于性能 (It all comes down to performance)
Angular over the years emerged to a complete framework. When we say framework, it is a collection of multiple libraries. For this reason, Angular is generally considered to be having a steep learning curve.
多年来，Angular形成了一个完整的框架。 当我们说框架时，它是多个库的集合。 因此，通常认为Angular具有陡峭的学习曲线。
Many core principles of Angular as a framework is being not taught or not taken into consideration in most of the online courses. This gap leads to having many developers creating applications that are less flexible, hard to enhance, and less performant. There are countless methods available in the Angular framework itself to make the application more efficient and better performing that most of us are not learned or went hands-on.
在大多数在线课程中，没有讲授或没有考虑到Angular作为框架的许多核心原则。 这种差距导致许多开发人员创建的应用程序灵活性较低，难以增强且性能较低。 Angular框架本身提供了无数种方法，可以使应用程序更高效，更好地执行，从而使我们大多数人都不学或不动手。
This is what I am relearning. I am learning how to make my Angular application more performant and more maintainable
这就是我在学习。 我正在学习如何使Angular应用程序更高效，更可维护
包括什么(What to include)
So, as I said already, I am patching my Angular learnings and the following are what I would include. This is a list I made with things I thought are important to have on an Angular developer belt while learning. You can add more to it.
因此，正如我已经说过的，我正在修补Angular的学习内容，以下是我要介绍的内容。 这是我在学习过程中认为自己对Angular开发人员来说很重要的事情所列出的清单。 您可以添加更多。
OOP和打字稿 (OOP and Typescript)
We, frontend developers, are coming from the JavaScript background. Most of us when jumping to Angular would only have hands-on experience with just javaScript. When I made the translation to TypeScript, I didn’t give even an hour to learn TypeScript. All I had in mind was ‘TypeScript is JavaScript with typings’(I had basic ES6 understanding though).
我们，前端开发人员，来自JavaScript背景。 我们大多数人在跳到Angular时，只有javaScript才有动手经验。 当我翻译成TypeScript时，我什至没有花一个小时来学习TypeScript。 我只想着' TypeScript是带类型JavaScript '(尽管我对ES6有基本的了解)。
Even when that is true to an extent, there are concepts exclusive to TypeScript or typical OOP languages that we need to master.
即使在一定程度上是对的，我们也需要掌握TypeScript或典型OOP语言专有的概念。
For example, Interfaces are not a concept we learned as part of ES6 but TypeScript supports interfaces are Angular, internally uses this concept heavily. Other OOP related topics would be Mixins and Access Modifiers are not available in ES6.
例如，接口不是我们作为ES6的一部分而学到的概念，但TypeScript支持的接口是Angular，在内部大量使用此概念。 其他与OOP相关的主题将是Mixins，而ES6中不提供访问修饰符。
Another important topic to have an in-depth understanding of is typescript‘s Dependency Injection(DI) pattern and Angular DI framework.
深入了解的另一个重要主题是打字稿的依赖注入(DI)模式和Angular DI框架。
Learning these concepts and understanding how each can be used in the Angular system to write readable, performant code can make you a better developer.
学习这些概念并理解如何在Angular系统中使用它们来编写可读的，高性能的代码可以使您成为更好的开发人员。
Rxjs (Rxjs)
One of the very core philosophy that Angular follow is the concept of reactivity. Rxjs , a reactive programming library was helping Angular to achieve this even better.
Angular遵循的非常核心的哲学之一就是React性的概念。 Rxjs是一个React式编程库，它正在帮助Angular更好地实现这一目标。
First things first. Rxjs is not just about Observble and Subscriptions. There is much more to it. Rxjs can make your development experience and code readability a lot better. It is important to start thinking reactively from the beginning.
首先是第一件事。 Rxjs不仅涉及Observble和Subscriptions 。 还有更多的东西。 Rxjs可以使您的开发经验和代码可读性更好。 从一开始就进行被动思考很重要。
You can start from here.
您可以从这里开始。
变化检测和NgZone (Change Detection and NgZone)
How many times have you played with code similar to the below one?
您玩过几次类似于以下代码的代码？
// ...
@Component({
selector: "app-student",
templateUrl: "./student.component.html",
styleUrls: ["./student.component.scss"],
changeDetection: ChangeDetectionStrategy.OnPush,
})
// ...We know that Angular is performing a change detection cycle to update the view with the latest values. But we almost all the time are using the default change detection strategy. There are more strategies we can use for different applications.
我们知道Angular正在执行更改检测周期，以使用最新值更新视图。 但是我们几乎所有时间都在使用默认的更改检测策略。 我们可以将更多策略用于不同的应用程序。
These can be really powerful too to make your application faster and performant.
这些功能也非常强大，可以使您的应用程序更快，性能更高。
You can learn more about change detection strategies here.
您可以在此处了解有关更改检测策略的更多信息。
NgZone is how Angular performs change detection. The concept of ‘Zone’ is coming from zone.js. As a developer, you don’t necessarily need to be aware of NgZone. But having a deeper understanding can help in debugging miscellaneous problems.
NgZone是Angular执行更改检测的方式。 “区域”的概念来自zone.js 作为开发人员，您不一定需要了解NgZone 。 但是，加深了解可以帮助调试其他问题。
NgZone can also help in writing performant code. Like we stated, this mechanism is helping Angular to perform change detection efficiently. There can be situations where you don’t really need the change detection to trigger. For example, when you are running a setTimeOut function in the background. Each iteration of the setTimeOut function will trigger change detection which can make your application sluggish. If you choose to run this timeout function outside of NgZone, you can prevent change detection from triggering.
NgZone还可以帮助编写性能代码。 就像我们说过的那样，这种机制正在帮助Angular有效地执行更改检测。 在某些情况下，您实际上并不需要触发变更检测。 例如，当您在后台运行setTimeOut函数时。 setTimeOut函数的每次迭代都会触发更改检测，这会使您的应用程序变慢。 如果您选择在NgZone之外运行此timeout功能，则可以防止触发更改检测。
Learn more about NgZone here.
在此处了解有关NgZone更多信息。
内容投影 (Content Projection)
Content projection is perhaps the most overlooked topic when it comes to online Angular tutorials.
当涉及在线Angular教程时，内容投影可能是最被忽视的话题。
Content projection is an Angular technique to project any content to a component. It can really come handy when you want to create truly reusable components.
内容投影是将任何内容投影到组件的Angular技术。 当您要创建真正可重用的组件时，它真的很方便。
For example, you are creating a confirmation modal component that can be reused throughout the application. You can have the following data passed to the modal using @Input.
例如，您正在创建一个确认模式组件，该组件可以在整个应用程序中重复使用。 您可以使用@Input将以下数据传递给模式。
- Title — The title of the modal(string) Title —模态(字符串)的标题
- Body — Confirmation message(string)正文—确认消息(字符串)
Actions —
cancelandokaybuttons操作-
cancel和okay按钮
What if you later need to add an image to indicate if the confirmation is a success(green tick) or failure(red cross)?
如果以后需要添加图像以指示确认是成功(绿色刻度)还是失败(红色十字)怎么办？
You can definitely add a new input to the component named type and pass that along. It works this time.
您绝对可以将新的输入添加到名为type的组件并将其传递。 这次有效。
But what if need the modal body to have more content? Like a radio group to select something? If you keep on adding each case, it will simply make your reusable, light component bulky, and less readable.
但是，如果需要模范机构有更多的内容怎么办？ 像一个广播团体一样选择东西？ 如果继续添加每种情况，只会使您的可重用，轻便的组件笨重且可读性较差。
This is where content projection comes handy. You can pass any template reference to a component using <ng-content></ng-content> syntax. With this, you can create smaller components that serve a single purpose with less business logic. Multiple content projection is a very powerful pattern to achieve structured, and flexible components.
这是内容投影方便的地方。 您可以使用<ng-content></ng-content>语法将任何模板引用传递给组件。 这样，您可以创建较小的组件，以较少的业务逻辑来实现单一目的。 多个内容投影是一种非常强大的模式，可以实现结构化且灵活的组件。
read more about content projection here.
在此处阅读有关内容投影的更多信息。
模板参考及更多 (Template reference and more)
Template reference and ng-template syntax can be confusing for beginners. But these concepts can help to write performant applications.
模板参考和ng-template语法可能会使初学者感到困惑。 但是这些概念可以帮助编写高性能的应用程序。
A template reference variable is nothing but a reference to any DOM element. It is helpful when you combine with @ViewChild to access any DOM element keeping Angular happy. You can imagine this something like a jQuery DOM selector. Moreover, ng-template can be helpful when you want to lazy load components.
模板引用变量不过是对任何DOM元素的引用。 当您与@ViewChild结合使用以访问任何使Angular满意的DOM元素时，这将很有帮助。 您可以想象这有点像jQuery DOM选择器。 此外，当您要延迟加载组件时， ng-template可能会有所帮助。
Additionally learning
额外学习
can be beneficial in structuring your next Angular project.
在构造下一个Angular项目时可能会有所帮助。
升级编码 (Level Up Coding)
Thanks for being a part of our community! Subscribe to our YouTube channel or join the Skilled.dev coding interview course.
感谢您加入我们的社区！ 订阅我们的YouTube频道或参加Skilled.dev编码面试课程。
翻译自: https://levelup.gitconnected.com/why-i-am-relearning-angular-5308555f4e8e
机器学习角度和统计学角度
5371
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
