Angular7入门总结篇

6<time datetime="2019-01-08T11:34:05000Z" style="box-sizing: border-box; margin-right: 8px;">20190108 19:34:05</time>字数 4854阅读 46093

<article class="_2rhmJa" style="box-sizing: border-box; display: block; font-weight: 400; line-height: 18; margin-bottom: 20px; color: rgb(64, 64, 64); font-family: -apple-system, BlinkMacSystemFont, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 16px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;">

学习 Angular 必备基础

1 安装 nodejs

2 安装 cnpm

3 使用 npm/cnpm 命令安装 angular/cli

4 安装插件

5 安装chrome扩展

</article>

app目录（重点）

组件相关的概念

装饰器 ，模板和控制器是组件的必备要素。还有一些可选的元素，比如：

下面我们来看看模块文件

1 创建新组件 ng generate component component-name

该命令会把生成的组件，添加到 src/app/appmodulets 文件中 @NgModule 的 declarations 列表中声明

2 使用 Angular CLI 创建一个名叫 hero 的服务

3 添加 AppRoutingModule

生成的文件是这样的：

修改后

1 创建组件

2 使用组件

1 数据文本绑定

2 绑定 HTML

1 ngFor 普通循环

2 循环的时候设置 key

3 template 循环数据

1 [ngClass]:

2 [ngStyle]:

其他管道

常用的管道（ pipe ）有

1 大小写转换

2 日期格式转换

3 小数位数

4 JavaScript 对象序列化

5 slice

6 管道链

7 自定义管道

自定义管道的步骤：

71 WelcomePipe 定义

72 WelcomePipe 使用

73 RepeatPipe 定义

74 RepeatPipe 使用

基础版

基础版

1 创建服务命令

2 appmodulets 里面引入创建的服务

3 使用的页面引入服务，注册服务

searchList

TODOLIST

1 Angular 中的 dom *** 作(原生 js)

2 Angular 中的 dom *** 作(ViewChild)

3 父子组件中通过 ViewChild 调用子组件 的方法

1 父组件调用子组件的时候传入数据

2 子组件引入 Input 模块

3 子组件中 @Input 接收父组件传过来的数据

4 子组件中使用父组件的数据

5 把整个父组件传给子组件

1 子组件引入 Output 和 EventEmitter

2 子组件中实例化 EventEmitter

3 子组件通过 EventEmitter 对象 outer 实例广播数据

4 父组件调用子组件的时候，定义接收事件 , outer 就是子组件的 EventEmitter 对象 outer

5 父组件接收到数据会调用自己的 runParent 方法，这个时候就能拿到子组件的数据

1 调用子组件给子组件定义一个名称

2 引入 ViewChild

3 ViewChild 和刚才的子组件关联起来

4 调用子组件

1 生命周期钩子分类

指令与组件共有的钩子

组件特有的钩子

2 生命周期钩子的作用及调用顺序

1、 ngOnChanges - 当数据绑定输入属性的值发生变化时调用

2、 ngOnInit - 在第一次 ngOnChanges 后调用

3、 ngDoCheck - 自定义的方法，用于检测和处理值的改变

4、 ngAfterContentInit - 在组件内容初始化之后调用

5、 ngAfterContentChecked - 组件每次检查内容时调用

6、 ngAfterViewInit - 组件相应的视图初始化之后调用

7、 ngAfterViewChecked - 组件每次检查视图时调用

8、 ngOnDestroy - 指令销毁前调用

3 首次加载生命周期顺序

1 $render用处就是：

  在$viewValue改变的时候可以重新绑定model数据，主要使用在自定义指令的时候，但是我们要注意一点在$viewValue改变的时候可以重新绑定model数据，

  但是我们要注意一点($viewValue和DOM节点的value是不同的)，我觉得他们的区别有点类似setTimeout和$timeout的区别，但是又不太一样。

  ps:其实modelValue和绑定的数据也可以不同

