本文主要和大家分享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 = '你好';
}相关推荐：
PHP5 和 MySQL 圣经
下载
本书是全面讲述PHP与MySQL的经典之作，书中不但全面介绍了两种技术的核心特性，还讲解了如何高效地结合这两种技术构建健壮的数据驱动的应用程序。本书涵盖了两种技术新版本中出现的最新特性，书中大量实际的示例和深入的分析均来自于作者在这方面多年的专业经验，可用于解决开发者在实际中所面临的各种挑战。
