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 中并沒有很好的解決辦法，所以最好在前期進行統一規劃，做好約定，嚴格按照約定開發，每個開發人員只寫特定區塊代碼。
轉載于:https://www.cnblogs.com/ndos/p/8331685.html
總結
以上是生活随笔為你收集整理的Angular面试题三的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 通过IEnumerable和IDispo
- 下一篇： 1038. Recover the Sm