Angular、Angular大项目开发经验

Angular简介

Angular是著名的前端开发框架，和vue及react齐名的框架，由google公司推出并维护。最近锐英源软件在angular框架下开发产品，有一些经验和总结汇总一下，所以写下本文。

angular功能强，非常复杂，技术点很多，发展很成熟，有些朋友说angular学习曲线不好，不要上当。有必要用就用，可以放心用。我在多方提示下改了很多功能，改出来很多经验，所以看到本文的不要错过，有空也经常来锐英源软件网站上逛逛。

Angular大项目开发经验

我改的功能涉及web前端复杂界面类、界面类被上层ui平台调用、导入angular库、后台新建接口、后台修改接口、改后台数据结构和数据库列涉及加新表和独立的业务模块开发。因为是二次开发，在几万个文件里综合信息进行修改，非常困难。这里先讲个调试大法日志输出的趣事，web前端的日志是输出到网页里，不是启动web的dos窗口里。在网页里打开开发工具，找到控制台，就能看到console.log的输出，angular的log语句后面的参数不用和第一个参数有任何的标注关系，逗号后就可以直接输出了。

为什么叫Angular大项目开发经验？因为锐英源软件开发的一个ts文件现在有3500多行，现在还是完全体，后面还有可能增加代码。这个Component进行调用的数据参数也多，比如：

                  // 准备基础数据
        const baseData = {
            settings: this.data.settings,
            devices: Object.values(this.projectService.getDevices()), // 直接从projectService获取设备列表
            title: '3D模型组态',
            views: this.projectService.getHmi()?.views || [], // 直接从projectService获取视图列表
            view: null,
            dlgType: 0, // 使用默认对话框类型
            withEvents: true,
            withActions: DynamicThreeComponent.actionsType, // 使用DynamicThreeComponent中定义的支持的动作类型
            default: null,
            inputs: [], // 空输入列表
            names: [], // 空名称列表
            scripts: this.projectService.getScripts(), // 直接从projectService获取脚本列表
            withBitmask: false,
            languageTextEnabled: false,
            selectedObjectId: memoryEditInput['2'],   // 3D对象UUID by shw 新加 20260113
            selectedObjectName: memoryEditInput['2的名称'], // 3D对象名称
            selectedObjectType: memoryEditInput['2的类型'], // 3D对象类型，常用Mesh
            selectedObjectProperties: memoryEditInput['3.4'] !== undefined ? memoryEditInput['3.4'] : null, // 3D对象属性，根据类型不同，属性不同,比如color,position.x
        };

在业务模块里，在后台要混合多个表的数据，提交给前端Angular组件，前端Angular组件处理时，要根据复杂类型来处理。

Angular学习入门

前面提到Angular的学习曲线，这里做个科普导引，用我桌面端开发经验讲下Angular的入门，下图来自于Angular官方网站的教程截图。

第一个相当于angular的hello world，第二个相当于angular开发环境入门，第三个是类似桌面端的消息学习，消息把多个文件组织起来，前端也有类似机制。第四个是特色功能介绍，性能优化方面。

按照这样的学习顺序，学习angular不难。下面再讲下angular的组件的常用组织方式三大部分：代码ts、html模板、css样式。这三个可以写到一起，类似这样：

@Component({
  selector: 'app-example',
  templateUrl: 'Hello World!',
  styleUrls: ['.hello { color: red; }']
})
export class ExampleComponent {
  title = 'Example Component';
}

这些内容要写到ts文件里，html模板和css样式可以写到单独的文件里，也可以写到组件的元数据里。通常是要分开写，因为html模板和css样式是要被浏览器解析的，而ts文件是要被angular编译器解析的。selector是组件的选择器，用来在html模板里引用这个组件。而export class ExampleComponent是组件的类名，用来在ts文件里引用这个组件。

写过C++的MFC程序的朋友，可以理解html和css是.rc文件管理的范畴，而ts文件是.cpp文件管理的范畴。

要用到复杂功能，就需要导入库，比如要用到angular的http模块，就需要在ts文件里导入http模块，类似这样：

import { HttpClient } from '@angular/common/http';

每个组件类，比如ExampleComponent都是有Angular底层框架支持的各类功能，比如：

组件的生命周期钩子函数，比如ngOnInit、ngOnDestroy等。
组件的输入输出属性，比如@Input、@Output等。
组件的服务注入，比如HttpClient等。
组件的模板引用变量，比如#myInput等。
组件的事件绑定，比如(click)="onClick()"等。

ngOnInit是组件的生命周期钩子函数，在组件初始化时调用。ngOnDestroy是组件的生命周期钩子函数，在组件销毁时调用。这和MFC里的OnInitDialog和OnDestroy是类似的。

对于编译错误，在开发工具里会有红线提示，提示错误的位置和错误的原因。要解决编译错误，就要根据错误提示，修改代码。另外在浏览器里也会有错误提示，但是提示的位置和错误的原因不是很清楚。所以要在开发工具里先解决编译错误，再在浏览器里测试。

还有运行时错误，在浏览器里开发工具里的控制台会有错误提示，提示错误的位置和错误的原因。要解决运行时错误，就要根据错误提示，修改代码。JavaScript遇到运行时错误，后面的代码不会执行，有时候觉得界面效果没有达到预想阶段，就要关注运行时错误了，比如：

要先通过链接来跳转到对应的代码行位置上，在显示忽略错误提示行的上面行，有链接，里面有文件名行号，通过这些信息，找到位置，研究代码。这个错误提示是说，在调用一个函数时，参数的类型不是预期的类型。

前面讲项目经验时说要传入传出复杂类型数据，经常遇到这类错误，要根据错误提示，检查代码，找到错误位置，修改代码。

要想设置断点，是在浏览器开发工具环境下设置断点，比如在chrome浏览器里，打开开发工具，点击 Sources 标签，找到对应的文件，在文件里设置断点，然后刷新页面，就会在断点位置停住，方便调试。在开发工具里左侧列表里，也会列出项目组织的文件，就是浏览器开发工具环境操作不会太习惯。

友情链接