虽然传统 Web 应用也能够实现复杂的前端交互效果和网页内容组织，但是在实现大型、高效、可扩展的 SPA（单页应用）中 AngularJS 更加有利—— AngularJS 提供了很多强大的机制，如模块化、MVC 模式、服务、指令等等，用于创建更加清晰和健壮的代码。
那么，相对于传统 Web 应用，AngularJS 项目要如何从中迁移？
在一个 HTML 文件中，使用 ng-view 指令替换 DIV 元素
传统应用的页面通常包含多个 HTML 文件，每个文件对应一个 URL 和一个单独的 CSS。但是，SPA 通过在一个 HTML 文件中显示多个页面，使通过 URL 的导航更加容易。AngularJS 使用 ng-view 指令将之前的 DIV 元素替换为内嵌 HTML。
----- --------------- ---- -------------- -------
-- ----------------------- ---- --------
----------------------- ------------ -- -- ------- --
-------------------------------- -
--------------
---------------- -
------------ -------------
--
---------------- -
------------ -------------
--
------------
----------- ---------
---
---使用 script 标记集中管理 JS 文件
为避免在头部各种引入 JS 文件，需要在 HTML 文件底部统一管理 JavaScript 文件。
在 angular.app 中，可以直接使用 require 语法管理 JavaScript。
----- ---------------
---- --------------
---- -- ---
------- ------------------------
--------- --------
----------------
-------- -----
------ -
---------- --------------
---------------- --------------------
---------- ---------
--
----- -
---------- --------- -----------
---------------- -----------
-
---
-------------------- -------- -- -
--- ----- - ----------------------- -------------
------------------------------- -------- ---------------- -
------- --- ----
----
---通过指令替代 JavaScript
指令是 AngularJS 的一种基本机制，可用于定义新的 HTML 元素或扩展现有元素的功能。
---- ----------------------------- ------------ -- ---- ----- ---
AngularJS 提供了四种类型的指令：元素指令、属性指令、类指令和注释指令。
--------------------------
------------------------ ---------- -
------ -
--------- ------ ---- - -------- ---- ----
--
---通过 MVC 模式管理数据视图
在 AngularJS 中，常常通过 Model-View-Controller（MVC） 模式来实现复杂的数据视图。
---- -----------------------
--- ------------ -- -------
---
-----
------------ ------ ----
--------------------------
--------------------------------------
---- -----
------------ - ----------------------------------
---通过服务自动化管理功能性方法
AngularJS 的服务是一个广义平台，可以管理各种方法，如服务、工厂、提供商等。
--------------------------
-------------------------------------------- ------ -
--------------------------------------------------
-------------- ------------------------- -
------------ - --------------
---
---其他注意事项
一些重要注意点：
- 需要增强代码可调试性，并加强单元测试的管理；
- 向控制器和指令传递外部数据时，要使用 isolate scope，否则可能引起 name 命名空间的冲突；
- 通过 ng-repeat 替代循环，提高速度和代码复用性；
总结
在许多方面，AngularJS 更加有利于构建高级和完整的前端模块，从而实现一个高效、可维护、可扩展和易于测试的现代移动、Web 应用程序。通过使用上述这些技术，将帮助您更好地从传统 Web 应用向 SPA 中迁移。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/64e4540ff6b2d6eab3fb583c