Angular - bernardopnunes/SoftwareEngineeringSDUW GitHub Wiki

1. dsNo1

Group Members:
1. (Leader)Zijun Wang(@ZijunWang810)
2. Jia Gao(@gaojia1999)
3. Huachen Gao(@GaoHchen)
4. Jiaming Gu(@olivergu6657688)
5. Kaixun Jiang (@deep-kaixun)
6. Weize Kong(@kongkk233)
7. Lihao Sun(@sunlihao2018)
8. Xiaonan Zhao(@voidzx123)
9. Yangbohan Miao(@S1mp13)
10. Tianhao Sun (@stickice)

2. Beauty and the Beast

• Overview
• Development History of Angular
• Design of Angular
• The Advantages of Angular
• Imperfections of Angular
• Why we choose Angular
• Step by Step with Angular
• Reference
• Division of Work

The AngularJS framework works by first reading the Hypertext Markup Language (HTML) page, which has an additional custom HTML attributes embedded into it. Angular interprets those attributes as directives to bind input or output parts of the page to a model that is represented by standard JavaScript variables. The values of those JavaScript variables can be manually set within the code, or retrieved from static or dynamic JSON resources.

AngularJS is built on the belief that declarative programming should be used to create user interfaces and connect software components, while imperative programming is better suited to defining an application's business logic. The framework adapts and extends traditional HTML to present dynamic content through two-way data-binding that allows for the automatic synchronization of models and views. As a result, AngularJS de-emphasizes explicit Document Object Model (DOM) manipulation to improve testability and performance.

• Angularjs binds application data to HTML elements.
• Angularjs can clone and duplicate HTML elements.
• Angularjs can hide and display HTML elements.
• Angularjs can add code "behind" HTML elements.
• Angularjs supports input validation.

AngularJS used to be the “golden child” among JavaScript frameworks, as it was initially introduced by Google corporation in 2012. It was built with the Model-View-Controller concept in mind, though authors of the framework often called it “Model-View-*” or even “Model-View-Whatever”.

AngularJS became popular very quickly and received a lot of traction. Still, its maintainers decided to take another step further and proceeded to develop a new version which was initially named Angular 2 (later, simply Angular without the “JS” part). It’s no coincidence the framework received a new name: actually, it was fully re-written and redesigned, while many concepts were reconsidered.

The first stable release of Angular 2 was published in 2016, and since then AngularJS started to lose its popularity in favor of a new version. One of the main features of Angular 2 was the ability to develop for multiple platforms: web, mobile, and native desktop (whereas AngularJS has no mobile support out of the box).

Then, to make things even more complex, by the end of 2016, Angular 4 was released. And Angular 5 was released in November 2017. It is also backward compatible with prior Angular versions. Angular 6 should be released quite soon, hopefully giving us even more cool features and enhancements.

Angular is one of the most popular frameworks, and it has four features.

Angular follows the MVC model of software engineering and encourages loose coupling among presentation, data, and logic components. Through dependency injection, Angular brings traditional services to web applications on the client-side, such as view independent control. Therefore, the back end reduces many burdens and produces lighter web applications.

Angularjs is based on the belief that declarative programming should be used to build the user interface and write software, while directive programming is very suitable to represent business logic. The framework adapts and extends traditional HTML. It adapts dynamic content through bidirectional data binding, which allows automatic synchronization between model and view, Angularjs makes DOM operations less important and improves testability.

Dependency (DI for short) is a design pattern. It means that other objects that an object depends on do not need to be created manually, but only need to "shout a voice". When this object is created, its dependent objects are automatically created and injected by the framework. It is only a rule at least. All service and provider objects in the module can implement Di according to the parameter name Note: spring's Di dependency injection is to inject one bean into another bean, while another bean does not need new to get this bean, and does not need to create it. The same is true in Angularjs.

High cohesion low coupling rules high cohesion: functions within a module are all functions on one hand, and the functions to be solved are similar.

