博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
AngularJS5.0 (第一篇)
阅读量:4992 次
发布时间:2019-06-12

本文共 3810 字,大约阅读时间需要 12 分钟。

angular 1中提供了作用域,可以存储数据,实现数据绑定,但是出现了性能瓶颈;提供了指令,对DOM拓展,方便开发,占用了更多的资源,没有组件开发,通常是无法复用的。

  基于ES3.1版本开发的框架,无法使用class,extends,import等关键字,无法使用面向对象方式开发,不利于大型项目维护。

angular 5重新设计了angular,解决了性能问题,采用了组件开发,使得代码得以复用。

  基于ES6 ( 源码基于Typescript语言开发 ) 语法开发的框架,因此支持,class,extends,import等关键字,支持面向对象的开发,着眼于大型项目的开发。

Github地址:https://github.com/angular/angular

  一般用ng5表示angularjs5.0版本,angular团队,为了简化ng5开发,提供了cli工具,所以需要先安装cli

1,安装nodejs:

  https://nodejs.org/en/

2,全局范围安装cli:

  npm install -g @angular/cli

3,创建一个新项目

  ng new my-app

4,转到项目目录,并启动服务器

  cd my-app

  ng serve --open

ng serve命令启动服务器,监视您的文件,并在您对这些文件进行更改时重建应用程序。

使用--open(或只是-o)选项会自动打开您的浏览器http://localhost:4200/

您的应用使用以下消息迎接您:

 

Angular CLI 基本指令

 

名称 作用
ng init 在当前目录下创建应用
ng new 创建新的目录并在新目录下运行ng init命令
ng serve 启动
ng doc 在浏览器中打开Angular文档并搜索当前关键字
ng e2e 使用 protractor 在当前应用中运行e2e测试
ng format 使用 clang-format 格式化当前项目代码
ng generate 在项目中构建新代码
ng g ng generate的简写
ng build 构建项目
ng github-pages:deploy [options] 将项目部署到GitHub Pages
ng version 输出cli版本, node 版本和操作系统信息
ng set 设置环境

ng new

参数名 类型 默认值 作用
–dry-run boolean FALSE 只输出要创建的文件和执行的操作,实际上并没有创建项目
–verbose boolean FALSE 输出详细信息
–link-cli boolean FALSE 自动连接到angular-cli包
–skip-install boolean FALSE 在项目第一次创建时不执行npm install
–skip-bower boolean TRUE 不安装bower
–skip-git boolean FALSE 不执行Git repository初始化工作
–directory string 目录名 默认与项目名称一样
–source-dir string ‘src’ 源文件目录名
–style string ‘css’ 使用 (‘css’, ‘less’ 还是 ‘scss’)编写css
–prefix string ‘app’ 生成新组件的前缀
–mobile boolean FALSE 生成 Progressive Web App (PWA)项目
–routing boolean FALSE 添加带路由的模块(module)并import到main app module中
–inline-style boolean FALSE 生成新应用的时候使用inline styles(内联,不生成单独的css文件)方式
–inline-template boolean FALSE 生成新应用的时候使用 inline templates(内联,不生成单独的html文件)方式
0 使用Angular4的依赖创建空项目,现在默认已经是4的版本了

ng serve

参数名 类型 默认值 作用
–host string 12.0.0.1 自定义配置 IP
–disable-host-check 跟在–host后面,允许使用localhost以外的host打开项目
–port number 4200 自定义端口号
–live-reload-port number 4200 时时重载端口号
–hmr 热替换

ng generate支持的类型

名称 示例
Component ng g component my-new-component
Directive ng g directive my-new-directive
Pipe ng g pipe my-new-pipe
Service ng g service my-new-service
Class ng g class my-new-class
Interface ng g interface my-new-interface
Enum ng g enum my-new-enum
Module ng g module my-module
Route ng g route my-route 当前已禁用
 

命令参数

ng generate class

参数名 类型 默认值 作用
–spec boolean FALSE 生成对应的单元测试文件

ng generate component

参数名 类型 默认值 作用
–flat boolean FALSE 在src/app中生成component文件,而不是在当前目录下
–inline-template boolean FALSE 使用inline template,而不是独立的HTML文件
–inline-style boolean FALSE 使用inline styles,而不是独立的CSS文件
–prefix boolean TRUE 使用在angular-cli.json指定的前缀来生成component selector(前缀表示selector的第一个单词)
–spec boolean TRUE 生成对应的单元测试文件

ng generate directive

参数名 类型 默认值 作用
–flat boolean FALSE 在src/app中生成component文件,而不是在当前目录下
–prefix boolean TRUE 默认true, 使用在angular-cli.json指定的前缀来生成component selector(前缀表示selector的第一个单词)
–spec boolean TRUE 生成对应的单元测试文件

ng generate module

参数名 类型 默认值 作用
–routing boolean FALSE 新增一个与module对应的路由模块,并import到module中
–spec boolean FALSE 用于检测模块是否存在

ng generate service

参数名 类型 默认值 作用
–flat boolean TRUE 在src/app中生成component文件,而不是在当前目录下
–spec boolean TRUE 生成单元测试文件

ng build

参数名 类型 默认值 作用
–aot string 预编译
–base-href string ‘/’ 设置index.html文件中的base href参数
–environment string dev 在哪个环境中使用,prod代表生成环境
–output-path string dist 文件输出目标路径
–target string development development:默认值,不压缩混淆,production:压缩混淆代码
–watch boolean FALSE 在哪个环境中使用

ng github-pages:deploy

参数名 类型 默认值 作用
–message string 构建的时候提交的message,必须写在引号中
–target string development 使用的环境
–user-page boolean FALSE 是否以user/org页面部署到GitHub上
–skip-build boolean FALSE 跳过构建直接部署
–gh-token string 使用Github的token
–gh-username string 使用Github用户名
–base-href string ‘/’ 在index.html文件中使用的base href值

ng set

参数名 类型 默认值 作用
–global 是否设置全局
packageManager string 可设置为npm\cnpm\yarn

转载于:https://www.cnblogs.com/sdorm/p/8794185.html

你可能感兴趣的文章
MySQL执行计划explain的key_len解析
查看>>
Windows Phone开发(9):关于页面状态 转:http://blog.csdn.net/tcjiaan/article/details/7292160...
查看>>
android 通过数组,流播放声音的方法
查看>>
Spring入门篇
查看>>
JAVA遇见HTML——JSP篇(JSP状态管理)
查看>>
启动eclipse出现错误Java was started but returned exit =一个数字
查看>>
myBatis模糊查找
查看>>
数据结构与算法之五 链接列表
查看>>
java 对象数组
查看>>
设计模式读书笔记-单件模式(创建型模式)
查看>>
Oracle——热备份
查看>>
Vue路由history模式踩坑记录:nginx配置解决404问题
查看>>
c# 多张图片合成一张图片
查看>>
使用SQL Server 2008的事务日志传送功能备份数据库(logshiping)
查看>>
AngularJS多个ng-app只解析第一个的问题
查看>>
强制修改常量的值
查看>>
Grunt 初体验
查看>>
hive跑mapreduce报java.lang.RuntimeException: Error in configuring object
查看>>
ArcGIS中的坐标系统定义与投影转换方法
查看>>
机械臂的碰撞检测资料
查看>>