Angular 框架学习笔记(一)

过来人肯定都知道, Angular 是一个框架,为何现在突然要学 Angular 呢?没法子,编程行业就是这样的,要么趁早学了,要么需要用到的时候赶紧学,很明显,我属于后者。

最近的一个项目需要用到 Angular 来写,包括前后端的数据交互还有页面渲染都要用到 Angular 框架,以前没学过,现在必须学习一下这个框架才能深入这个项目,所以就入坑了。 ,以及Angular 和 AngularJS 的区别等等

一、Angular 简介

我很早之前就听过 AngularJS 了,但是基本没听说过 Angular,起初以为这两个是一样的,入坑了才发现,不太一样,差别还有点大。简单点来说,Angular 就是 AngularJS 的 2.0 版本,并且,Angular 是完全不兼容 AngularJS 。

1、AngularJS

AngularJS 1.0 在 2012 年 6 月由 Google 公司推出正式版本,是一款非常优秀的 JavaScript 框架, 推出之后就已经具备了数据的双向绑定、依赖注入、通过指令扩展 HTML 页面等亮点功能。

后逐渐又推出了 AngularJS 1.3、AngularJS 2.5 等版本,但是AngularJS 从推出来也暴露出来各种问题,这就加速了 Angular 的诞生。

2、Angular

Angular 也叫 Angular 2,反正网上是什么叫法都有了,叫什么都不是太重要了,我自己习惯把 1.0 版本叫 AngularJS,2.0 版本叫 Angular,能区分就好了。

2014 年 3 月份左右,Google 官方博客就有提及 Angular 的开发计划,直到到 2016 年 9 月份,Angular 2.0 版本正式发布。

Angular 发布之后,增加了很多的新特性,基本上解决掉 AngularJS 版本存在的各种问题。

二、Angular 核心要素

感觉 Angular 中有太多的概念了,对于一个我一个初级开发者来说,知道最好,实在不知道的也没什么影响了,主要是懂的开发,明白其中的原理才是最重点,后面会慢慢的对具体的模块做一定的讲解。

Angular 中最重要的就是「组件」了,这个是必须要会的。Angular 的一个组件由「装饰器」「元数据」「组件类」组成,包括 JavaScript、HTML、CSS 等要素。如下就是一个组件中的简单代码:

三、搭建开发环境

Angular 的开发环境非常简单,只需要安装一下 Node.js 和 Angular CLI,再加上一个简单的 IDE 工具,就可以进行学习和开发了。至于 IDE 的话,可以使用 VS code,我自己暂时就简单使用了 Sublime Text 3 。

1、安装 Node.js: Angular 的开发要求 Node 8.0 以上的版本,如果是老一点的版本可能需要更新,否则可能会出现错误。

Node.js 下载地址:点击前往官网下载

下载完成后,直接点击安装即可,安装的步骤也非常的简单,基本上都是直接按 Next ,就可完成安装了。安装完成后,打开命令行,输入如下命令即可查看 node 和它的命令 npm 的具体版本了。

1
2
查看 node 版本命令:node -v
查看 npm 版本命令:npm -v

我的版本如下图所示:

2、安装 Angular CLI:一款好的工具能让开发更加简单快捷,而 Angular CLI 就是这款工具了。Angular CLI 是一个命令行界面的工具,可以快速的创建项目、添加文件以及执行一大堆开发任务,比如测试、打包和发布等等。

而 Angular CLI 的安装就是使用我们前面安装的 npm 命令,直接在命令行进行安装。以管理员的身份打开命令行,直接输入如下命令即可安装 Angular CLI :

1
npm install -g @angular/cli

如下图所示:

安装成功后,输入如下命令可以查看 Angular CLI 的版本号:

1
ng -v

如下图所示:

四、创建第一个 Angular 项目

1、直接打开命令行窗口,进入到某个你存放项目的目录,输入如下指令:

1
ng new my-app

Angular CLI 的这个指令会帮助我们创建项目相关的文件,并在该项目中生成一个简单的默认应用。 稍等片刻,创建完成后如下图所示:

2、输入如下指令,进入项目目录,并启动服务器:

1
2
cd my-angular-app
ng serve --open

ng serve 命令会启动开发服务器,监听文件变化,并在修改这些文件时重新构建此应用。使用 --open(或 -o) 可以自动跳转到浏览器进行访问, 如下图所示:

3、启动成功后,会自动跳转到浏览器页面,服务器的端口是 4200,也可以自动打开浏览器并访问:

http://localhost:4200/

页面如下图所示:

项目就此构建完成,整体上比较简单,也比较容易理解。最后,做个预告,下一篇笔记会来讲讲 Angular 项目文件详解和 Angular CLI 的一些常用的指令。

------ 本文结束感谢您的阅读 ------
孔乙己 wechat
扫描二维码关注微信公众号,了解更多
赞赏是最好的支持与鼓励!