Heim  >  Artikel  >  Web-Frontend  >  AngularJS HelloWorld-Instanz

AngularJS HelloWorld-Instanz

小云云
小云云Original
2018-03-07 12:00:001610Durchsuche

In diesem Artikel wird hauptsächlich das HelloWorld-Beispiel von AngularJS mit Ihnen geteilt, in der Hoffnung, allen zu helfen.

1. .angular-cli.json

{  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",  // 项目相关信息
  "project": {    // 项目名
    "name": "itanyangular"
  },  //整个应用程序配置
  "apps": [
    {      //根目录
      "root": "src",      //项目发布时的输出目录
      "outDir": "dist",      // 静态资源(文件/文件夹)
      "assets": [        "assets",        "favicon.ico"
      ],      // 项目的首页
      "index": "index.html",      // 指定项目入口(主加载文件)
      "main": "main.ts",      "polyfills": "polyfills.ts",      "test": "test.ts",      "tsconfig": "tsconfig.app.json",      "testTsconfig": "tsconfig.spec.json",      "prefix": "app",      // 定义全局样式,包括第三方样式库 bootstrap
      "styles": [        "styles.css"
      ],      // 全局js文件主要指第三方js  注意  需要描述文件
      "scripts": [],      "environmentSource": "environments/environment.ts",      "environments": {        "dev": "environments/environment.ts",        "prod": "environments/environment.prod.ts"
      }
    }
  ],  "e2e": {    "protractor": {      "config": "./protractor.conf.js"
    }
  },  "lint": [
    {      "project": "src/tsconfig.app.json"
    },
    {      "project": "src/tsconfig.spec.json"
    },
    {      "project": "e2e/tsconfig.e2e.json"
    }
  ],  "test": {    "karma": {      "config": "./karma.conf.js"
    }
  },  "defaults": {    "styleExt": "css",    "component": {}
  }
}

2. app.module.ts

import { enableProdMode } from '@angular/core';import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';import { AppModule } from './app/app.module';import { environment } from './environments/environment';if (environment.production) {  enableProdMode();
}// bootstrapModule 定义引导(启动)模块=》AppModuleplatformBrowserDynamic().bootstrapModule(AppModule)
  .catch(err => console.log(err));  // .catch(function(err){  //   console.log(err)  // })

4. app.component.ts

import { BrowserModule } from '@angular/platform-browser';import { NgModule } from '@angular/core';import { AppRoutingModule } from './app-routing.module';import { AppComponent } from './app.component';// 装饰器 表示AppModule这个类是一个Angular的模块@NgModule({  //定义的是该模块中所有的组件以及管道  declarations: [    AppComponent
  ],  // 导入的其他模块  imports: [    //默认情况下,只有BrowserModule 浏览器模块,该模块提供关于浏览器的支持    BrowserModule,    //路由模块,该模块是 --routing 产生的    AppRoutingModule
  ],  // 提供者 和DI 依赖注入相关的内容  // 其实Angular是一个小型的IOC容器  providers: [],  // 启动引导组件  bootstrap: [AppComponent]
})export class AppModule { }

Verwandte Empfehlungen:

import { Component } from '@angular/core';// 一般情况下一个组件包括一个ts 文件  一个html文件  一个css文件// 这三个文件文件名相同,放在同一个文件夹下// 用于表示下面的类是一个 组件@Component({  // 选择器 --> id 类  标签(建议)  父子   selector: 'app-root',  // selector: '.cc',  // 组件模板所在的文件  templateUrl: './app.component.html',  // 模板对应的css文件  styleUrls: ['./app.component.css']
})export class AppComponent {
  title = 'Itany';
  hello = '你好';
}

10 Kursempfehlungen zu helloworld

Das obige ist der detaillierte Inhalt vonAngularJS HelloWorld-Instanz. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn