Angular2学习——基础篇

组件

组件是Angular应用的基本模块,我们可以把一个组件理解为一段带有业务逻辑和数据的HTML

服务

服务用来封装可重用的业务逻辑,组件可以调用服务中的方法,服务也可以调用服务中的方法。

指令

允许我们向HTML元素添加自定义行为,

模块

模块用来将应用中不同的部分组织成一个Angular框架可以理解的单元。举个例子,大家都熟悉乐高积木。那么组件、服务、指令我们可以看作是一个一个单独的小积木,当我们用它们组装成了一个汽车,那么这个汽车就可以看作是一个模块。比如这一个组件,加上某两个服务,再加上几个指令我们可以完成一个登陆注册的功能,那么我们可以把这些放在一个登录注册的模块中去。之后项目需要这个登录注册功能,那么我们就可以添加这个模块进去。总的来说,组件、服务、指令是用来完成某一项功能的,而模块是用来打包分发这些功能的。

项目初始化

使用下面的命令下载Angular-cli

sudo npm install -g @angular/cli

ng-v.png

使用下面的命令创建新项目

ng new project-name

project-name是我们的项目名称,建立好后打开项目文件,可以看到如下文件

.editorconfig
.gitignore
angular-cli.json
e2e
karma.conf.js
node_modules
package.json
protractor.conf.js
README.md
src
tslint.json

来简单讲一下各文件和文件夹的作用吧

  • e2e文件夹:做自动测试的。暂时没有用到。
  • src文件夹:应用源代码。
  • .editorconfig:webstorm配置文件。
  • .gitignore:git的配置文件。
  • angular-cli.json:这是一个json文件,它是angular命令行工具的配置文件。
  • karma.conf.js:karma是一个单元测试的执行器,这个文件是karma的配置文件,用来做自动测试的。
  • package.json:npm工具的配置文件,在这个文件夹中列出了所使用的第三方依赖包。
  • ode_modules:npm工具根据package.json下载的依赖包存放于此。
  • protractor.conf.js:同karma,也是用来做自动化测试的一个配置文件。
  • README.md:说明文件。这个不说,你懂的。
  • tslint.json:tslint的配置文件,用来定义typescript代码质量检查的一些规则的。

然后再看一下src目录:

app
assets
environments
favicon.ico
index.html
main.ts
polyfills.ts
styles.css
test.ts
tsconfig.json

详细解释:

  • app文件夹:包含我们应用的组件和模块。我们要写的绝大多部分代码都在这个目录下。
  • assets文件夹:通常用来放静态资源。如图片、字体等。
  • environments文件夹:环境配置文件夹。Angular是支持多环境开发的,我们可以在开发环境、生产环节、正式环境共用一套代码,然后通过这个配置其代码的不同。比如不同环境调用后台的接口地址是不同的,我们可以在这里进行相应配置。
  • favicon.ico:图标文件。
  • index.html:整个项目的根html文件。
  • main.ts:整个项目的入口点。脚本的执行的入口点,Angular通过这个文件启动整个项目。
  • polyfills.ts:用来导入一些必要的库,主要目的是使得Angular能够正常运行在某些老版本浏览器中。
  • styles.css:放项目的一些全局样式。
  • test.ts:搞自动化测试的。
  • tsconfig.json: typescript编译器的一个配置文件

接下来说一下最关键的几个文件,app文件夹下的目录:

app.component.css
app.component.html
app.component.spec.ts
app.component.ts
app.module.ts

从Angular的程序架构中我们可以知道,一个Angular项目至少需要一个模块和一个组件,而命令行工具在新建这个项目时已经帮我们生成出来了,也就是app.component.ts文件和app.module.ts文件。

关于组件的三个必备元素

装饰器 @Component()

装饰器用来告知Angular框架如何处理一个typescript类,装饰器包含多个属性,这些属性的值叫做元数据,Angular根据这些元数据的值来渲染组件并执行组件的逻辑。

模板Template

我们通过组建自带的模板来定义组件的外观,模板以HTML的形式存在,告诉Angular如何来渲染组件。一般来说模板看起来很像HTML但是我们可以在模板中使用Angular的数据绑定语法来呈现控制器中的数据。

控制器 Controller

控制器就是一个普通的typescript类,它会被装饰器来装饰,控制器会包含组件所有的属性和方法,绝大多数的页面逻辑都是写在控制器里的。控制器通过数据绑定与模板通讯,模板展现控制器里的数据,控制器处理模板上发生的事件。

我们来看一下app.component.ts代码:

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'app works!';
}

第一行引入Component

接下来是组件元数据装饰器,所有的组件都必须使用一个Component装饰器来注解。
selector:是选择器。表明这个组件可以通过app-root标签来调用。
templateUrl:定义这个组件的内容。也就是模板。
styleUrls:定义这个组件内要用到的样式。

最后的三行定义了这个组件的控制器。即一个被Component装饰器装饰的typescript类。

模块文件app.module.ts内容:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';

import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

与组件类似,一个模块也是带着装饰器的typescript类。
declarations:声明模块中有什么东西。现在这个模块中有一个组件AppComponent。注意:在这个元数据中只能声明组件、指令和管道。
imports:声明了要让模块运转还需要什么东西。也就是这个模块还需要依赖其他的那些模块。
prividers:声明模块中提供了什么服务。
bootstrap:声明了模块的主组件是什么。

启动Angular过程介绍:

在angular-cli.json文件中有如下内容:

"apps": [
    {
      "root": "src",
      "outDir": "dist",
      "assets": [
        "assets",
        "favicon.ico"
      ],
      "index": "index.html",
      "main": "main.ts",

因此可以知道,当Angular启动时,加载了src目录下的index.html页面,并加载了src目录下的main.ts脚本。

然后我们来看一下main.ts脚本的内容:

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { environment } from './environments/environment';
import { AppModule } from './app/app.module';

if (environment.production) {
  enableProdMode();
}

platformBrowserDynamic().bootstrapModule(AppModule);
  • platformBrowserDynamic:从angular的浏览器模块中导入的方法,这个方法告诉angular使用哪个模块来启动整个应用。
  • enableProdMode:从核心模块导入的方法。这个方法用来关闭angular的开发者模式。
  • environment:导入环境配置。
  • AppModule:导入AppModule,即命令行工具生成的项目主模块。
  • if语句说明如果是在生产环境,那么关闭angular开发者模式。
  • 最后一行,传入主模块启动应用。这是angular的整个起点。

项目开发

通过下面的npm命令来创建新的组件

ng g component c-name
新建组件1.png

新建组件2.png

 关于Flex布局——原理介绍
关于图片懒加载和预加载 
上一篇:关于Flex布局——原理介绍
下一篇:关于图片懒加载和预加载


如果我的文章对你有帮助,或许可以打赏一下呀!

支付宝
微信
QQ