Angular面试题三
十六、一個(gè) angular 應(yīng)用應(yīng)當(dāng)如何良好地分層？
目錄結(jié)構(gòu)的劃分
1、對(duì)于小型項(xiàng)目，可以按照文件類型組織，比如：
css
Js? {
?controllers
?models
?services
?filters
?? }
templates
2、但是對(duì)于規(guī)模較大的項(xiàng)目，最好按業(yè)務(wù)模塊劃分，比如：
css
Modules
? account
? controllers
? models
? services
? filters
? templates
?disk
? controllers
? models
? services
? filters
? templates
modules 下最好再有一個(gè) common 目錄來(lái)存放公共的東西。
3.邏輯代碼的拆分
作為一個(gè) MVVM 框架，Angular 應(yīng)用本身就應(yīng)該按照 模型，視圖模型（控制器），視圖來(lái)劃分。
這里邏輯代碼的拆分，主要是指盡量讓 controller 這一層很薄。提取共用的邏輯到 service 中 （比如后臺(tái)數(shù)據(jù)的請(qǐng)求，數(shù)據(jù)的共享和緩存，基于事件的模塊間通信等），提取共用的界面操作到 directive 中（比如將日期選擇、分頁(yè)等封裝成組件等），提取共用的格式化操作到 filter 中等等。
在復(fù)雜的應(yīng)用中，也可以為實(shí)體建立對(duì)應(yīng)的構(gòu)造函數(shù)，比如硬盤（Disk）模塊，可能有列表、新建、詳情這樣幾個(gè)視圖，并分別對(duì)應(yīng)的有 controller，那么可以建一個(gè) Disk 構(gòu)造函數(shù)，里面完成數(shù)據(jù)的增刪改查和驗(yàn)證操作，有跟 Disk 相關(guān)的 controller，就注入 Disk 構(gòu)造器并生成一個(gè)實(shí)例，這個(gè)實(shí)例就具備了增刪改查和驗(yàn)證方法。這樣既層次分明，又實(shí)現(xiàn)了復(fù)用（讓 controller 層更薄了）。
?
十七、angular 應(yīng)用常用哪些路由庫(kù)，各自的區(qū)別是什么？
Angular1.x 中常用 ngRoute 和 ui.router，還有一種為 Angular2 設(shè)計(jì)的 new router （面向組件）。后面那個(gè)沒(méi)在實(shí)際項(xiàng)目中用過(guò)，就不講了。
無(wú)論是 ngRoute 還是 ui.router，作為框架額外的附加功能，都必須以 模塊依賴 的形式被引入。
區(qū)別
ngRoute 模塊是 Angular 自帶的路由模塊，而 ui.router 模塊是基于 ngRoute模塊開(kāi)發(fā)的第三方模塊。
ui.router 是基于 state （狀態(tài)）的， ngRoute 是基于 url 的，ui.router模塊具有更強(qiáng)大的功能，主要體現(xiàn)在視圖的嵌套方面。
使用 ui.router 能夠定義有明確父子關(guān)系的路由，并通過(guò) ui-view 指令將子路由模版插入到父路由模板的 <div ui-view></div> 中去，從而實(shí)現(xiàn)視圖嵌套。而在 ngRoute 中不能這樣定義，如果同時(shí)在父子視圖中 使用了 <div ng-view></div> 會(huì)陷入死循環(huán)。
示例
// 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'
??? })
?
十八、如果通過(guò)angular的directive規(guī)劃一套全組件化體系，可能遇到哪些挑戰(zhàn)？
件如何與外界進(jìn)行數(shù)據(jù)的交互，以及如何通過(guò)簡(jiǎn)單的配置就能使用吧。
?
十九、分屬不同團(tuán)隊(duì)進(jìn)行開(kāi)發(fā)的 angular 應(yīng)用，如果要做整合，可能會(huì)遇到哪些問(wèn)題，如何解決？
可能會(huì)遇到不同模塊之間的沖突。
比如一個(gè)團(tuán)隊(duì)所有的開(kāi)發(fā)在 moduleA 下進(jìn)行，另一團(tuán)隊(duì)開(kāi)發(fā)的代碼在 moduleB 下
angular.module('myApp.moduleA', [])
? .factory('serviceA', function(){
??? ...
? })
?
angular.module('myApp.moduleB', [])
? .factory('serviceA', function(){
??? ...
? })?
?
angular.module('myApp', ['myApp.moduleA', 'myApp.moduleB'])?
會(huì)導(dǎo)致兩個(gè) module 下面的 serviceA 發(fā)生了覆蓋。
貌似在 Angular1.x 中并沒(méi)有很好的解決辦法，所以最好在前期進(jìn)行統(tǒng)一規(guī)劃，做好約定，嚴(yán)格按照約定開(kāi)發(fā)，每個(gè)開(kāi)發(fā)人員只寫特定區(qū)塊代碼。
轉(zhuǎn)載于:https://www.cnblogs.com/ndos/p/8331685.html
總結(jié)
以上是生活随笔為你收集整理的Angular面试题三的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： 通过IEnumerable和IDispo
- 下一篇： 1038. Recover the Sm