angularjs 应用结构

      angular 是google维护的一款MVVM前端框架,用于快速开发确实不错。页面与controller的双向绑定可以省去很多值的设置与获取,光这一点就可以提高了前台开发的速率。

      今天大体讲一下应用组织结构方面>

目录:在根目录中只放置index.html一个文件,然后根据需要创建scripts、styles、views等目录,在scripts目录下,首先会存放app.js文件,然后在之下又可以创建多个子目录,如:controllers、directives、filters、services、vendor等,在其中分门别类地存放不同的内容。

文件:每个文件中应该只有一件事物,这件事物可能会是控件、指令、过滤器或者服务等等。这会生成比较小但更专注的文件。也有利于更好地进行测试。

模块:首先在app.js中定义和配置所有模块,如:

angular.module('yourAppName', ['yourAppDep']);
angular.module('yourAppDep');

然后在模块中定义控件、服务等,如:

angular.module('yourAppDep').controller('MyCtrl', function () {
      // ...
});

依赖关系:一般来说,服务、控件、指令等应该拥有尽可能少的依赖关系,这是非常好的软件开发实践,会有助于测试。API应该分层。控件尤其不能综合多种不同级别的抽象。

指令:对指令使用app专用的前缀,这有助于避免与第三方的组件重名。例如下面的代码中就用“btla”作为前缀:

angular.module('yourAppDep').directive('btlaControlPanel', function () {
     // ...
});

服务:你可以使用下面的方式声明服务:

angular.module('yourAppDep').service('MyService', function () {
     // ...
});

模型:AngularJS作为JavaScript框架,其独到之处就在于让你可以完全掌控模型层。这是AngularJS的强大之处,因为应用程序的核心是你的数据,而各种应用之间的数据又有很大区别。所以Brian Ford强烈建议要仔细考虑使用和中数据,以及将会如何存储数据。

控制器:

angular.module('yourAppDep').controller('MyCtrl', function () {
     // ...
});


在性能方面,AngularJS应用一般会非常非常快。大多数应用不需要做任何特殊的优化,因此,除非你发现严重的性能问题,否则就应该把时间花在其他方面来改善应用.

你可能感兴趣的:(AngularJS,应用结构)