Angular 框架学习笔记(一)

过来人肯定都知道, Angular 是一个框架,为何现在突然要学 Angular 呢?

没法子,编程行业就是这样的,要么趁早学了,要么需要用到的时候赶紧学,很明显,我属于后者。

最近的一个项目需要用到 Angular 来写,包括前后端的数据交互还有页面渲染都要用到 Angular 框架。

以前没学过,现在必须学习一下这个框架才能深入这个项目,所以就入坑了。

一、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 下载地址:

https://nodejs.org/en/download/

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

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

我的版本如下图所示:

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

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

npm install -g @angular/cli

如下图所示:

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

ng -v

如下图所示:

四、创建第一个 Angular 项目

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

ng new my-app

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

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

cd my-angular-app
ng serve --open

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

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

http://localhost:4200/

页面如下图所示:

项目就此构建完成,整体上比较简单,也比较容易理解。可以看到,页面中的内容都是构建项目时默认生成的,后期我们可以随意改动,Angular 学习之旅就此开始咯!

最后,做个预告,下一篇笔记会来讲讲 Angular 项目文件详解和 Angular CLI 的一些常用的指令。

原文发布于微信公众号 - 孔乙己学习成长录(compassblog)

原文发表时间:2018-07-21

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Jerry的SAP技术分享

微信程序开发系列教程(四)使用微信API创建公众号自定义菜单

大家可能经常看到一些微信公众号具有功能强大的自定义菜单,点击之后可以访问很多有用的功能。

12210
来自专栏自由而无用的灵魂的碎碎念

解决每次从cmd进入sqlplus,都得重新设置pagesize、linesize的问题

如上图,经过测试,主要需要更改屏幕缓冲区大小,这里更改宽度为130。为防止每次进入cmd都调节窗口的大小,这里设置窗口大小,宽度为与缓冲区一致。

10320
来自专栏Youngxj

QQ网址强制变XML卡片消息工具

3.1K60
来自专栏全栈之路

关于win10子系统(ubuntu)

关于如何安装安装ubuntu,之前都是需要下载安装一个虚拟机,然后下载镜像安装包,不过现在已经不需要那么麻烦了。安装教程:Win10安装Ubuntu子系统教程(...

77520
来自专栏我的博客

谷歌浏览器扩展程序开发

先说为何要学这个,我们公司部署项目的时候有一个选择按钮,每次都得选中才能提交!于是就。。。 直接上代码! 配置文件:manifest.json { ...

29130
来自专栏游戏杂谈

预加载JavaScript/CSS但不执行

好吧,一个方案一个方案来分析一下(要求是不允许执行Javascript和应用CSS,以免消耗系统资源):

19420
来自专栏编程坑太多

React Native 环境搭建和创建项目(Mac)

15330
来自专栏卡少编程之旅

fiddler抓包工具(windows)

871150
来自专栏达摩兵的技术空间

mint-ui loadmore 采坑指南

loadmore的部分主要是mint-ui用来解决上拉以及下拉的部分,用来做加载更多数据或者刷新的部分。

26130
来自专栏wblearn

程序员的你是否熟练掌握Chrome开发者工具?

回归正题,本文主要是介绍一下Chrome developer tool(开发者工具)的使用,以方便我们的日常开发与调试。其实在没用Chrome开发之前就时不时的...

13440

扫码关注云+社区

领取腾讯云代金券