A股上市公司传智教育(股票代码 003032)旗下技术交流社区北京昌平校区

 找回密码
 加入黑马

QQ登录

只需一步,快速开始

本帖最后由 AreYouGlad 于 2018-1-8 19:58 编辑

查看更多精彩前端资源


简介
  • 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

资料开发环境
开发工具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 { }

3 个回复

倒序浏览
回复 使用道具 举报
感谢分享
回复 使用道具 举报

感谢分享
回复 使用道具 举报
您需要登录后才可以回帖 登录 | 加入黑马