AngularJS2中最基本的文件说明

为应付坑爹的网络,参考网上配置npm的教程配置npm镜像


运行git clone https://github.com/angular/quickstart.git quickstart导出官网的例子。可以在这个例子的基础上面进行修改。


main.ts  固定以下代码。主要是为了启动页面
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app.module';
const platform = platformBrowserDynamic();
platform.bootstrapModule(AppModule);


app.module.ts 配置自己的类
import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import {FormsModule} from '@angular/forms';//进行双向绑定的时候要用


import { AppComponent }  from './app.component';
import {SiteFormComponent} from './site/site-form.component';//导入自己定义的类,前面是类名,后面是路径
import {StartAppComponent} from './appcomp/appcomp';


@NgModule({
  imports:      [ BrowserModule, FormsModule ],
  declarations: [ AppComponent,SiteFormComponent,StartAppComponent ],//在这里加上自己的类名
  bootstrap:    [ AppComponent ]
})
export class AppModule { }


app.component.ts  添加自己的类中的selector
import { Component } from '@angular/core';


@Component({
  selector: 'my-app',
  template: '<app-root></app-root>'//填写自定义类中的selector
})
export class AppComponent { }


以下是自己写的类
appcomp.ts 自己定义一个类
import {Component} from '@angular/core';


@Component({
    moduleId: module.id,//这句话的作用是,加上之后templateUrl会在此ts的目录找url。不加的话是以app目录为根目录找url
    selector:'app-root',//起一个名字,用于在app.module.js中调用
    templateUrl:'appcomp.html',//关联html页面
    // styleUrls:['./appcomp.css']//关联css文件
})
export class StartAppComponent{
    title='app works!';
}


appcomp.html  自己定义一个html
这里不需要加head,body之类麻烦的标签了,而且妈妈再也不用担心我的中文会乱码了。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值