看到角应用在行动
创建项目后,在服务器视图中列出的项目。让我们发射角dev服务器。我们可以在项目的代码更,但就让我们一探究竟吧,看看应用程序。
启动服务器,转到Servers视图并扩展Web应用程序。选择项目,然后右键单击并从上下文菜单中选择启动服务器,或单击Start按钮
。新标签页打开终端+视图中运行“ng”服务。角的应用程序如何运行的更多信息,见运行角服务器。
创建一个随机的单词组件
给一个随机的词,您首先需要创建一个组件将显示。创建组件,右键单击项目并选择New >组件。组件的src / app目录中创建您的项目。
让我们创建一个名为RandomWords的组件。
一旦创建,你需要替换的内容组件(src / app /随机的单词/ random-words.component.ts)和以下资料来源:
从“进口输入}{组件,OnInit, @angular /核心”;@ component({选择器:app-random-words, templateUrl:“。/ random-words.component.html”, styleUrls: [’。/ random-words.component.css ']})出口类RandomWordsComponent实现OnInit {@Input()字:数组<字符串>;构造函数(){}ngOnInit () {}}
注意:@Input()字:数组<字符串>;意味着组件接受一个字符串数组,可以通过设置“单词”输入属性,稍后我们将回到这里。
然后设置的内容src / app /随机的单词/ random-words.component.html如下:
< ul > <李* ngFor =“让单词的单词”>{{词}}< /李> < / ul >
这将使一个列表的内容“单词”属性中定义random-words.component.ts。的ngFor指令用于遍历项目,在我们的案例中“单词”属性。当前项的iterable被引用的使用“单词”。我们使用{{词}}打印出“单词”的内容。
更新应用程序来展示一些单词
AppComponent将负责喂随机的单词RandomWordsComponent(通过randomWords属性)。现在我们就用“你好”和“世界”。
更换或更新src / app / app.component.ts文件定义一些随机的单词。以后你会更新这个使用web服务获得合法随机的单词。
从“@angular进口{组件}/核心”;@ component({选择器:app-root, templateUrl:“。/ app.component.html”, styleUrls: [’。/ app.component.css ']})出口类AppComponent {title =“随机的单词!”;randomWords =['你好','世界'];}
现在,让我们告诉角呈现新的RandomWords组件,通过一组单词,我们上面定义的组件。做以下修改src / app / app.component.html:
<标题>{{标题}}< / h1 > < app-random-words[词]= " randomWords " > < / app-random-words >
看看你的浏览器!如果一切都正确,你现在应该看到“hello”和“世界”自动显示为您的应用程序。祝贺你,你已经把你的第一个组件。
从Web服务获取随机的单词
好的,让我们使它有趣。你现在更新显示随机的单词来自一个远程web服务而不是硬编码。
首先,右键单击项目并选择New >服务。有关更多信息,请参见创建一个角服务。然后,替换的内容src /应用程序/服务/ random-word.service.ts下面的定义:
从“@angular进口{注射}/核心”;进口{Http响应}“@angular / Http”;从“rxjs”进口{可见};const SERVICE_URL = ' http://www.setgetgo.com/randomword/get.php ';出口类RandomWordService @Injectable(){构造函数(私人http: http) {} getNew():可观察到的<字符串>{返回this.http.get (SERVICE_URL) . map((响应:响应)= > response.text ());}}
一旦创建,然后,您可以使用服务AppComponent内,允许动态生成的单词加载的web服务。做以下修改src / app / app.component.ts:
从“@angular进口{组件}/核心”;从“进口{RandomWordService}。/服务/ random-word.service ';@ component({选择器:app-root, templateUrl:“。/ app.component.html”, styleUrls: [’。/ app.component.css '],提供者:[RandomWordService]})出口类AppComponent {title =“随机的单词!”;randomWords = [];构造函数(私人randomWordsService: RandomWordService) {} getNewRandomWord () {this.randomWordsService.getNew () .subscribe((词)= > {this.randomWords.push(词);});}}
让我们添加一个按钮,将触发服务得到一个新的随机单词,并将其添加到列表;我们需要更新src / app / app.component.html用以下:
<标题>{{标题}}< / h1 > <按钮(点击)= " getNewRandomWord ()" >获得新的随机词< /按钮> < app-random-words[词]= " randomWords " > < / app-random-words >
然而,在此之前将所有工作,NgModule将需要更新应用程序允许所有一起工作。更新src / app / app.module.ts用下面的代码:
从“@angular / platform-browser”进口{BrowserModule};从“@angular进口{NgModule} /核心”;从@angular /形式的进口{FormsModule};从“@angular / http”进口{step 4};导入“rxjs /添加/运营商/地图”;进口{AppComponent}”。/ app.component ';从“进口{RandomWordsComponent}。/随机的单词/ random-words.component”;@NgModule({声明:[AppComponent RandomWordsComponent],进口:[BrowserModule FormsModule, step],提供者:[],引导:[AppComponent]})出口类AppModule {}
如果你遵循正确的所有步骤,你现在有一个应用程序,该应用程序将显示随机的单词。
附录A:使用角工作区和库
工作区
角工作区介绍了角6日,是一个伟大的方式来创建多个相互依存的角度应用程序和库。
创建一个角工作区,使用新项目向导和选择没有最初的应用程序选择。创建的项目非常类似于正则角应用程序,但是没有源代码。不过,它包含node_modules将与其他项目和共享库在这个角的工作区。
库和应用程序
创建一个新的角度应用程序,或一个新的图书馆在一个工作区,最简单的方法是调用新的应用程序和库的向导从上下文菜单中角workspace-do不使用角项目向导。
注意:如果你使用的运行/调试>角Web应用程序行动,或试图启动项目从Servers视图,角工作空间的默认应用程序启动。您可以修改默认的编辑defaultProject财产的angular.json文件,位于工作空间的根源。