如何使用AngularJS开发一个大规模的单页应用

在上面的外壳页面示例中，几个链接呗映射到了AngularJS的路由。div标签上的ng-view指令是一个能将选定路由的被渲染内容页面包含到外壳页面来补充AngularJS的$route服务的指令. 每次当目前的路由变化时，包含的视图也会根据$route服务的配置随之改变. 比如，当用户选择了 "Add New Customer" 链接，AngularJS 就会在ng-view所在的div里面渲染用于添加一个新顾客的内容 . 被渲染的内容是一个HTML片段.

下来的app.js文件同样也被外壳页面引用了。这个文件里的JavaScript将会为应用程序创建AngularJS模块。此外，应用程序所有的路由配置也会在这个文件中定义。你可以把一个AngularJS模块想象成封装你应用程序不同部分的容器。大多数的应用程序都会有一个主方法，用来初始化应用程序的不同部分，并将它们联系起来。AngularJS应用程序却没有一个主方法，而是让模块声明性的指定应用程序如何启动和配置. 本文的示例程序将只会有一个AngularJS模块，虽然应用程序中存在几个明显不同的部分(顾客，产品，订单和用户).

现在，app.js的主要目的就是如下所示，用来设置AngularJS的路由。AngularJS的$routeProvider服务会接受  when() 方法，它将为一个Uri匹配一个模式. 当发现一次匹配时，独立页面的HTML内容会跟随相关内容的控制器文件一同被加载到外壳页面中. 控制器文件就简单的只是一个JavaScript文件，它将获得带有某个特定路由请求内容的引用.

//Define an angular module for our app  var sampleApp = angular.module('sampleApp', []);  //Define Routing for the application  sampleApp.config(['$routeProvider',      function($routeProvider) {          $routeProvider.              when('/Customers/AddNewCustomer', {                  templateUrl: 'Customers/AddNewCustomer.html',                  controller: 'AddNewCustomerController'              }).              when('/Customers/CustomerInquiry', {                  templateUrl: 'Customers/CustomerInquiry.html',                  controller: 'CustomerInquiryController'              }).              otherwise({                  redirectTo: '/Customers/AddNewCustomer'              });  }]);

AngularJS 的控制器
 

AngularJS 控制器无非就是一个原生的JavaScript函数，只是被绑定到了一个特定的范围而已。控制器用来将逻辑添加到你的视图。视图就是HTML页面。这些页面只是做简单的数据展示工作，我们会使用双向数据绑定来将数据绑定到这些HTML页面上. 将模型（也就是数据）同数据粘合起来基本山就是控制器的职责了.

           
 Create

对于上面的AddCustomer模板，ng-controller指令将会引用JavaScript函数customerController，这个控制会执行所有的数据绑定以及针对该视图的JavaScript函数.

function customerController($scope)   {      $scope.FirstName = "William";      $scope.LastName = "Gates";          $scope.createCustomer = function () {                    var customer = $scope.createCustomerObject();          customerService.createCustomer(customer,                           $scope.createCustomerCompleted,                           $scope.createCustomerError);      }  }

开箱即用 - 可扩展性问题
 

当我为本文开发这个实力程序时，首当其冲的两个扩展性问题在应用单页面应用程序时变得明显起来。其实一个开箱即用，AngularJS需要应用程序的外壳页面中所有的JavaScript文件和控制器在启动中伴随应用程序的启动被引入和下载. 对于一个大型的应用程序而言，可能会有上百个JavaScript文件，这样情况看上去就会不怎么理想。我遇到的另外一个问题就是AngularJS的路由表。我找到的所有示例都有针对所有内容的所有路由的硬编码。而我想要的确不是一个在路由表里包含上百项路由记录的方案.

看完上述内容，你们对如何使用 AngularJS开发一个大规模的单页应用有进一步的了解吗？如果还想了解更多知识或者相关内容，请关注创新互联行业资讯频道，感谢大家的支持。