angularjs2入门1-文件结构分析

 
 开发资料 

 
 http://www.angularjs.cn/A2oG
  

 
 http://www.imooc.com/article/12805
  

 
 1.下载源代码，源代码是包括入门教程的4篇和进阶教程的6篇 

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

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 
 指定了组件可以再文件外使用。 

原文链接：https://www.f2er.com/angularjs/147976.html

angularjs2入门1-文件结构分析

猜你在找的Angularjs相关文章