• Official templates: ng(core module), ngroute (route), nganimate (animation effect)
• User-defined module: angular.module ('module-name ', {})

Angular is built with TypeScript, which in turn relies on JS ES6. You don’t need to learn a new language, but you still receive features like static typing, interfaces, classes, namespaces, decorators, etc.

When an Angular application is crafted properly, you don’t end up with a tangle of classes and methods that are hard to modify and even harder to test. The code is structured conveniently and you won’t need to spend much time to understand what is going on.

Angular strived to remove tight coupling between various components of the application. Injection happens in NodeJS-style and you may replace various components with ease.

Angular is meant to be thoroughly tested and it supports both unit and end-to-end testing with tools like Jasmine and Protractor.

Every tool has both strong and weak sides. To make a wise decision, you should also consider what difficulties you may face while using Angular. Angular has the following imperfections:

Most developers claim that Angular is quite complex, which is why it can be difficult for newcomers. And even though the component-based architecture makes code more readable, it’s still difficult to manage and set dependencies between components. TypeScript only adds fuel to the fire since you need additional time to learn it.

Even though the Angular team does their utmost to make Angular SEO-friendly, lots of developers still complain about poor accessibility for search crawlers. This is explained by the fact that single-page applications often change content and meta tags using JavaScript. Some search bots are unable to see these changes and hence see only the basic page template. Besides, deep links on a single-page app are hard to get indexed.

Developers can’t switch directly from AngularJS to Angular. There’s an entire section in the Angular documentation that enumerates all possible ways to deal with migration. But it’s fair to say that older versions of Angular are perfectly backward compatible. For example, you’ll have no difficulty migrating from the fifth to the fourth version.

Adding too much logic to HTML is not a good practice. Angularjs only places the binding, not the logic. Angularjs is unique in that it embraces HTML / CSS, while other frameworks provide their APIs, which deviate from HTML. Angularjs embodies the declarative programming paradigm in all frameworks. Declarative programming is very suitable for writing user interface, and writing logic is given to JavaScript. Angularjs allows you to extend HTML, so any problems you encounter in using Angularjs can be easily overcome.

Angular has become the most popular open-source JavaScript framework in the world of web application development. Angular is undoubtedly a safe choice for developing new projects, Angular2.0 And One There is a big difference. in fact, Augular2.0 The evolutionary process is similar to that of Ember (known as SproutCore2.0 ）. Angular supports typescript language (provided by Microsoft, providing advanced functions such as type detection for JavaScript). In actual development, many developers are still using typescript. Many improvements of angular are expected to make angular the preferred framework for many enterprises Two It seems a bit risky at the moment, but we believe Angular2.0 The time is coming.

1. Set up your environment.
2. Create a new workspace and initial app project.
3. Serve the application.
4. Make changes to the application.

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'Welcome to SDUW';
}

<h1>{{title}}</h1>

h1 {
  color: #369;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 250%;
}
h2, h3 {
  color: #444;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: lighter;
}
body {
  margin: 2em;
}
body, input[type="text"], button {
  color: #333;
  font-family: Cambria, Georgia;
}
/* everywhere else */
* {
  font-family: Arial, Helvetica, sans-serif;
}

• segmentfault.com-Angular.js vs Ember.js at:https://segmentfault.com/a/1190000000362479
• blog.csdn.net-Introduction to Angularjs at:https://blog.csdn.net/qq_40646143/article/details/81157569?utm_medium=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-1.nonecase&depth_1-utm_source=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-1.nonecase
• cnblogs.com-How to select front frame:ANGULAR VS EMBER VS REACT at:https://www.cnblogs.com/powertoolsteam/p/4991732.html

• Jia Gao(@gaojia1999): Overview
• Xiaonan Zhao(@voidzx123): Design->MVC model and Design->Two-way binding and Design->Dependency injection
• Lihao Sun(@sunlihao2018): Design->Modular design
• Huachen Gao(@GaoHchen): “Why we choose Angular”->Connection with HTML
• Weize Kong(@kongkk233): “Why we choose Angular”->Process