1.1准备开发环境
1.1.1安装Node.js
针对自身系统安装node.js,注意版本要在8.x或以上。可通过以下命令(命令提示符下)查看是否存在node及其版本:
node -v
显示例子:
--------------------------------------------------------------------------------------------------------
安装好的node.js包含node包管理器(NodePackage Manager,NPM),用于管理项目中的包。可通过以下命令(命令提示符下)查看NPM版本:
npm -v
显示例子:
(因为npm安装插件是从国外服务器下载,受网络影响大,可能出现异常。阿里巴巴提供了国内服务(CNPM)具体安装不详细写出,具体用法与NPM同,只是不再是类似npm -v 而是cnpm -v)
PS:本人用的是CNPM,WIN系统。因此之后的例子都基于CNPM 和WIN
--------------------------------------------------------------------------------------------------------
1.1.2安装angular-cli包
angular-cli包是Angular开发项目开发过程中创建和管理的标准办法,在搭建项目中简化了许多过程。通过以下命令(命令提示符下)安装:
cnpm install --global @angular/cli
显示例子:
(PS:请就关于安装,耐心等待完成到可输入命令为止。)
--------------------------------------------------------------------------------------------------------
1.1.3安装git
官网安装git,用git版本控制工具来管理Angular开发所需要的一些软件包。安装完成后可通过以下命令(命令提示符下)查看git:
git --version
显示例子:
或者直接在对应想操作的文件夹中git bash:
--------------------------------------------------------------------------------------------------------
1.2创建项目
1.2.1创建项目
选择一个你喜欢的位置,git bash ,并使用以下命令提示符运行以下命令,创建一个名为angular-Learning的新项目:
ng new angular-Learning
显示例子:
--------------------------------------------------------------------------------------------------------
1.2.2安装CNPM包
cd angular-Learning 进入文件夹,再安装CNPM包。(通过CNPM包管理安装package.json文件,从而下载并安装该文件所指定的各类软家包)
cnpm install
package.json(原配置共36个包)
{ "name": "angular-io-example", "version": "1.0.0", "private": true, "description": "Example project from an angular.io guide.", "scripts": { "ng": "ng", "build": "ng build --prod", "start": "ng serve", "test": "ng test", "lint": "tslint ./src/**/*.ts -t verbose", "e2e": "ng e2e" }, "keywords": [], "author": "", "license": "MIT", "dependencies": { "@angular/animations": "^6.0.0", "@angular/common": "^6.0.0", "@angular/compiler": "^6.0.0", "@angular/core": "^6.0.0", "@angular/forms": "^6.0.0", "@angular/http": "^6.0.0", "@angular/platform-browser": "^6.0.0", "@angular/platform-browser-dynamic": "^6.0.0", "@angular/router": "^6.0.0", "@angular/upgrade": "^6.0.0", "angular-in-memory-web-api": "^0.6.0", "core-js": "^2.5.4", "rxjs": "^6.0.0", "zone.js": "^0.8.24", "bootstrap":"4.0.0-alpha.4" }, "devDependencies": { "@angular-devkit/build-angular": "~0.6.0", "@angular/cli": "^6.0.0", "@angular/compiler-cli": "^6.0.0", "@angular/platform-server": "^6.0.0", "@types/jasmine": "~2.8.0", "@types/jasminewd2": "^2.0.3", "@types/node": "^6.0.45", "jasmine-core": "~2.99.1", "jasmine-spec-reporter": "~4.2.1", "karma": "~1.7.1", "karma-chrome-launcher": "~2.2.0", "karma-coverage-istanbul-reporter": "~1.4.2", "karma-jasmine": "~1.1.1", "karma-jasmine-html-reporter": "^0.2.2", "karma-phantomjs-launcher": "^1.0.2", "lodash": "^4.16.2", "phantomjs-prebuilt": "^2.1.7", "protractor": "~5.3.0", "ts-node": "^5.0.1", "tslint": "^5.9.1", "typescript": "2.7.2", "jasmine-marbles": "^0.3.1" }, "repository": {} }
显示例子:
(此处可看到已安装对应的36个包)
若还需要额外的软件包,比方说bootstrap前端框架。可在package.json中添加红色部分:
在运行多一次命令去安装包:... "zone.js": "^0.8.24", "bootstrap":"4.0.0-alpha.4" }, "devDependencies": { "@angular-devkit/build-angular": "~0.6.0", ...
cnpm install
显示例子:
(此处可看到已安装对应的37个包,较之前多了一个包)
--------------------------------------------------------------------------------------------------------
1.2.3启动服务器
到了现下阶段,项目的工具和结构已经基本完成。现在通过启动服务器测试工作是否属于正常进行。在对应项目文件下输入命令行:
ng serve --open
显示成功的例子:
(可以通过ctrl+c 退出当前操作)
--------------------------------------------------------------------------------------------------------
1.2.4引用bootstrap.css(后续不懂可跳到后面添加angular功能跟着做)
在style.css文件头中引入(PS默认安装位置为node_mudule/@import "~bootstrap/dist/css/bootstrap.min.css"):
@import "~bootstrap/dist/css/bootstrap.min.css";
试着修改index.html(主页面文件查看效果)
由于此处引用了默认组件<app-root>
<body> <app-root></app-root> </body>
则修改对应组件
在最后面添加代码
<p class="text-muted">Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.</p> <p class="text-primary">Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.</p> <p class="text-success">Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.</p> <p class="text-info">Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.</p> <p class="text-warning">Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.</p> <p class="text-danger">Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.</p>
显示例子:
可以看到后面多了几个有了bootstrap样式的几行文字。
--------------------------------------------------------------------------------------------------------
1.3向项目添加Angular功能
1.3.1了解目录
你的应用代码位于
src
文件夹中。 所有的 Angular 组件、模板、样式、图片以及你的应用所需的任何东西都在那里。 这个文件夹之外的文件都是为构建应用提供支持用的。
- 访问
src/app
目录。你会在这里看到AppComponent
的三个实现文件:
app.component.ts
— 组件的类代码,这是用 TypeScript 写的。app.component.html
— 组件的模板,这是用 HTML 写的。app.component.css
— 组件的私有 CSS 样式。
文件
用途
app/app.component.
{ts,html,css,spec.ts}
使用 HTML 模板、CSS 样式和单元测试定义
AppComponent
组件。 它是根组件,随着应用的成长它会成为一棵组件树的根节点。
app/app.module.ts
定义
AppModule
,根模块为 Angular 描述如何组装应用。 目前,它只声明了AppComponent
。 不久,它将声明更多组件。
assets/*
这个文件夹下你可以放图片等任何东西,在构建应用时,它们全都会拷贝到发布包中。
environments/*
这个文件夹中包括为各个目标环境准备的文件,它们导出了一些应用中要用到的配置变量。 这些文件会在构建应用时被替换。 比如你可能在生产环境中使用不同的 API 端点地址,或使用不同的统计 Token 参数。 甚至使用一些模拟服务。 所有这些,CLI 都替你考虑到了。
browserslist
一个配置文件,用来在不同的前端工具之间共享目标浏览器。
favicon.ico
每个网站都希望自己在书签栏中能好看一点。 请把它换成你自己的图标。
index.html
这是别人访问你的网站是看到的主页面的 HTML 文件。 大多数情况下你都不用编辑它。 在构建应用时,CLI 会自动把所有
js
和css
文件添加进去,所以你不必在这里手动添加任何<script>
或<link>
标签。
karma.conf.js
给Karma的单元测试配置,当运行
ng test
时会用到它。
main.ts
这是应用的主要入口点。 使用JIT 编译器编译本应用,并启动应用的根模块
AppModule
,使其运行在浏览器中。 你还可以使用AOT 编译器,而不用修改任何代码 —— 只要给ng build
或ng serve
传入--aot
参数就可以了。
polyfills.ts
不同的浏览器对 Web 标准的支持程度也不同。 腻子脚本(polyfill)能把这些不同点进行标准化。 你只要使用
core-js
和zone.js
通常就够了,不过你也可以查看浏览器支持指南以了解更多信息。
styles.css
这里是你的全局样式。 大多数情况下,你会希望在组件中使用局部样式,以利于维护,不过那些会影响你整个应用的样式你还是需要集中存放在这里。
test.ts
这是单元测试的主要入口点。 它有一些你不熟悉的自定义配置,不过你并不需要编辑这里的任何东西。
tsconfig.{app|spec}.json
TypeScript 编译器的配置文件。
tsconfig.app.json
是为 Angular 应用准备的,而tsconfig.spec.json
是为单元测试准备的。
tslint.json
额外的 Linting 配置。当运行
ng lint
时,它会供带有 Codelyzer 的 TSLint 使用。 Linting 可以帮你们保持代码风格的一致性。
src/
文件夹是项目的根文件夹之一。 其它文件是用来帮助你构建、测试、维护、文档化和发布应用的。它们放在根目录下,和src/
平级。
文件
用途
app/app.component.{ts,html,css,spec.ts}
使用 HTML 模板、CSS 样式和单元测试定义
AppComponent
组件。 它是根组件,随着应用的成长它会成为一棵组件树的根节点。
app/app.module.ts
定义
AppModule
,根模块为 Angular 描述如何组装应用。 目前,它只声明了AppComponent
。 不久,它将声明更多组件。
assets/*
这个文件夹下你可以放图片等任何东西,在构建应用时,它们全都会拷贝到发布包中。
environments/*
这个文件夹中包括为各个目标环境准备的文件,它们导出了一些应用中要用到的配置变量。 这些文件会在构建应用时被替换。 比如你可能在生产环境中使用不同的 API 端点地址,或使用不同的统计 Token 参数。 甚至使用一些模拟服务。 所有这些,CLI 都替你考虑到了。
browserslist
一个配置文件,用来在不同的前端工具之间共享目标浏览器。
favicon.ico
每个网站都希望自己在书签栏中能好看一点。 请把它换成你自己的图标。
index.html
这是别人访问你的网站是看到的主页面的 HTML 文件。 大多数情况下你都不用编辑它。 在构建应用时,CLI 会自动把所有
js
和css
文件添加进去,所以你不必在这里手动添加任何<script>
或<link>
标签。
karma.conf.js
给Karma的单元测试配置,当运行
ng test
时会用到它。
main.ts
这是应用的主要入口点。 使用JIT 编译器编译本应用,并启动应用的根模块
AppModule
,使其运行在浏览器中。 你还可以使用AOT 编译器,而不用修改任何代码 —— 只要给ng build
或ng serve
传入--aot
参数就可以了。
polyfills.ts
不同的浏览器对 Web 标准的支持程度也不同。 腻子脚本(polyfill)能把这些不同点进行标准化。 你只要使用
core-js
和zone.js
通常就够了,不过你也可以查看浏览器支持指南以了解更多信息。
styles.css
这里是你的全局样式。 大多数情况下,你会希望在组件中使用局部样式,以利于维护,不过那些会影响你整个应用的样式你还是需要集中存放在这里。
test.ts
这是单元测试的主要入口点。 它有一些你不熟悉的自定义配置,不过你并不需要编辑这里的任何东西。
tsconfig.{app|spec}.json
TypeScript 编译器的配置文件。
tsconfig.app.json
是为 Angular 应用准备的,而tsconfig.spec.json
是为单元测试准备的。
tslint.json
额外的 Linting 配置。当运行
ng lint
时,它会供带有 Codelyzer 的 TSLint 使用。 Linting 可以帮你们保持代码风格的一致性。
--------------------------------------------------------------------------------------------------------
1.3.2创建模板(xx.component.html)
尝试修改root-app(即已经初始化有的app.component组件)
--------------------------------------------------------------------------------------------------------
1.3.3创建组件(xx.component.ts;提供模板所需要的逻辑和数据)
尝试修改title的值为Test
以app.compenent.ts为例:
import { Component } from '@angular/core'; @Component({//告诉ng这是组件 selector: 'app-root',//该属性指定一个css选择器,用于匹配该组件所要应用是哇HTML元素;像此处就是index.html中的<app-root></app-root> templateUrl: './app.component.html',//模板页面文件链接 styleUrls: ['./app.component.css']//样式表链接 }) export class AppComponent {//出口类,用于数据绑定 title = 'Test!'; }
双花括号语法是 Angular 的插值绑定语法。
显示例子:
--------------------------------------------------------------------------------------------------------