Angular面试题三

十六、一个 angular 应用应当如何良好地分层？

目录结构的划分

1、对于小型项目，可以按照文件类型组织，比如：

css

Js  {

 controllers

 models

 services

 filters

   }

templates

2、但是对于规模较大的项目，最好按业务模块划分，比如：

css

Modules

  account

  controllers

  models

  services

  filters

  templates

 disk

  controllers

  models

  services

  filters

  templates

modules 下最好再有一个 common 目录来存放公共的东西。

3.逻辑代码的拆分

作为一个 MVVM 框架，Angular 应用本身就应该按照 模型，视图模型（控制器），视图来划分。

这里逻辑代码的拆分，主要是指尽量让 controller 这一层很薄。提取共用的逻辑到 service 中 （比如后台数据的请求，数据的共享和缓存，基于事件的模块间通信等），提取共用的界面操作到 directive 中（比如将日期选择、分页等封装成组件等），提取共用的格式化操作到 filter 中等等。

在复杂的应用中，也可以为实体建立对应的构造函数，比如硬盘（Disk）模块，可能有列表、新建、详情这样几个视图，并分别对应的有 controller，那么可以建一个 Disk 构造函数，里面完成数据的增删改查和验证操作，有跟 Disk 相关的 controller，就注入 Disk 构造器并生成一个实例，这个实例就具备了增删改查和验证方法。这样既层次分明，又实现了复用（让 controller 层更薄了）。

十七、angular 应用常用哪些路由库，各自的区别是什么？

Angular1.x 中常用 ngRoute 和 ui.router，还有一种为 Angular2 设计的 new router （面向组件）。后面那个没在实际项目中用过，就不讲了。

无论是 ngRoute 还是 ui.router，作为框架额外的附加功能，都必须以 模块依赖 的形式被引入。

区别

ngRoute 模块是 Angular 自带的路由模块，而 ui.router 模块是基于 ngRoute模块开发的第三方模块。

ui.router 是基于 state （状态）的， ngRoute 是基于 url 的，ui.router模块具有更强大的功能，主要体现在视图的嵌套方面。

使用 ui.router 能够定义有明确父子关系的路由，并通过 ui-view 指令将子路由模版插入到父路由模板的 <div ui-view></div> 中去，从而实现视图嵌套。而在 ngRoute 中不能这样定义，如果同时在父子视图中 使用了 <div ng-view></div> 会陷入死循环。

示例

// ngRoute

var app = angular.module('ngRouteApp', ['ngRoute']);

app.config(function($routeProvider){

  $routeProvider

    .when('/main', {

      templateUrl: "main.html",

      controller: 'MainCtrl'

    })

    .otherwise({ redirectTo: '/tabs' });

// ui.router

var app = angular.module("uiRouteApp", ["ui.router"]);

app.config(function($urlRouterProvider, $stateProvider){

  $urlRouterProvider.otherwise("/index");

  $stateProvider

    .state("Main", {

      url: "/main",

      templateUrl: "main.html",

      controller: 'MainCtrl'

    })

 

十八、如果通过angular的directive规划一套全组件化体系，可能遇到哪些挑战？

件如何与外界进行数据的交互，以及如何通过简单的配置就能使用吧。

十九、分属不同团队进行开发的 angular 应用，如果要做整合，可能会遇到哪些问题，如何解决？

可能会遇到不同模块之间的冲突。

比如一个团队所有的开发在 moduleA 下进行，另一团队开发的代码在 moduleB 下

angular.module('myApp.moduleA', [])

  .factory('serviceA', function(){

    ...

  })

angular.module('myApp.moduleB', [])

  .factory('serviceA', function(){

    ...

  }) 

angular.module('myApp', ['myApp.moduleA', 'myApp.moduleB'])

会导致两个 module 下面的 serviceA 发生了覆盖。

貌似在 Angular1.x 中并没有很好的解决办法，所以最好在前期进行统一规划，做好约定，严格按照约定开发，每个开发人员只写特定区块代码。