angularjs2入门1-文件结构分析

前端之家收集整理的这篇文章主要介绍了angularjs2入门1-文件结构分析前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
开发资料
1.下载源代码,源代码包括入门教程的4篇和进阶教程的6篇

node_modules下载,下载过后,拷贝到根目录中

http://pan.baidu.com/s/1pL2PoBx

目录结构


每节课不同的项目名称,所以要在systemjs.config.js中修改


第一节课,项目名称是basic-step1-quickstart

2.如果没有下载上面的node_modules包,现在手动下载npm依赖包

cd 到根目录下

npm install - g cnpm -- registry = https://registry.npm.taobao.org
cnpm install
npm start
3.文件介绍
package.json 标记本项目所需的 npm 依赖包。
tsconfig.json 定义了 TypeScript 编译器如何从项目源文件生成 JavaScript 代码
typings.json 为那些 TypeScript 编译器无法识别的库提供了额外的定义文件
systemjs.config.js 为模块加载器提供了该到哪里查找应用模块的信息,并注册了所有必备的依赖包。 它还包括文档中后面的例子需要用到的包。
启动模块main.ts。
根模块 app.module.ts 文件
用 NgModules 把 Angular 应用组织起来,每个 Angular 应用至少需要一个root module(根模块),实例中为 AppModule ,由于 QuickStart 是一个运行在浏览器中的 Web 应用,所以根模块需要从 @angular/platform-browser 中导入 BrowserModule 并添加到 imports 数组中装饰器的 declarations 和 bootstrap 字段中。
根组件 app.component.ts 文件

装饰器:赋予一个类更丰富的信息(元数据)
@Component是 Angular 2 的装饰器,它会把一份元数据关联到 AppComponent 组件类上。 my-app 是一个 CSS 选择器,可用在 HTML 标签中,作为一个组件使用。 @view 包含了一个 template ,告诉 Angular 如何渲染该组件的视图。templateUrl: 'app.component.html'引用html文件;styleUrls: ['app/app.component.css']样式文件 export 指定了组件可以再文件外使用。

猜你在找的Angularjs相关文章