• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    迪恩网络公众号

Angular(一)-Typescript&Angular入门熟悉

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

1.1 安装typescript

全局安装typescript

npm install -g typescript

1.2 typescript的小例子

1.2.1 新建一个index.ts

function hello(user:string) {
    return `${user}: hello world`
}

let user = 'tom'
console.log(hello(user))

1.2.2 编译ts成js

`tsc index.ts

1.2.3 查看生成的index.js

function hello(user) {
    return user + ": hello world";
}
var user = 'tom';
console.log(hello(user));

1.2.4 运行javascript

node index.js

1.3 typescript的一些特性

  • 由于是javascript的超集,所以支持所有javascript的语法,包括ES6等
  • 可以自定义类型
  • typexcript如果报错,通过tsc依然可以生成javascript文件

2. Angular

2.1 Angular Cli的安装

npm install -g @angular/cli

2.2 创建项目

ng new angularapp

2.3 安装依赖并启动

npm install && npm start

2.4 文件目录树

|-- angularapp
    |-- .browserslistrc   // 配置各种前端工具之间共享的目标浏览器和 Node.js 版本
    |-- .editorconfig     // 代码编辑器的配置
    |-- .gitignore        // 配置git忽略文件
    |-- angular.json      // 为工作区中的所有项目指定 CLI 的默认配置,包括 CLI 要用到的构建、启动开发服务器和测试工具的配置项,比如 TSLint,Karma 和 Protractor
    |-- karma.conf.js     // 应用专属的 Karma 配置
    |-- package-lock.json // 提供 npm 客户端安装到 node_modules 的所有软件包的版本信息
    |-- package.json      // 配置工作空间中所有项目可用的 npm 包依赖
    |-- README.md         // 根应用的简介文档.
    |-- tsconfig.app.json // 应用专属的 TypeScript 配置,包括 TypeScript 和 Angular 模板编译器的选项
    |-- tsconfig.json     // 工作空间中各个项目的默认 TypeScript 配
    |-- tsconfig.spec.json// 应用测试的 TypeScript 配置
    |-- tslint.json       // 应用专属的 TSLint 配置
    |-- e2e               // e2e测试相关的
    |   |-- protractor.conf.js
    |   |-- tsconfig.json
    |   |-- src
    |       |-- app.e2e-spec.ts
    |       |-- app.po.ts
    |-- src
        |-- favicon.ico
        |-- index.html
        |-- main.ts // 应用的主要切入点。用 JIT 编译器编译应用,然后引导应用的根模块(AppModule)在浏览器中运行
        |-- polyfills.ts // 提供浏览器支持的polyfills脚本。
        |-- styles.css // 列出为项目提供样式的 CSS 文件。该扩展还反映了你为该项目配置的样式预处理器
        |-- test.ts
        |-- app     // 包含定义应用逻辑和数据的组件文件
        |   |-- app-routing.module.ts
        |   |-- app.component.css // 为根组件 AppComponent 定义了基本的CSS
        |   |-- app.component.html// 定义与根组件 AppComponent 关联的 HTML 模板
        |   |-- app.component.spec.ts// 为根组件 AppComponent 定义了一个单元测试
        |   |-- app.component.ts // 为应用的根组件定义逻辑,名为 AppComponent
        |   |-- app.module.ts // 定义了名为 AppModule 的根模块,它会告诉 Angular 如何组装应用。这里最初只声明一个 AppComponent。当你向应用中添加更多组件时,它们也必须在这里声明
        |-- assets   // 包含要在构建应用时应该按原样复制的图像和其它静态资源文件
        |   |-- .gitkeep
        |-- environments // 包含特定目标环境的构建配置选项。默认情况下,有一个无名的标准开发环境和一个生产(“prod”)环境
            |-- environment.prod.ts
            |-- environment.ts


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
热门推荐
热门话题
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap