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

一、基本介绍

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

    

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

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

    1）.打开src/index.html文件：

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

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

    

    由于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文件：

*注意：这里的文件后缀为 .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文件中加载模板。

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

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

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

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

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

那么@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字符串模板，让我们看一下这个字符串模板中的内容：

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

二、页面的修改：

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

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

再来浏览器看一下结果：

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

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

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

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

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