发表于: 2017-05-24 22:19:17

2 940


今天完成的事情:

第一层目录:

      e2e: 端到端的测试目录,做自动化测试

      src: 应用源代码目录

      angular.cli.json:  angular命令行工具的配置文件(引入第三方包jq,bootstrap通过修改这个文件实现).

      karma.conf.js:  karma单元测试执行器的配置文件,做自动化测试

      protractor.conf.js: 做自动化测试

      package.json: npm工具的配置文件,列明了当前应用所使用的第三方依赖包

      node_modules: 第三方依赖包目录

      

第二层目录:

app:包含应用的组件和模块

assets:存放静态资源 (图片)

index.html: 根html文件

main.ts 脚本执行入口点

polyfills.ts 导入库,兼容老版本浏览器

styles.css  应用全局样式

test.ts 自动化测试

tsconfig.json   ts编译器配置


第三层:

app.compinet.ts组件,整个应用的基础

@Component()组件元数据装饰器:

告知augular框架如何处理ts类,包含多个属性,属性的值叫元数据。根据值渲染组件,执行组件逻辑。

Template模板:

定义组件外观,以html形式存在,告诉angular如何渲染组件

Controller控制器:

被装饰器装饰,会包含组件所有属性和方法。

与模板数据绑定,模板展现控制器数据,控制器处理模板上发生的事件


import引入component装饰器

appcomponent类告诉angular是一个组件,需要把一些元数据附加到类上,用装饰器附加元数据附加到ts类。元数据会告诉angular如何将一个ts类处理成组件。


元数据:

selector:css选择器,这个组件能通过app-root这个html标签来调用。展示这个组件的内容。

内容由templateUrl来定义,templateUrl指定一个html文件作为组件模板展示

styleUrls指定一个css文件作为样式


export class类定义组件Controller控制器

控制器是指由@Component()装饰器装饰的ts类


数据绑定:

让html与控制器联系起来{{}}


输入属性:

@inputs  接收外部传入的数据,使得父组件直接传入数据给子组件


提供器

providers依赖注入


app.module.ts模块


angulr.cli.json:

apps数组:

index属性指向src  index.html启动加载页面

main属性指向src main.ts启动加载脚本,负责引导angular应用启动


拆分页面组件


明天计划的事情:

       继续学习angular


问题

      多敲demo


收获:

      如上




返回列表 返回列表
评论

    分享到