angular(1)

写习惯了,下面是我的读书笔记,准备一点点深入学习Angular. 温故而知新

1.确保已经安装nodejs.

2.打开命令行窗口,进入F盘(我的在F盘,你可以选择其他)

键入:

ng new hello-angular

这个过程会有点慢,因网速而定.ps:慢的时候想打人.....如果这个命令失败,有可能是你的写入权限没有开启.右键点击所在的文件夹- 属性 - 安全, 设置当前用户权限便好.

最后成功了

3. 用编译器打开改文件

文件目录如下:

4 回到命令行进入hello-angular文件夹,键入 ng serve

5.打开浏览器输入: http://localhost:4200

不同版本的angular,会导致生成的应用主页面不一样.当你进入了这个主页面,代表你成功了

6.接下来为这个APP应用增加一个Component.

在命令行窗口键入 ng generate componet login --inline-template --inline-style

其中:

参数generate shi是用来生成文件的.

参数component是说明我们要生成一个组件

login是组件的名称(可以自定义)

--inline-template --inline-style : 这两个参数告诉angular-cli : 生成组件时,请把组件的HTML模板和CSS样式和组件放在同一个文件夹中.

这个命令生成的文件如下:

这个命令太长了, Angulartuan团队把他缩写为 ng g login -it -is ,也就是说可以用generate的sh首字母g来代替generate, component 的首字母c来代替它, --inline-template的两个词分别取首字母编程-it

来看一下login.component.ts

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

@Component({
  selector: 'app-login',
  template: `
    <p>
      login works!
    </p>
  `,
  styles: []
})
export class LoginComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }

}

Angular提倡的文件命名方式是这样的: 组件名称 .component.ts 组件的HTML模板命名为: 组件名称.component.html ,组件的样式文件命名为 : 组件ming名称 .component.css,建议在编码中尽量遵循Google的官方建议

其中 @Componet 是Angular提供的装饰器函数,用来描述Component 的元数据

selector 是指这个组件在HTML模板中的标签是什么

template 是嵌入的HTML模板,如果实用单独文件可用 templateUrl

styles 是嵌入的CSS的样式,如果使用单独文件可用styleUrls

这个组件的使用方法 : 我们可以在其他组件的template中使用 <app-login></app-login>来引用这个组件

现在打开src/app/app.component.html加入我们的组件引用

保存后,从新运行该app(如果你之前的没有关掉,可以直接去看变化)

浏览器中观察,可见多了一行 login works ,这个正是src/app/login/login.component.ts 中模板的内容:

接下来了解一些概念

Angular中大量地使用了元数据. 元数据: 是用来描述数据的数据.比如组件是一个数据的集合,而component就是这个组件的元数据,它描述该组件的一些属性,比如它对外的选择器名称(也就是标签)应该叫app-login, 模板是什么样子的,样式是什么样子. 一般管

@Component叫做组件的装饰器,它的作用就是表示清楚元数据

组件 : 组件负责控制屏幕上的一小块区域(成为"视图",也就是我们的组件模板显示在屏幕上的那块区域).我们在类中定义组件的应用逻辑,为视图提供支持.组件通过一些由属性和方法组成的API与视图交互

模块 : 模块就是提供相对独立功能的功能块,每块聚焦于一个特定业务领域.Angular 内建的很多库是以模块形式提供的.

Angular 模块是带有@ngModel装饰器函数的类,@angular接受一个元数据对象,该对象告诉Angular如何编译和运行模块代码.它指出模块拥有的组件,指令和管道,并把他们一部分公开出去,以便外部组件使用他们. 它可以向应用的依赖注入器中添加服务提供商.

NgModel是一个装饰器函数,它接受一个用来描述模块属性的元数据对象,其中最重要的属性是:

declarations: 声明本模块中拥有的视图类.Angular有san'三种视图类:组件,指令和管道,列出应用中顶层组件

exports:declarations的子集,可用于其他模块的组件模块

imports: 本模块声明的组件模块需要的类所在的其他模块

providers: 服务的创建者,并加入到quan全局服务列表中,可用于应用任何部分

bootstrap"zhi'指定应用的主视图(称为根组件), 它是所有其他视图的宿主.只有根模块才能设置bootstrap属性

如下 src/app/app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

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

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

每个Angular应用至少有一个模块类 --"跟模块", 我们将通过引导根模块来启动应用.根模块在一些小型应用中可能是唯一,但大多数应用会有很多特性模块,每个模块都是一个内聚的代码块zhu专注于某个应用领域,工作流或紧密相关的功能.

按照约定,根模块的类名叫作AppModel,放在app.module.ts文件中,在module里声明的组件在module范围内都可以直接使用,也就是同一module里面的任何Component都可以在其模板文件中直接声明使用

猜你喜欢