2ngModelController则是ng-model指令中所定义的controller，

  在ngModelController中有两个很重要的属性，一个叫做$viewValue，一个叫做$modeValue。

  $viewValue：指令渲染模板所用的值，$viewValue属性保存着更新视图所需的实际字符串

  $modeValue:指控制器中流通的值，modelValue由数据模型持有。$modelValue和$viewValue可能是不同的，取决于$parser流水线是否对其进行了 *** 作。

  于此相关的另外两个指令：$parses和$formatters

  $parses的作用是：将$viewValue->$modelValue

  $formatters的作用是：将$modelValue->$viewValue

3$apply的作用: $apply()函数可以从Angular框架的外部让表达式在Angular上下文内部执行,Scope提供$apply方法传播Model的变化。

              在apply()方法里面，它会去调用scopedigest()方法，apply()方法带一个函数或者一个表达式，然后执行它，

  最后调用scopedigest()方法去更新bindings或者watchers。

  $apply()方法可以在angular框架之外执行angular JS的表达式。

  在$apply方法中提到过脏检查，首先apply方法会触发evel方法，当evel方法解析成功后，会去触发digest方法，digest方法会触发watch方法

  scopedigest(): 用于检查绑定的数据到底有没有发生变化。

4watch方法用法：

语法：

$watch(watchFn,watchAction,deepWatch)

三个参数：

watchFn:angular表达式或函数的字符串

watchAction(newValue,oldValue,scope):watchFn发生变化会被调用，是一个函数

deepWatch：可选的布尔值命令检查被监控的对象的每个属性是否发生变化

$watch会返回一个函数，想要注销这个watch可以使用函数，true/false

5angularJS——自定义服务provider之$get

  可以认为provider有三个部分：

  第一部分是私有变量和私有函数，这些变量和函数会在以后被修改。

  第二部分是在appconfig函数里可以访问的变量和函数，所以，他们可以在其他地方使用之前被修改。注意，这些变量和函数一定要添加到this上面才行。

  第三部分是在控制器里可以访问的变量和函数，通过$get函数返回。

  当使用 provider创建服务的时候，唯一可以让控制器访问的属性和方法是在$get()函数里返回的属性和方法。

  使用Provider的优点就是，你可以在Provider对象传递到应用程序的其他部分之前在appconfig函数中对其进行修改。

  当你使用Provider创建一个service时，唯一的可以在你的控制器中访问的属性和方法是通过$get()函数返回内容。

  大型数据进行访问的时候许多大型互联网站都是为全球用户提供服务的，

  用户分布范围广，各地网络情况千差万别。在国内，还有各个运营商网络互通难的问题。

  使用在具体的环境中，

6angularjs中的run（）方法使用

  run方法用于初始化全局的数据，仅对全局作用域起作用。

例子：

<script type="text/javascript">

  var m1 = angularmodule('myApp',[]);

  m1run(['$rootScope',function($rootScope){

  $rootScopename = 'hello';

  }]);

  consolelog( m1 );

</script>

7config方法

在模块加载阶段，对模块进行自定义配置

config可以注入$stateProvider, $urlRouterProvider, $controllerProvider, $provide, $>

对于隐藏一般是使用ng-class或者ng-show/ng-hide去实现的

通过ng-class或者ng-show/ng-hide所绑定的值的改变直接隐藏或者显示

angularjs 是mvc架构的框架，不推荐直接 *** 作DOM，而是通过Model - Controller - View的形式绑定，通过改变值，借助控制器改变显示。

jqLite in angularjs

angularelement("#element-id")

这是一个DOM *** 作。Angular不会帮助你获得DOM的某个属性。

你需要使用的是DOM选择器，不管是原生的也好或者像jQuery这样的库也好。

获取ID的目标地是为了 *** 作DOM, Angular的设计思想不是这样的, 你应该用directive代替

directive的link函数已经把作用域,元素,属性数组注入到link函数调用的参数当中了

link(scope,element,attrs)

关于directive的详细解释,请参考: 创建自定义"指令"

以上就是关于Angular7入门总结篇全部的内容，包括:Angular7入门总结篇、angularjs 难点总结、angularjs 如何 *** 作某个DOM，实现兄弟元素隐藏和切等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！