查看更多精彩前端资源

简介

---

• Angular 是一款来自谷歌的开源的 web 前端框架，诞生于 2009 年，由 Misko Hevery 等人创建，后为 Google 所购。是一款优秀的前端JS框架，已经被用于 Google 的多款产品当中。
• Angular1.x 的时候被人们称为下一代 web 应用, 在2015 之前得到了广泛的应用，开发单页面应用无人能敌。
• 2015 年底 Angular2.0 发布了，这个版本是完全重写Angular, 彻底的颠覆了之前的版本，同时Angular1.x也逐渐进行淘汰阶段, 现已基本不再更新
• 目前最新的angualr版本为4.x, 马上就会发布5.x, 不过不用慌, angualr4.x 5.x都是对angular2.x的升级与优化, 属于同一个框架
• 所以Angular框架目前只有两个, 一般我们会把Angular1.x称为AngularJS, 而Angular2.x等等称为Angular
  
  

新特点

• Angular 是基于 TypeScript 编写的，所以使用它我们也要学习 TypeScript , 入门门槛比较高
• Angular 相对 AngularJS 的开发方法也完全不一样, 采用的是目前比较流行的组件化架构与编写方式
• 现在的 Angular 除了web开发, 还可以进行服务器端渲染, 开发跨平台桌面应用, 跨平台的原生APP
  
  

资料

• 中文官网angular2
  
  

开发环境

---

开发工具

• Visual Studio Code(链接)[https://code.visualstudio.com/]
  
  

VS code 插件

• Angular Files ：在vsc中集成angular-cli工具，可界面华新建component、directove、module、routing、pipe等feature
• Auto Import：（重要）自动引入模块
• Auto Rename Tag ： html的开始和结束标签同时更新
• beautify: 代码格式化工具
• Document This: 目前vscode上最好的ts注释插件(用法ctrl+alt+d然后再Ctrl+alt+e或者d，e是全部加注释，d是对当前方法加注释)
• Path Intellisense ： 路径提醒工具，非常方便
• Settings Sync ： 通过github账号的token设置不同机子vsc设置上的同步
• TSlint ：ts语法代码质量检测
• npm :在vsc中运行npm指令
• TypeScript Toolbox ：typescript必备插件
  
  

安装 nodejs

• 在终端/控制台窗口(win+R输入cmd)中运行命令 node -v 和 npm -v 来验证一下你正在运行
• 需node 6.9.x 和 npm 3.x.x 以上的版本, 老的版本可能会出现错误，更新的版本没问题
  
  

Angular脚手架工具 (全局只需安装一次）

• 运行命令: npm install -g @angular/cli
• 可使用淘宝镜像: npm install -g @angular/cli --registry=https://registry.npm.taobao.org
• 测试命令: ng -v
  
  

项目创建与结构说明

---

项目创建

• 打开 cmd 进入你要创建项目的目录
• 运行创建项目命令: ng new 项目名称, 创建项目时会自动下载依赖包, 需要等待一下
• 如果依赖安装失败了, cd进入刚刚创建的项目, 然后运行npm install手动安装
• 如果仍然安装不成功, 那么删除node_modules文件夹, 尝试使用cnpm install
• 安装成功后运行项目启动命令: ng serve --open
  
  

目录结构介绍根目录目录结构

• e2e : 端对端的自动化测试目录，可以模拟黑河测试人员在浏览器上的测试过程, 拥有自己的tsconfig.json配置
• node_modules : 第三方依赖包目录, package.json中列举的所有第三方模块都放在其中
• src : 项目源代码目录
• .angular-cli.json ： Angular命令行工具配置文件，可以设置一系列默认值，还可以配置项目编译时要包含的那些文件
• .editorconfig : 编辑器配置文件, 确保统一的基本配置, 大多数编辑器都支持.editorconfig，参见 [http://editorconfig.org]
• .gittgnore : git忽略配置文件, 用来确保某些自动生成的文件不会被提交到源码控制系统中
• karma.conf.js : karma单元测试配置文件, 运行ng test时会用到它
• package.json : 项目描述文件，可列出该应用使用的依赖包, 还可以添加自自定义脚本
• protractor.conf.js : 端到端自动化测试配置文件, 运行ng e2e的时候会用到它
• REAADME.md : 项目说明文档
• tsconfig.json : TypeScript编译器配置文件, 用来指定ts编译时的策略
• tslint.json : tslint配置文件，用于定义ts代码统一规范, 提升编码质量, 保持风格统一
  
  

src目录目录结构

• app : 包含应用的组件和模块，我们要写的代码都在这个目录
• assets : 资源目录，存放图片等静态资源，构建应用时会拷贝到发布包中
• environment : Angular多环境开发配置，让我们可以在不同的环境下（开发环境，测试环境，生产环境）共用一套代码
• favicon.ico : 网站标题栏图标
• index.html：应用启动页面，构建应用时CLI会自动把所有js和css文件添加进去, 基本不用做任何处理
• main.ts：应用入口，Angular通过此文件启动应用
• polyfills.ts：导入一些库使Angular兼容不同的浏览器, 通常使用core-js和zone.js就够了
• styles.css：全局样式文件, 影响整个应用的样式集中存放在这里, 大多数情况下会在组件中使用局部样式，以利于维护
• test.ts: 单元测试的主要入口点, 它有一些你不熟悉的自定义配置，不过我们不需要编辑这里的任何东西。
• tsconfig.app.json：为Angular应用准备的ts编译配置文件, 添加第三方依赖的时候会修改这个文件
• tsconfig.spec.json：为单元测试准备的ts编译配置文件
• typings.d.ts : ts声明文件
  
  

src/app目录结构

• app.component.css: 根组件样式
• app.component.html: 根组件模版
• app.component.spec.ts: 根组件单元测试文件
• app.component.ts: 跟组件
• app.module.ts: 根模块, 用来引导应用如何组装并启动
  
  

app.module.ts文件详解

[JavaScript] 纯文本查看 复制代码

// BrowserModule, 浏览器环境中必须引入的解析模块
import { BrowserModule } from '@angular/platform-browser';

// NgModule, 模块装饰器, 用来定义模块, 使用时需要传递一个元数据对象, 用来定义模块组成
import { NgModule } from '@angular/core';

// AppComponent, 根组件, 页面会从根组件进行渲染
import { AppComponent } from './app.component';

@NgModule({
        // 这个属性用来声明本模块的`组件 指令 管道`, 他们三者都与视图有关系, 声明后才可以使用
    declarations: [ AppComponent ],
    // 在这里指定依赖的Angular模块, 指定后才可以使用这些模块的功能, Angular模块是用来增强应用的
    imports: [ BrowserModule ],
    // 在这里指定依赖的服务, 服务是用来封装公共业务逻辑或数据处理逻辑的
    providers: [],
    // 指定根组件, 视图会从根组件进行渲染, 只有根模块才能设置该属性
    bootstrap: [AppComponent]
})
export class AppModule { }

感谢分享

感谢分享