ng6 学习记录

朋友公司最近有人离职，趁机会让我学些ng6和icnic4 能去他公司

全局脚手架安装

npm install -g @angular/cli

期间如果有这个情况的话

 Would you like to share anonymous usage data with the Angular Team at Google under
Google’s Privacy Policy at https://policies.google.com/privacy? For more details and
how to change this setting, see http://angular.io/analytics. (y/N)

输入y就好了 百度翻译来看

image.png

创建ng项目

ng new my-app//此处的my-app就是项目名称，可以随意更改，注意不要有大写

1、路由

 Would you like to add Angular routing?//百度翻译的不准确，但是能看到routing能猜到是要安装路由吗当然选y

2、接下来就是选择css语言 我选的是scss
3、进入项目
4、启动

image.png

ng启动页面 一看就是Google特色

ionic4安装

输入命令

npm install -g ionic cordova//安装 ionic

创建ionic应用

ionic start 名字 tabs --type=angular//不能有大写 中文

完成之后 进入 启动

ionic serve

官方教程做出一个调用手机摄像头的app
这里先要在src的index。html的header插入链接

<script src="cordova.js"></script>

ng6知识点汇集

import { Component } from '@angular/core';

这样导入类似导入vue的component
使用的话和vue比较像

@Component({
  templateUrl: 'app.html'
})

有木有 很像

@Component

这就是模板导入语法，懂的意思就好，以后学习中会继续用到，再进行补充

Platform ionic组件 意思是设备就绪后触发一个回调函数

看翻译看的不是很懂看代码能晓得一点点

代码部分

ActionSheetController 在项目中引入ionIC组件

看翻译
操作表是一个对话框，允许用户从一组选项中进行选择。它出现在应用程序内容的顶部，并且必须由用户手动将其关闭，然后他们才能继续与应用程序进行交互。危险（破坏性）选项在ios模式下显而易见。有许多简单的方法可以取消操作单，例如，轻按背景或敲击桌面上的退出键。
再结合图片

image.png
再结合代码
acioonsheetCtrl
能猜到这就是经常使用的模态框

ng 的@Component用法

了解到的有

@Component({
    templateUrl:'app.html',//引入html组件
    template:`<p>你好世界</P>`，//写入组件
)}
...待补充

Ts知识点

1、constructor
这个是用来初始化class创建的变量
看代码就能看的懂了

export class MyApp {//导出类
  // rootPage:any = HomePage;

  constructor(public platform: Platform,
                     public actionsheetCtrl:ActionSheetController) { }
)

ng6新建组件使用

ng generate component heroes

创建一个页面

app中引入组件

父页面使用中

组件名称 子组件名称

两个名称需要一致