Angular 面试准备

1. 和AngularJS区别

	AngularJS	Angular
架构	MVC(model-view-controller)	MVVM, controller->component
语言	JavaScript, dynamical	TypeScrip, statical, superset
移动端支持	no	yes
维护	难	容易
表达式	要记ng指令	属性绑定[ ]  事件绑定()

2.生命周期钩子（lifecycle hook）

每个组件都有一个生命周期

1. ngOnChanges - 当数据绑定输入属性的值发生变化时调用
2. ngOnInit - 在第一次 ngOnChanges 后调用
3. ngDoCheck - 自定义的方法，用于检测和处理值的改变
4. ngAfterContentInit - 在组件内容初始化之后调用
5. ngAfterContentChecked - 组件每次检查内容时调用
6. ngAfterViewInit - 组件相应的视图初始化之后调用
7. ngAfterViewChecked - 组件每次检查视图时调用
8. ngOnDestroy - 指令销毁前调用

3. 客户端（client-side）架构

4.依赖注入（dependency injection）

让我们可以不用自己实例化就能创建依赖对象的方法. 简单的来说, 依赖是以注入的方式传递的. 在Web应用中， Angular让我们可以通过DI来创建像Controllers和Directives这样的对象. 我们还可以创建自己的依赖对象, 当我们要实例化它们时, Angular能自动实现注入。

依赖是有functionality的service，很多的component和directive可能会需要这些funcionnality。angular提供一个这些dependency可以被injected进component或directive的机制。

inject的方式：在组件的constructor()，提供依赖类型作为参数

provide的方式：provides:[ ]

5.MVVM框架

包含三部分：Model、View、ViewModel

              View：它专注于界面的显示和渲染，在angular中则是包含一堆声明式Directive的视图模板。
　　　　ViewModel：它是View和Model的粘合体，负责View和Model的交互和协作，它负责给View提供显示的数据，以及提供了View中Command事件操作Model的途径；在angular中$scope对象充当了这个ViewModel的角色；
　　　　Model：它是与应用程序的业务逻辑相关的数据的封装载体，它是业务领域的对象，Model并不关心会被如何显示或操作，所以模型也不会包含任何界面显示相关的逻辑。在web页面中，大部分Model都是来自Ajax的服务端返回数据或者是全局的配置对象；而　　　　　　　　　　angular中的service则是封装和处理这些与Model相关的业务逻辑的场所，这类的业务服务是可以被多个Controller或者其他service复用的领域服务。
　　　　Controller：这并不是MVVM模式的核心元素，但它负责ViewModel对象的初始化，它将组合一个或者多个service来获取业务领域Model放在ViewModel对象上，使得应用界面在启动加载的时候达到一种可用的状态。
　　mvc的界面和逻辑关联紧密，数据直接从数据库读取。mvvm的界面与viewmode是松耦合，界面数据从viewmodel中获取。所以angularjs更倾向于mvvm

　　mvvm的优点：

　　　　低耦合：View可以独立于Model变化和修改，同一个ViewModel可以被多个View复用；并且可以做到View和Model的变化互不影响；
　　　　可重用性：可以把一些视图的逻辑放在ViewModel，让多个View复用；
　　　　独立开发：开发人员可以专注与业务逻辑和数据的开发（ViewModemvvmdi计人员可以专注于UI(View)的设计；

6.AOT（Ahead-Of-Time）运行前编译

应用需要在浏览器运行前被compile。

Angular会先生成JS代码，compile，都是在build time编译的，而非runtime。

优点：更快下载速度、更少HTTP请求、更快渲染速度、更稳定（构建时检测错误）

7.服务（services）

通常会是跨国app的一层，可以跨过各种组件重用，是从组件中抽象出来的关于“怎样做”的一层，以便组件专注于“做什么”。

创建：ng g service services/stock

在新建的服务中我们可以看到@Injectable()装饰器，它把这个类标记为依赖注入系统的参与者之一。组件中如何使用服务呢，必须将服务依赖注入系统、组件或者模块，才能够使用服务。我们可以用注册提供商和根注入器实现。该服务本身是 CLI 创建的一个类，并且加上了 @Injectable() 装饰器。默认情况下，该装饰器是用 providedIn 属性进行配置的，它会为该服务创建一个提供商。providedIn: 'root' 指定 Angular 应该在根注入器中提供该服务,从而实现根注入器将服务注入，它就在整个应用程序中可用了。也可以指定某个服务只有在特定的模块中提供，类似于一个业务模块中专属于这个模块的服务，只会应用于此模块中，我们就可以这么做：providedIn: TestModule,

8.简述Angular

template、bi-directional binding、router、service、dependency injection

9.延迟加载（lazy loading）

全部加载会产生巨大的性能开销，延迟加载可以只加载用户正在交互的模块，其余模块按需加载

10.angular内置过滤器（filter）

　　date：日期格式化

　　currency：货币 

　　uppercase：大写

　　lowercase：小写

　　limitTo（限制数组或字符串长度）

　　orderBy（排序）

　　number（格式化数字，加上千位分隔符，并接收参数限定小数点位数）

　　filter（处理一个数组，过滤出含有某个子串的元素）

　　json（格式化 json 对象）

可以用在模版中或者JS中

11.属性指令（attribute directives）、结构指令(structural directives)有什么区别？

属性指令：用作元素/组件的外观、样式、行为。

• NgClass：向HTML元素中添加或删除多个css class类
• NgStyle:添加或删除HTML样式
• NgModel：adds two-way data bindng to an HTML form element

结构化指令：用于通过删除和添加DOM元素来更改DOM布局。这些指令在更改视图结构方面要好得多。

• Nglf：conditionlly creates or disposes of subviews from the template
• NgFor: repeat a node for each item in a list
• NgSwitch: a set of directives that switch among alternative views

12.绑定语法（binding syntax）

• 数据绑定：{{ }} braces, 从data source到view target的one way绑定
• 属性绑定: [ ] square brackets, 从data source到view target的one way绑定
• 事件绑定: ( ) parentheses, 从view target到data source的one way绑定
• 双向绑定：[( )] two-way

13.路由（Route）

生成路由文件：按照惯例，有一个独立模块来配置相关路由，这个模块类的名字叫做AppRoutingModule,位于src/app下的app-routing.module.ts文件中。

使用CLI生成它：ng generate module app-routing --flat --module=app

定义：const routes: Routes = [ { path: 'homePage', component: HomePageComponent } ];

添加默认路由：{ path: '', redirectTo: '/homePage', pathMatch: 'full' },

错误URL：{ path: '**', component:DashboardComponent}