Angular 学习 mac 电脑

本文详细介绍Angular项目从环境搭建到开发流程的具体步骤,包括使用WebStorm作为开发工具、通过Node.js和Angular CLI进行环境配置,以及理解项目文件结构等内容。此外还介绍了Angular的基本组成部分,如组件的三个核心要素,并提供了项目启动的方法。

1 Angular 编程软件: webstorm

2 Angular 环境搭建 Nodejs, Angular CLI,WebStorm

   nodejs 安装完之后 npm -v 可以看到nodejs 的版本

   sudo npm install -g @angular/cli    (安装angular 命令行工具)

    ng -v (查看angular 命令行工具版本)

3 angular 项目文件解释

   angular-cli.json 命令行工具配置文件,引用第三方包(boostrap,jquery)要修改这个文件

   package.json     应用的第三方依赖包

  karma.conf.js protractor.conf.js 是用来作自动化测试的配置文件

  tslint.json 代码质量检查

   app 文件夹 我们写的代码都要放在这个文件夹里

   assets 放图片等网站相关资源

   enviroments 多环境开发支持配置

   index.html 整个应用的根html, 系统启动用的文件

   main.ts 整个web应用脚本的入口点

   polyfill.ts 导入一些库 让angular 可以在老版本的浏览器可以运行

   test.ts 用来做自动化测试  

4 angular 的component 三要素,组件必备三要素

  @component() 装饰器, Template 模板,controller 控制器

  控制器包含组件的所有属性和方法 并把数据绑定在模板上

 

 5 angular 项目的启动

   web storm shortcut

     https://www.cnblogs.com/yeminglong/p/5995421.html

    代码格式化 option+command+l

     ng serve 

      创建组件 ng g component xxx

      创建服务 ng g service

     然后打开 http://localhost:4200

     Control+c stop terminal

转载于:https://www.cnblogs.com/hudasm/p/8537339.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值