Page tree
Skip to end of metadata
Go to start of metadata

Recently Updated


BLOG OSSEZ 博客内容更新

HoneyMoose
HoneyMoose 的清新小站
Angular 英雄示例教程
英雄指南教程(Tour of Heroes)涵盖了 Angular 的基本知识。 在本教程中,你将构建一个应用,来帮助人事代理机构来管理一群英雄。 这个入门级 app 包含很多数据驱动的应用所需的特性。 它需要获取并显示英雄的列表、编辑所选英雄的详情,并且在包含有英雄数据的不同视图之间进行导航。 在本教程的最后,你的应用可以做下面的工作: 使用Angular 的内置指令(Angular directives)来显示 / 隐藏元素,并显示英雄数据的列表。 创建 Angular 组件(Angular components)以显示英雄的详情,并显示一个英雄数组。 为只读数据使用单向数据绑定。 添加可编辑字段,使用双向数据绑定来更新模型。 为用户事件绑定组件方法(component methods),比如相应用户键盘输入和点击。 让用户可以在主列表中选择一个英雄,然后在详情视图中编辑他。 使用管道来格式化数据。 创建共享的服务来管理这些英雄。 使用路由在不同的视图及其组件之间导航。 你将学到足够的 Angular 知识和足够的信心来让 Angular 提供你所需的支持。 完成本教程的所有步骤之后,最终的应用会是这样的:live example / download example。 你将要构建什么 下面是本教程有关界面的构想:本应用开始界面为”Dashboard(主面板)”视图,在这个视图中显示最勇敢的英雄。 你可以单击主面板上的两个链接(”Dashboard” 和 “Heroes”)来在主面板视图和英雄视图之间进行导航。 如果你在主面板中单击英雄名称 “Magneta” 时,路由将会打开 “Hero Details(英雄详细)”页面。在这个页面中,你可以对英雄的名字进行修改。 单击 “Back(返回按钮)”,应用将会让你返回到 Dashboard(主面板)页面中。顶部的链接能够让你在任何时候都能够返回到主页面。如果你单击  “Heroes(英雄列表)”,引用将会将英雄以列表显示。 当你单击不同英雄的名字的时候,一个只读的“微型详情视图”会在列表的下方显示,以体现你的选择。 你可以点击 “View Details(查看详情)” 按钮进入所选英雄的编辑视图。 下面这张图汇总了所有可能的导航选项。 下面是本应用的动态展示:   https://www.cwiki.us/display/AngularZH/Tutorial
Angular 应用的外壳
你首先需要使用 Angular CLI 来创建一个初始化的应用。随后,你将对你已经初始化的应用进行修改来让你构建出 Tour of Heroes app(英雄指南) 这个应用。 在教程的本部分,你需要完成下面的操作: 设置的你的环境。 创建一个新的工作区(workspace)和初始化应用项目。 启动应用服务器。 对应用进行修改。 设置你的环境 希望对你的开发环境进行设置,请参考下面的链接中的指南:Getting started: 先决条件 安装 Angular CLI 你不需要按照 Getting started 页面中说明的内容从头到尾的进行一次,你只需要完成上面提示的 2 个部分就可以将环境设置好了。 继续下一步来创建《英雄指南》的工作区并且将这个应用初始化。 创建一个新工作区并且初始化应用 Angular 的工作区就是你开发应用所在的上下文环境。一个工作区包含一个或多个项目所需的文件。每个项目都是一组由应用、库或端到端(e2e)测试组成的文件集合。 在本教程中,你将创建一个新的工作区。 希望创建一个新工作区并且初始一个应用项目,你需要: 确保你现在没有位于 Angular 工作区的文件夹中。例如,在前面的教程中,你已经创建了 Getting Started workspace(开始使用工作区),请回到上级目录中。 运行 CLI 命令  ng new 然后提供空间的名字  angular-tour-of-heroes, 完整的命令如下显示: ng new angular-tour-of-heroes ng new 命令会提示你输入要在初始应用项目中包含哪些特性,请按 Enter 或 Return 键接受其默认值。 Angular CLI 会安装必要的 Angular npm 包和其它依赖项。这可能需要几分钟。 它还会创建下列工作区和初始项目的文件: 新的工作区,其根目录名叫 angular-tour-of-heroes。 一个最初的骨架应用项目,同样叫做 angular-tour-of-heroes(位于 src 子目录下)。 一个端到端测试项目(位于 e2e 子目录下)。 相关的配置文件。 初始应用项目是一个简单的 “欢迎” 应用,随时可以运行它。 启动应用服务器 进入工作区目录,并启动这个应用。 cd angular-tour-of-heroes ng serve --open ng serve 命令会构建本应用、启动开发服务器、监听源文件,并且当那些文件发生变化时重新构建本应用。 --open 标志会打开浏览器,并访问 http://localhost:4200/。 你会发现,这个应用已经启动了,并且可以通过浏览器进行访问了。 Angular 组件 你所看到的这个页面就是application shell(应用的外壳)。 这个外壳是被一个名叫 AppComponent 的 Angular 组件(component)控制的。 Components(组件)  是 Angular 应用中的基本构造块。 它们在屏幕上显示数据,监听用户输入,并且根据这些输入执行相应的动作。 对应用进行修改 用你喜欢的编辑器或 IDE 打开这个项目,并访问 src/app 目录,来对这个起始应用做一些修改。 你会在这里看到 AppComponent 外壳的三个实现文件: app.component.ts— 组件的类代码,这是用 TypeScript 写的。 app.component.html— 组件的模板,这是用 HTML 写的。 app.component.css—  组件的私有 CSS 样式。 修改应用的标题 打开组件的类文件 (app.component.ts),并把 title 属性的值修改为 ‘Tour of Heroes’ (英雄指南)。 title = 'Tour of Heroes'; 打开组件的模板文件 app.component.html 并清空 Angular CLI 自动生成的默认模板。改为下列 HTML 内容: <h1>{{title}}</h1> 双花括号语法是 Angular 的插值绑定语法。 这个插值绑定的意思是把组件的 title 属性的值绑定到 HTML 中的 h1 标记 浏览器自动刷新,并且显示出了新的应用标题。 添加应用样式 大多数应用都会努力让整个应用保持一致的外观。 因此,CLI 会生成一个空白的 styles.css 文件。 你可以把全应用级别的样式放进去。 打开 src/styles.css 并把下列代码添加到此文件中。 /* Application-wide Styles */ h1 {   color: #369;   font-family: Arial, Helvetica, sans-serif;   font-size: 250%; } […]
https://stackblitz.com/github/cwiki-us-angular/cwiki-us-angular-app 导入后如何添加到自己的项目
将 https://stackblitz.com/github/cwiki-us-angular/cwiki-us-angular-app 导入到界面后,如何将这个项目添加到自己的项目里面。 然后再自己的项目里面进行编辑,修改后提交? 你可以在编辑界面中 Fork 到本地后进行修改。
如何将 GitHub 中的项目导入到 stackblitz.com 中
如何将一个 GitHub 中的项目导入到 stackblitz.com 中,然后开始编辑和编译呢? 例如,我们有一个项目在 GitHub 中的地址为:https://github.com/cwiki-us-angular/cwiki-us-angular-app 如何将这个项目导入到 stackblitz.com 中进行编辑和测试呢?   首先你需要在 stackblitz.com 中注册一个用户名和密码。 你可以可以使用你 GitHub 的用户名进行关联。 当你注册成功后,你可以访问下面的地址:https://stackblitz.com/github/cwiki-us-angular/cwiki-us-angular-app 这个地址将会自动将 GitHub 中的 https://github.com/cwiki-us-angular/cwiki-us-angular-app 项目导入到编辑器中。 显示的界面如下: 请注意,stackblitz 是通过 URL 来进行项目导入的。 官方的说明连接如下: https://stackblitz.com/docs#import-from-github 简单来说,是使用下面的链接,告诉 stackblitz 到哪里去获取源代码。 stackblitz.com/github/{GH_USERNAME}/{REPO_NAME} 如果你还希望使用分支,那么可以使用下面的链接: .../github/{GH_USERNAME}/{REPO_NAME}/tree/{TAG|BRANCH|COMMIT}  
Angular 服务器默认的启动端口是多少
Angular 服务器启动的时候,如果不添加任何参数,那么默认的启动端口是多少? 在默认情况下,Angular 的启动端口是 4200
Angular 如何修改启动的端口
在默认的情况下 Angular 启动使用的是端口 4200。 如果修改这个启动的端口,比如说我们希望再  4100 端口上启动? 可以在启动的时候添加端口参数 –port。 例如使用下面的启动命令: ng serve --open --port 4100 就可以让你的 Angular 应用在 4100 端口上启动。  
Angular CLI 创建你的第一个 Angular 示例程序
第一步:安装 Angular CLI 你要使用 Angular CLI 来创建项目、创建应用和库代码,并执行多种开发任务,比如测试、打包和发布。 全局安装 Angular CLI。 要想使用 npm 来安装 CLI,请打开终端/控制台窗口,并输入下列命令: npm install -g @angular/cli 第二步:创建一个工作区和初始化应用 Angular 工作区 就是你开发应用的上下文环境。 每个工作区包含一些供一个或多个项目使用的文件。 每个项目都是一组由应用、库或端到端(e2e)测试构成的文件。 希望创建工作区和初始化应用项目: 运行 CLI 命令 ng new,并提供一个名字 my-app,如下所示:ng new my-app ng new 会提示你要把哪些特性包含在初始的应用项目中。请按回车键接受默认值。 Angular CLI 会安装必要的 Angular npm 包及其它依赖。这可能要花几分钟。 还将创建下列工作区和初始项目文件: 一个新的工作区,根目录名叫 my-app 一个初始的骨架应用项目,也叫 my-app(但位于 src 子目录下) 一个端到端测试项目(位于 e2e 子目录下) 相关的配置文件 初始的应用项目是一个简单的 “欢迎” 应用,随时可以运行它。 第三步:启动开发服务器 Angular 包含一个开发服务器,以便你能轻易地在本地构建应用和启动开发服务器。 进入工作区目录(my-app)。 使用 CLI 命令 ng serve 启动开发服务器,并带上 --open 选项。cd my-app ng serve --open ng serve 命令会自动启动服务器,并监视你的文件变化,当你修改这些文件时,它就会重新构建应用。 --open(或只用 -o)选项会自动打开浏览器,并访问 http://localhost:4200/。 如果因为某些原因,你计算机中的 4200 端口被占用了,你可能希望你的这个应用在不同的端口上被启动。 你可以在你的启动命令上添加一个参数 –port,将上面的 ng serve --open 修改为 ng serve --open --port 4100, 这个命令将会对你的第一个 Angular 项目进行编译后部署启动,在启动完成后将会自动在浏览器上打开链接,你应用服务器部署的端口为 4100。 看,你的应用正在使用一条消息欢迎你: 第四步:编辑你的第一个 Angular 组件 组件 是 Angular 应用中的基本构造块。 它们在屏幕上显示数据、监听用户输入,并根据这些输入采取行动。 作为初始应用的一部分,CLI 也会为你创建第一个 Angular 组件。它就是根组件,名叫 app-root。 打开./src/app/app.component.ts 将 title 属性从  'my-app' 修改为 'My First Angular App' @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent { title = 'My First Angular App!'; }   浏览器将会用修改过的标题自动刷新。 很不错,但还可以更好看。 打开 ./src/app/app.component.css 文件,并给这个组件提供一些样式。 h1 { color: #369; font-family: Arial, Helvetica, sans-serif; font-size: 250%; } 看起来很不错! 根据版本的不同,我们在初始化的时候,发现 .css 文件的后缀名已经使用 styl 后缀名了。 比如说在整理示例的代码中,你需要修改的文件名字为 app.component.css,但是在你的文件系统中,你可能只能知道 app.component.styl 这个文件。 https://www.cwiki.us/display/AngularZH/Getting+started
如何安装 Angular CLI 并且检查 CLI 的版本
想在系统中安装 Angular CLI ,如何进行安装并且如何检查 CLI 的版本? 可以使用命令: npm install -g @angular/cli 进行安装。 使用命令 ng version 来查看 Angular 的 CLI 的版本  
Angular 文档中链接的修改路径
在 Angular 文档程序中的左侧链接的修改路径在哪里? 如下图所示的修改路径。 左侧链接的修改路径在 angular-cn\aio\content\navigation.json 这个文件中。 你可以参考 SRC 中源文件的内容进行修改: https://src.ossez.com/angular/angular-cn/blob/aio/aio/content/navigation.json
Angular 文档中的修改链接是从哪里改的
如何修改修改的文本的链接。 如下图表示的,如何修改这个地方的链接到自己的 SCM 中。 你需要修改的文件为: aio\tools\transforms\templates\lib\githubLinks.html 你可以通过访问下面的链接来需要你进行修改或者调整的链接: https://src.ossez.com/angular/angular-cn/blob/aio/aio/tools/transforms/templates/lib/githubLinks.html  


  • No labels