本帖最后由 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脚手架工具 (全局只需安装一次)项目创建与结构说明 项目创建打开 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命令行工具配置文件,可以设置一系列默认值,还可以配置项目编译时要包含的那些文件 .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 { }
|
|