AngularJS之HelloWorld实例

PHP中文网 • 2025年3月8日 17:14:50 • 编程技术 • 阅读 2

本文主要和大家分享angularjs之helloworld实例，希望能帮助到大家。

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、main.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)  // })

登录后复制

3、app.module.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 { }

登录后复制

4、app.component.ts

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 = '你好';}

登录后复制