朋友公司最近有人离职，趁机会让我学些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中引入组件
父页面使用中
组件名称
子组件名称
两个名称需要一致
网友评论