虽然传统 Web 应用也能够实现复杂的前端交互效果和网页内容组织，但是在实现大型、高效、可扩展的 SPA（单页应用）中 AngularJS 更加有利—— AngularJS 提供了很多强大的机制，如模块化、MVC 模式、服务、指令等等，用于创建更加清晰和健壮的代码。
那么，相对于传统 Web 应用，AngularJS 项目要如何从中迁移？
在一个 HTML 文件中，使用 ng-view 指令替换 DIV 元素
传统应用的页面通常包含多个 HTML 文件，每个文件对应一个 URL 和一个单独的 CSS。但是，SPA 通过在一个 HTML 文件中显示多个页面，使通过 URL 的导航更加容易。AngularJS 使用 ng-view 指令将之前的 DIV 元素替换为内嵌 HTML。
<body ng-app="myApp"> <div ng-view></div> </body>
-- -------------------- ---- -------
-- ----------------------- ---- --------
----------------------- ------------ -- -- ------- --
-------------------------------- -
--------------
---------------- -
------------ -------------
--
---------------- -
------------ -------------
--
------------
----------- ---------
---
---使用 script 标记集中管理 JS 文件
为避免在头部各种引入 JS 文件，需要在 HTML 文件底部统一管理 JavaScript 文件。
在 angular.app 中，可以直接使用 require 语法管理 JavaScript。
<body ng-app="myApp">
<div ng-view></div>
<!-- 底部 -->
<script src="myApp.js"></script>
</body>-- -------------------- ---- -------
-- --------
----------------
-------- -----
------ -
---------- --------------
---------------- --------------------
---------- ---------
--
----- -
---------- --------- -----------
---------------- -----------
-
---
-------------------- -------- -- -
--- ----- - ----------------------- -------------
------------------------------- -------- ---------------- -
------- --- ----
----
---通过指令替代 JavaScript
指令是 AngularJS 的一种基本机制，可用于定义新的 HTML 元素或扩展现有元素的功能。
<div ng-controller="myCtrl"></div> <my-customer /> <!-- 下一步讲到 -->
AngularJS 提供了四种类型的指令：元素指令、属性指令、类指令和注释指令。
angular.module('myApp',[])
.directive('myCustomer', function() {
return {
template: 'Name: John | Address: 40th St.'
};
});通过 MVC 模式管理数据视图
在 AngularJS 中，常常通过 Model-View-Controller（MVC） 模式来实现复杂的数据视图。
<div ng-controller="myCtrl">
<li ng-repeat="x in names">
{x}
</li>
</div>//定义名为 myCtrl 的控制器
angular.module('myApp',[])
.controller('myCtrl',function($scope){
//数据 Model
$scope.names = ["Java","C++","PHP","Go","Swift"];
});通过服务自动化管理功能性方法
AngularJS 的服务是一个广义平台，可以管理各种方法，如服务、工厂、提供商等。
angular.module('myApp',[])
.controller('customersCtrl',function($scope, $http) {
$http.get("https://www.example.com/customers.php")
.then(function successCallback(response) {
$scope.names = response.data;
});
});其他注意事项
一些重要注意点：
- 需要增强代码可调试性，并加强单元测试的管理；
- 向控制器和指令传递外部数据时，要使用 isolate scope，否则可能引起 name 命名空间的冲突；
- 通过 ng-repeat 替代循环，提高速度和代码复用性；
总结
在许多方面，AngularJS 更加有利于构建高级和完整的前端模块，从而实现一个高效、可维护、可扩展和易于测试的现代移动、Web 应用程序。通过使用上述这些技术，将帮助您更好地从传统 Web 应用向 SPA 中迁移。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64e4540ff6b2d6eab3fb583c