Angular学习之一（入门）

开发环境安装

1 安装node.js

下载安装地址
下载后点击安装就可以了，点下一步即可，注意配置npm的环境变量；

改源

//默认源
npm config set registry https://registry.npmjs.org
//如果下载不了或者网速不好的话在换
npm config set registry https://registry.npm.taobao.org
//临时换源
npm --registry=https://registry.npm.taobao.org

2 安装angular-cli

//未安装npm需要先安装，直接安装node.js（包含npm）即可
npm install -g @angular/cli

使用ng-v查看是否安装成功

angular-cli

3 生成新项目

//生成项目
ng new project-name
//生成组件
ng g component component-name

项目目录

src目录

app：应用的组件和模块，要写的代码
assets:资源文件
environments：多环境的配置：开发环境，生产环境；
inde.html：根html，应用访问的第一个html
main.js：启动文件

组件结构

image.png

app.module.js

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

import { AppComponent } from './app.component';
import {HttpModule} from '@angular/http';
import {FormsModule} from '@angular/forms';

@NgModule({
  // 声明组件、指令和管道
  declarations: [
    AppComponent
  ],
  // 该模块依赖的其他模块
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule
  ],
  // 声明服务
  providers: [],
  // 声明模块的主组件
  bootstrap: [AppComponent]
})
export class AppModule { }

app.component.ts

// 引入angular核心模块
import { Component } from '@angular/core';

// 装饰器，附加元数据，告诉Angular将TypeScript类处理成组件
// 引入angular核心模块
import { Component } from '@angular/core';

// 装饰器，附加元数据，告诉Angular将TypeScript类处理成组件
@Component({
  // 装饰器里面的元素均为元数据
  // 指定的dom元素
  selector: 'app-root',
  // 渲染的html模板
  templateUrl: './app.component.html',
  // 渲染的html模板的样式表
  styleUrls: ['./app.component.css']
})
// 控制器（被装饰的TS类）
export class AppComponent {
  title = 'app';
}

参考链接

1 Angular官方文档

免责声明

以上内容若侵犯了您的版权，请联系我，我会立即删除。