Angular 5.0 学习2:Angular 5.0 开发环境的搭建和新建第一个ng5
1.安装Node.js在开始工作之前,我们必须设置好开发环境。 请先在终端/控制台窗口中运行命令 node -v 和 npm -v, 来验证一下你正在运行 node 6.9.x 和 npm 3.x.x 以上的版本。 更老的版本可能会出现错误,更新的版本则没问题。 2.安装cnpm(非必需操作)npm的全称是一个NodeJS包管理和分发工具,已经成为非官方的发布Node模块(包)的标准。 npm install cnpm -g --registry=https://registry.npm.taobao.org 安装完毕时候输入cnpm -v,出现版本号即表示安装成功。 3.安装 Angular CLI在cmd输入下面的命令全局安装 Angular CLI 。 npm install -g @angular/cli 之后输入ng -v,出现版本号即安装成功,Angular CLI的版本号在1.5以上,则新建出来的项目是Angular 5.0版本。 4.安装IDE集成开发环境(IDE,Integrated Development Environment )是用于提供程序开发环境的应用程序,一般包括代码编辑器、编译器、调试器和图形用户界面等工具。集成了代码编写功能、分析功能、编译功能、调试功能等一体化的开发软件服务套。所有具备这一特性的软件或者软件套(组)都可以叫集成开发环境。 5.创建新项目打开终端窗口。 运行下列命令来生成一个新项目以及应用的骨架代码: ng new my-app my-app是项目的名称,可以随意定义。 请耐心等待。 创建新项目需要花费很多时间,大多数时候都是在安装那些npm包,大概是200多M左右。 进入项目目录,并启动服务器。 cd my-app ng serve --open ng serve命令会启动开发服务器,监听文件变化,并在修改这些文件时重新构建此应用。 本应用会用一条消息来跟你打招呼: 6.编辑我们的第一个Angular组件这个CLI为我们创建了第一个Angular组件。 它就是名叫app-root的根组件。 你可以在./src/app/app.component.ts目录下找到它。 打开这个组件文件,并且把title属性从 Welcome to app!! 改为 Welcome to My First Angular App!! : src/app/app.component.ts: export class AppComponent { title = 'My First Angular App'; } 浏览器会自动刷新,而我们会看到修改之后的标题。不错,不过它还可以更好看一点。 打开 src/app/app.component.css 并给这个组件设置一些样式。 src/app/app.component.css: h1 { color: #369; font-family: Arial,Helvetica,sans-serif; font-size: 250%; }
编辑我们的第一个Angular组件成功! 7.项目文件概览Angular CLI项目是做快速试验和开发企业解决方案的基础。 你首先要看的文件是README.md。 它提供了一些如何使用CLI命令的基础信息。 7.1 src文件夹你的应用代码位于src文件夹中。 所有的Angular组件、模板、样式、图片以及你的应用所需的任何东西都在那里。 这个文件夹之外的文件都是为构建应用提供支持用的。 app/app.component.{ts,html,css,spec.ts} app/app.module.ts assets/* environments/* favicon.ico index.html main.ts polyfills.ts styles.css test.ts tsconfig.{app|spec}.json 7.2 根目录src/文件夹是项目的根文件夹之一。 其它文件是用来帮助你构建、测试、维护、文档化和发布应用的。它们放在根目录下,和src/平级。 e2e/ node_modules/ .angular-cli.json .editorconfig .gitignore karma.conf.js package.json protractor.conf.js README.md tsconfig.json tslint.json给TSLint和Codelyzer用的配置信息,当运行ng lint时会用到。 Lint功能可以帮你保持代码风格的统一。 (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |