Angular 小试牛刀[1]:Getting Started
首先,Angular2 与 Angular1.x 版本没有多大关系,甚至可以说是两个完全不一样的框架,故 Angular 指的是 Angular2 及以上的版本。而 Angular 与 TypeScript 的完美结合,对于一个 .NET 开发者来说,实在是找不到不用它的理由了,更多的优势来不及说了,快上车吧。
使用 angular-cli 初始化项目
Angular CLI 是一个用于构建 Angular 项目的命令行界面工具,它可以创建项目、添加文件以及执行一大堆开发任务,比如测试、打包和发布。
设置开发环境
在开始工作之前,我们必须设置好开发环境。
如果你的机器上还没有 Node.js®和npm,请先安装它们。
请先在终端/控制台窗口中运行命令
node -v
和npm -v
, 来验证一下你正在运行 node 6.9.x 和 npm 3.x.x 以上的版本。 更老的版本可能会出现错误,最新的版本则没问题。
安装 angular-cli
npm install -g @angular/cli@latest
查看 cli 命令
ng help
生成项目模版
ng new zero-admin-web --style=scss
cd zero-admin-web
ng server --运行
生成模版时常用的一些参数:
- --style=scss 指定使用scss,默认使用css
- --routing=false 是否生成一个路由模块
- --inline-style=false 是否使用内联样式
- --inline-template=false 是否使用内联模版
启动开发服务器
进入项目目录,并启动开发服务器
cd zero-admin-web
ng serve --open
默认端口是4200,在浏览器中打开 http://localhost:4200
,便能看到页面成功加载,并显示 “Welcome to app!”。
并且 ng serve
命令会启动文件的监控,当你修改这些文件时将自动重新编译,并刷新浏览器。而 --open
参数则表示是否自动打开浏览器。
生成发布包
ng build --prod
build 用来生成压缩,优化后的JS,用来部署到生产环境,默认放成在 dist
文件夹下, --prod
用来指定发布环境。
angular-cli常用指令
可以使用ng generate
或者简写形式 ng g
命令来生成Angular组件:
ng generate component my-component1 #生成一个名称为my-component1的组件
使用 ng generate
命令时,会相对于 src/app/
目录来生成组件,可以在生成的时候指定多级目录。
当然,也支持生成指令,管道,服务,类,接口,模块等,如下所示:
脚手架 | 用法 |
---|---|
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
|
Guard |
ng g guard my-new-guard
|
Interface |
ng g interface my-new-interface
|
Enum |
ng g enum my-new-enum
|
Module |
ng g module my-module
|
项目结构
先看看项目模版里的文件结构,以及他们都是做什么的:
┌── e2e
│ ├── app.e2e-spec.ts
│ ├── app.po.ts
│ └── tsconfig.e2e.json
├── src
│ ├── app
│ │ ├── app.component.css
│ │ ├── app.component.html
│ │ ├── app.component.spec.ts
│ │ ├── app.component.ts
│ │ └── app.module.ts
│ ├── assets
│ │ └── .gitkeep
│ ├── environments
│ │ ├── environment.prod.ts
│ │ └── environment.ts
│ ├── favicon.ico
│ ├── index.html
│ ├── main.ts
│ ├── polyfills.ts
│ ├── styles.css
│ ├── test.ts
│ ├── tsconfig.app.json
│ ├── tsconfig.spec.json
│ └── typings.d.ts
├── .angular-cli.json
├── .editorconfig
├── .gitignore
├── karma.conf.js
├── package.json
├── protractor.conf.js
├── README.md
├── tsconfig.json
└── tslint.json
e2e/
在 e2e/
目录中的是端到端(End-to-End)测试代码。 它们不在 src/
下,是因为端到端测试实际上和应用是相互独立的,它只适用于测试我们的应用,这也是为什么它会拥有自己的 tsconfig.e2e.json
文件的原因。
src/
我们的应用代码位于 src
文件夹中。 所有的 Angular组件、模板、样式、图片以及应用所需的任何东西都在这个目录下, 这个目录之外的文件都是为构建应用提供支持用的。
package.json
这是项目的基本定义文件,所有的基于nodejs的项目都会有一个package.json文件,里面会定义项目名称、版本、依赖的库,以及脚本。
.angular-cli.json
Angular CLI 的配置文件。 在这个文件中,可以设置一系列默认值,还可以配置项目编译时要包含哪些文件等。
karma.conf.js
给 Karma 的单元测试配置,当运行 ng test
时会用到它。
protractor.conf.js
给*Protractor** 使用的端到端测试配置文件,当运行 ng e2e
的时候会用到它。
tsconfig.json
TypeScript 编译器的配置,IDE会借助它来为我们提供更好的代码提示,语法检查等。
tslint.json
给 TSLint 和 Codelyzer 用的配置信息,当运行 ng lint
时会用到。 Lint功能可以帮我们保持代码风格的统一。
Angular Material
Material Design,中文名:材料设计语言,是由Google推出的全新的设计语言,谷歌表示,这种设计语言旨在为手机、平板电脑、台式机和“其他平台”提供更一致、更广泛的“外观和感觉”。
据谷歌介绍,Material Design基于“真实的触感,灵感源自对纸和墨水的研究,” 能够让用户 “理解那些用于替代真实世界的可视线索”,“而又不违背力学原理”。另外,光线、表面和移动的基本原理是表现对象如何移动、交互和相互关联地存在于空间中的关键。逼真的光影效果可以显示区块间的接缝、划分空间、以及标识移动的部件。更多详细的介绍可以看 Material 的官网 https://material.io。
而 Angular Material 则是由 Angular 团队完全基于 Material 规范,完美实现的一套 Angular2+ UI框架。
安装配置步骤
第一步:安装
使用 npm
安装 Angular Materil 和 Angular CDK
npm install --save @angular/material @angular/cdk
注: CDK是(Component Dev Kit)的缩写,Angular 的组件开发包,用于分离组件开发与 Material 的耦合(目前大多还耦合在一起),以方便使用其它风格的设计来开发组件。
第二步:动画
有一些 Angular Material 组件依赖于 Angular 动画模块,以便能进行一些高级的 transitions。如果你希望使用这些动画,则需要安装 @angular/animations
模块。
npm install --save @angular/animations
导入动画模块
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';@NgModule({...imports: [BrowserAnimationsModule],...
})
export class AppModule { }
第三步:导入
导入你想要使用的 Angular Material 模块
import {MdButtonModule, MdCheckboxModule} from '@angular/material';@NgModule({...imports: [MdButtonModule, MdCheckboxModule],...
})
export class AppModule { }
第四步:主题
定制一个主题,所有的组件都将遵循于这个主题。Angular Material 内置了几种主题,我们可以在 style.css
文件中导入:
@import "~@angular/material/prebuilt-themes/indigo-pink.css";
更多主题的介绍以及如何自定义主题,则可以参考 theming guide。
第五步:手势
有些组件,如(md-slide-toggel
, md-slider
, mdTooltip
)等依赖于 HammerJS 而支持手续操作。所以,如果你需要在你的项目中实现手势操作,则需要装 HammerJS 加载进来。
使用 npm
安装:
npm install --save hammerjs
导入到根模块中:
import 'hammerjs';
第六步:图标
如果你想通过 md-icon
组件来使用经典的 Material Design Icons 图标字体,则需要把 material-icons 的字体样式加载进来。
添加 material-icons.css
@font-face {font-family: 'Material Icons';font-style: normal;font-weight: 400;src: local('Material Icons'),local('MaterialIcons-Regular'),url(../fonts/MaterialIcons-Regular.woff2) format('woff2'), /* Super Modern Browsers */url(../fonts/MaterialIcons-Regular.woff) format('woff'), /* Super Modern Browsers */url(../fonts/MaterialIcons-Regular.ttf) format('truetype'), /* Safari, Android, iOS */url(../fonts/MaterialIcons-Regular.svg) format('svg'); /* Legacy iOS */
}.material-icons {font-family: 'Material Icons';font-weight: normal;font-style: normal;font-size: 24px; /* Preferred icon size */display: inline-block;line-height: 1;text-transform: none;letter-spacing: normal;word-wrap: normal;white-space: nowrap;direction: ltr;/* Support for all WebKit browsers. */-webkit-font-smoothing: antialiased;/* Support for Safari and Chrome. */text-rendering: optimizeLegibility;/* Support for Firefox. */-moz-osx-font-smoothing: grayscale;/* Support for IE. */font-feature-settings: 'liga';
}/* Rules for sizing the icon. */
.material-icons.md-18 { font-size: 18px; }
.material-icons.md-24 { font-size: 24px; }
.material-icons.md-36 { font-size: 36px; }
.material-icons.md-48 { font-size: 48px; }/* Rules for using icons as black on a light background. */
.material-icons.md-dark { color: rgba(0, 0, 0, 0.54); }
.material-icons.md-dark.md-inactive { color: rgba(0, 0, 0, 0.26); }/* Rules for using icons as white on a dark background. */
.material-icons.md-light { color: rgba(255, 255, 255, 1); }
.material-icons.md-light.md-inactive { color: rgba(255, 255, 255, 0.3); }
然后在 index.html
中引用 material-icons.css
<!-- Icons -->
<link href="assets/css/material-icons.css" rel="stylesheet">
字体文件下载地址为:material-design-icons。
不过更加推荐的是直接使用 Google 提供的 CDN 服务(现在国内访问速度非常快),只需要在 index.html 中添加如下引用即可:
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
总结
本文简单描述了如何使用 angular-cli 初始化项目和 material2 UI框架的配置,比起 webpack 那一大堆配置,angular-cli 则要简洁的多,而 angular-cli 生成的那么多文件,对于新手来说,可能有些还是不太理解,这个在后续会慢慢介绍,不要着急,前期不应过于执着细节,而是要先愉快的跑起来。而下一章则会介绍一下Angular项目的持续集成。
转载于:https://www.cnblogs.com/RainingNight/p/getting-started-in-angular.html
Angular 小试牛刀[1]:Getting Started相关推荐
- Angular 小试牛刀[2]:CI(travie+firebase)
持续集成(Continuous Integration)是一种软件开发实践,即团队开发成员经常集成它们的工作,通过每个成员每天至少集成一次,也就意味着每天可能会发生多次集成.每次集成都通过自动化的构建 ...
- Angular No name was provided for external module 'XXX' in output.globals 错误
Angular 7 开发自定义库时,引用ngZorroAntd,build过程中出现 No name was provided for external module 'ng-zorro-antd' ...
- angular.isUndefined()
<!DOCTYPE html> <html><head><meta charset="UTF-8"><title>ang ...
- 五:Angular 数据绑定 (Data Binding)
通常来说,数据绑定要么是从页面流向组件中的数据,要么是从组件中的数据流向页面.下面我们来介绍在Angular 2中数据绑定的几种不同方式. 1. 使用{{}}将组件中的数据显示在html页面上 实 ...
- angular初步认识一
最近比较流行MVC前端框架开发,最近研究了一个框架AngularJS框架 不说那么多,先上例子,我是个代码控 <!DOCTYPE html> <html lang="en& ...
- 【讲人话】Angular如何通过@ViewChildren获取实时渲染的动态DOM节点元素(@ViewChild只能获取静态的固定DOM节点)
故事背景:有一天,强哥整了个动态渲染的列表代码如下 app.component.html <div><button (click)="add()">添加一行 ...
- Angular的ChangeDetectorRef.detectChanges()实现angularJS的$apply()方法,强制刷新数据渲染
在Javascript代码里,都是按照一定顺序来执行的,当轮到一个代码片段执行的时候,浏览器就只会去执行当前的片段,不会做任何其他的事情.所以有时候一些做得不是很好的网页,当点击了某个东西之后会卡住, ...
- Angular多个页面引入同一个组件报错The Component ‘MyComponentComponent‘ is declared by more than one NgModule怎么办?
有一天,我写了一个自信满满的自定义组件myComponent,在多个页面import使用了,结果控制台给我来这个 我特么裤子都脱了,你给我来这个提示是几个意思 仔细一看 The Component ' ...
- 【硬核解说】一口气讲明白Angular的5种路由守卫RouteGuard是嘛玩意儿
Angular的常用路由守卫有5种,按照执行顺序: ① CanLoad:进入到当前路由的时候触发(若用户没有权限访问,相应的模块并不会被加载.这里是指对应组件的代码). ↓ ② CanAcitivat ...
最新文章
- 系列文章丨阿法狗 ZERO为什么这么强之DeepMind讲解
- 剖析Linux系统启动过程(二)
- Web.sitemap网站导航
- LintCode-落单的数 III
- 静态时序分析——基础概念
- 如何在Java中对文件进行模式匹配和显示相邻行
- (转)USB体系结构
- canvas 在其他画好的上面继续画_详解canvas绘制多张图的排列顺序问题
- java数据流无法输出验证码
- 电脑主板跳线_电脑主板跳线连接图
- springcloud实战一:搭建springboot
- Android图片处理之Glide使用大全
- 亚马逊云科技 Build On -轻松搭建咖啡点单系统
- 使用 GitHub Actions 来构建应用程序
- 计算机蓝屏无法启动代码50,win7系统出现蓝屏代码0x0000050怎么解决
- 千古奇才---埃舍尔
- 【转】偷偷告诉你快速提高app下载量和安装量
- Flutter Candies 一桶天下,一个小例子彻底搞懂Android的MVP模式到底是什么
- 离散数学-数理逻辑-命题逻辑的基本概念(1)
- 2023最火批量getshell工具
热门文章
- 中学计算机教育特点,中学信息技术考点:信息的概念和基本特征
- 我的世界java服务器刷_一个教程, 叫你如何在服务器刷op
- linux mp3长度,得到一个wma或mp3文件,如何用最简单的方法得到它的长度信息呢?...
- html嵌入原始数据,如何用html和javascript显示原始图像数据?
- snowflake做主键 自增_自增ID算法snowflake - C#版
- 御用导航提示提醒_四维图新推出商用车专用导航“货车通”
- 递归算法1加到100_五种循环方法计算1加到100
- Java三种随机数生成方法
- 滑动加载怎么做 php,vue之UI框架如何实现滑动加载数据
- 数据线给电脑联网是什么原理_物联网孵化的产物——条码扫描器