angular2+初学者(2)——基本介绍以及页面的修改

一、基本介绍

   通过 ng new angualrDemo,我们创建了一个名为angualrDemo的项目,ng serve启动它:

    angular2+初学者(2)——基本介绍以及页面的修改_第1张图片

    可以看到,项目已经启动。

    在浏览器输入网址: localhost:4200

    1).打开src/index.html文件:

angular2+初学者(2)——基本介绍以及页面的修改_第2张图片

可以看到这里有个 app-root 标签,我们的应用将会在这里进行渲染。

    2).打开app/app.module.ts文件:

    angular2+初学者(2)——基本介绍以及页面的修改_第3张图片

    由于QuickStart是一个运行在浏览器中的WEB应用,所以根模块需要从@angular/platform-browser中导入BrowserModule,并将这个模块添加到imports中;

    import { NgModule } from '@angular/core': 为了能让装饰器@NgModule使用;

    import { AppComponent } from './app.component':将需要使用的组件导入,并将组件添加到@NgModule装饰器的declarations中,这样才可以使用这个组件,否则会报错。

    @NgModule: 这是一个装饰器,里面的都是元数据(描述数据的数据);

    declarations: 将需要使用的组件放进去,否则组件使用不了;

    imports: 将需要使用的模块放进去,像BrowserModule、FormsModule;

    providers: 需要的引入的服务都要放到这里面;

    bootstrap: 通常是app启动的根组件;

    export class AppModule{}: 创建一个AppModule类,并将它导出。

    3).打开app/app.component.ts文件:

angular2+初学者(2)——基本介绍以及页面的修改_第4张图片

*注意:这里的文件后缀为 .ts,而不是我们之前熟知的 .js,不要急,这只是一种对es6扩展的语言typeScript的文件后缀。

import语句告诉了我们写代码时需要哪些模块,这里我们从angular的核心模块core中导入了一个 Component。

这个import语句的语法是:

    import { things } from wherever 

我们把 { things }这里叫做解构,由ES6和TypeScript提供。

@Component 装饰器,装饰器里面的东西是元数据(描述数据的数据),当在App这个类中,使用了@Component时,就把App这个“装饰”成了一个Component。

selector:selector的值 'app-root'  表示我们需要在html中使用该组件,而使用的方式就是

templateUrl: 添加模板,指向了一个Html文件路径,这里指向的是app.component.html,意味着我们需要从app.component.html文件中加载模板。

angular2+初学者(2)——基本介绍以及页面的修改_第5张图片

当然了,定义模板还有一种方式,就是将模板直接放入app.component.ts文件中,让我们来看一下:

angular2+初学者(2)——基本介绍以及页面的修改_第6张图片

我们将app.component.html中的文件复制到了,注意: 上图中绿色的符号是反引号(`),就是tab键上面的那个按钮,这是es6中模板字符串,在模板字符串中,允许使用多行字符串。然后,再来看一下浏览器中的样子:

angular2+初学者(2)——基本介绍以及页面的修改_第7张图片

哎呀,竟然报错,来,让我们回到app.component.ts文件中看一下:

angular2+初学者(2)——基本介绍以及页面的修改_第8张图片

原来,是在@Component装饰器中,我们使用模板的时候,不应使用templateUrl了,而是要换成了template,因为templateUrl引用的是一个Html文件的路径,而不是实际的字符串,接下来,再让我们看一下页面效果:

angular2+初学者(2)——基本介绍以及页面的修改_第9张图片


这回就一点问题没有了,显示正常,控制台也一切正常。

那么@Component装饰器中的最后一个styleUrls,想必你们已经猜出来干嘛的了,是吧,对,这个就是样式,为什么这里不是styleUrl而是styleUrls呢?为什么多加了一个“s”,变成个复数呢?因为我们做前端的小伙伴们都知道,在一个html页面中,可以引入多个样式,一个页面不一定只对应一个css样式,所以,这个styleUrls对应的就是一个数组,数组中,我们填写css路径的字符串格式。

export class AppComponent{}: export是导出的意思,因为在js中不存在块级作用域,如果不是在函数中创建的东西,可以在任意地方使用,有时候会给开发造成困扰,所以,es6开始,就引入了一个块级作用域的概念,使变量或者方法只能在自己本身使用,typeScript简称ts,是对es6的一种扩展,所以ts也是会有块级作用域的概念的。class AppComponent{} 代表了创建了一个AppComponent类,我们将这个类通过export导出,使AppComponent这个类中的东西,让其他地方也可以使用。

其中,AppComponent遵循了风格指南中的标准。App是一个组件,在组件的风格指南标准中指出:

    组件的类名应该是大驼峰形式,并且以Component结尾。因此App组件的类名应该是 AppComponent;

    组件的文件名应该是小写中线形式,每个单词之间用中线分割,并且以 .component.ts结尾。因此,AppComponent类应该放在app.component.ts文件中。

最后,让我们看一下AppComponent这个类中的变量title,变量title进行了初始化表达式,使它自己的值等于'app',那么这个变量title究竟是用到了哪里呢?让我们回顾一下之前所写的,还记不记得自己在装饰器@Component中写了一个template字符串模板,让我们看一下这个字符串模板中的内容:

angular2+初学者(2)——基本介绍以及页面的修改_第10张图片

看,这个字符串模板中是不是有个用{{}}包裹起来的title?对,这个title就是我们在类中定义的title,而{{title}}这个在angular中称为插值表达式,意思是在当前类中定义的变量,都可以通过这种方式,将它插入到模板中。现在让我们打开浏览器,看一下最初的页面:

angular2+初学者(2)——基本介绍以及页面的修改_第11张图片

二、页面的修改:

让我们打开app.compoent.ts文件,修改成如下代码:

    删除了一些不必要的标签元素,将h1标签中的内容改成了 hello {{ title }}! , 把img的src路径替换成了一个在线生成占位图的地址。在AppComponent类中,将变量title的值改成了'world'

angular2+初学者(2)——基本介绍以及页面的修改_第12张图片

再来浏览器看一下结果:

angular2+初学者(2)——基本介绍以及页面的修改_第13张图片

看,页面是不是变成了,只有一个标题和一个占位图的简单网页。

其中 world 是由{{ title }} 动态渲染的。其实,{{...}}的作用不止如此,{{...}}语法也称为模板绑定,意味着里面不只是可以添加变量,还可以添加表达式。来,让我们再修改一下app.component.ts文件:

angular2+初学者(2)——基本介绍以及页面的修改_第14张图片

{{ title }}中添加了一个表达式,这个表达式的作用:先将title这个变量变成一个数组,然后通过数组的反转方法将数组反转,然后再把这个反转完成的数组转成字符串,输出出去。页面的效果如下:

angular2+初学者(2)——基本介绍以及页面的修改_第15张图片

是不是很神奇,world这个单词已经完全的反转了过来。

结尾:若需要转载,请注明本文出处。希望这篇教程可以带给你不一样的学习方式,让我们一起进步吧。


你可能感兴趣的:(angualr2+入门)