zoukankan      html  css  js  c++  java
  • 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 中并没有很好的解决办法,所以最好在前期进行统一规划,做好约定,严格按照约定开发,每个开发人员只写特定区块代码。

  • 相关阅读:
    我在面试中碰到的面试题
    JavaScript中数组去重的几种方法整理
    html网页外框布局设计总结
    css+Jquery实现抽拉式导航条和页面内容适应
    jquery不能实现对dom元素的伪类元素样式进行操作
    css的文字颜色渐变
    javascript函数立即调用
    javascript闭包
    js异步原理
    关于浏览器兼容问题
  • 原文地址:https://www.cnblogs.com/ndos/p/8331685.html
Copyright © 2011-2022 走看看