四平市住房和城乡建设局网站,百度申诉网站,短网址还原在线生成,推广展示类网站有哪些首先#xff0c;Angular2 与 Angular1.x 版本没有多大关系#xff0c;甚至可以说是两个完全不一样的框架#xff0c;故 Angular 指的是 Angular2 及以上的版本。而 Angular 与 TypeScript 的完美结合#xff0c;对于一个 .NET 开发者来说#xff0c;实在是找不到不用它的理… 首先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/clilatest 查看 cli 命令 ng help 生成项目模版 ng new zero-admin-web --stylescss
cd zero-admin-web
ng server --运行 生成模版时常用的一些参数 --stylescss 指定使用scss默认使用css--routingfalse 是否生成一个路由模块--inline-stylefalse 是否使用内联样式--inline-templatefalse 是否使用内联模版启动开发服务器 进入项目目录并启动开发服务器 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/ 目录来生成组件可以在生成的时候指定多级目录。 当然也支持生成指令管道服务类接口模块等如下所示 脚手架用法Componentng g component my-new-componentDirectiveng g directive my-new-directivePipeng g pipe my-new-pipeServiceng g service my-new-serviceClassng g class my-new-classGuardng g guard my-new-guardInterfaceng g interface my-new-interfaceEnumng g enum my-new-enumModuleng 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 hrefassets/css/material-icons.css relstylesheet 字体文件下载地址为material-design-icons。 不过更加推荐的是直接使用 Google 提供的 CDN 服务现在国内访问速度非常快只需要在 index.html 中添加如下引用即可 link hrefhttps://fonts.googleapis.com/icon?familyMaterialIcons relstylesheet 总结 本文简单描述了如何使用 angular-cli 初始化项目和 material2 UI框架的配置比起 webpack 那一大堆配置angular-cli 则要简洁的多而 angular-cli 生成的那么多文件对于新手来说可能有些还是不太理解这个在后续会慢慢介绍不要着急前期不应过于执着细节而是要先愉快的跑起来。而下一章则会介绍一下Angular项目的持续集成。 转载于:https://www.cnblogs.com/RainingNight/p/getting-started-in-angular.html
