初识Angular

栏目: 编程语言 · AngularJS · 发布时间: 1年前

来源: juejin.im

内容简介:Angular 诞生于2009年,由Misko Hevery 等人创建,后为Google所收购。是一款优秀的前端框架。从09年到今天,发展了十年,Angular的整个生态还是比较成熟的。Angular分为在本专栏中将使用最新基于TypeScript的Angular7。TypeScript是JavaScript的超集,语法有点像是前端的Java。学起来也是挺简单。TS的语法就不多做介绍了,大家可以去官方文档看一看,中文官方文档见此。

本文转载自:https://juejin.im/post/5ce76655e51d45775a700273,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有。

Angular 诞生于2009年,由Misko Hevery 等人创建,后为Google所收购。是一款优秀的前端框架。从09年到今天,发展了十年,Angular的整个生态还是比较成熟的。

Angular分为 Angular1 (也叫AngularJS)和**Angular2+**的版本,Angular2及以后Angular4、5等版本都是基于TypeScript语言,而Angular1是基于 JavaScript 语言,这两种版本的Angular完全可以当做两个框架。

在本专栏中将使用最新基于TypeScript的Angular7。TypeScript是JavaScript的超集,语法有点像是前端的Java。学起来也是挺简单。TS的语法就不多做介绍了,大家可以去官方文档看一看,中文官方文档见此。

在本篇中,我将带你们搭建一个最简单Angular编译运行环境,创建一个工程,达到能访问的效果。

新建工程

Angular官方文档 英文好的同学建议看看。

在安装Angular之前,需要先安装Node.js,Angular要求Node.js的版本为8.x或者10.x。这里请大家自行安装,安装完成后使用 node -v 命令查看版本。安装node的同时也会安装npm这个包管理器,我们将通过npm命令安装Angular。

Step1

任意目录下执行以下命令,安装angular cli。

npm install -g @angular/cli
复制代码

Step2

找一个目录,创建Angular工程,指定工程名(如my-app)。

ng new my-app
复制代码

默认可以连续按两个回车。在安装了angular cli之后,我们可以使用很多ng的命令。

Step3

启动这个新建的工程

cd my-app
ng serve --open
复制代码

ng serve 命令启动angular服务,同时监听你的文件改动,一旦发生变化,工程就会立刻重新编译,达到实时刷新的效果。这称之为 热部署

--open 或者 -o 选项会自动打开浏览器http://localhost:4200/

此时可以访问上述网址,看到Angular的欢迎界面。

工程分析

my-app/
├── angular.json           本工程的一些配置
├── e2e                    自动化测试目录
├── node_modules           第三方依赖包存放目录
├── package.json           npm工具的配置文件,这里列出了本工程依赖的第三方包
├── package-lock.json      package.json的补充文件
├── README.md              说明文件
├── src                    代码目录
├── tsconfig.json          TypeScript的配置文件
└── tslint.json            tslint的配置文件,定义了TypeScript代码质量检查规则,不用管

3 directories, 6 files
复制代码

my-app的目录如上所示。其他暂时不用管。

在my-app目录下我们可以执行一些npm的命令,这些命令在package.json中有列出。

"scripts": {
  "ng": "ng",
  "start": "ng serve",
  "build": "ng build",
  "test": "ng test",
  "lint": "ng lint",
  "e2e": "ng e2e"
 },
复制代码

比如, npm run start 就是执行 ng -serve 。如果想在启动的时候指定端口为8080,可以这样修改:

"start": "ng serve --port 8080",
复制代码

所以执行 npm run start 也可以启动Angular服务。

了解了Angular工程的一些启动配置后,再看看代码。

在浏览器打开默认的网址http://localhost:4200/所展示的页面 html 写在 my-app/src/app/app.component.html 中。

Angular2以后是基于component(组件)的架构。我们在 my-app/src/app/ 下输入

ng generate component example
复制代码

可以看到生成了4个文件,并更新了 app.module.ts 。可以知道Angular中的一个componet包含了:

example/
├── example.component.css
├── example.component.html
├── example.component.spec.ts
└── example.component.ts

0 directories, 4 files
复制代码

To Be Continue

上面只是简单的讲了讲Angular的环境搭建,那么有了这样一个搭好的工程,如何修改如果实现我们自己想要的页面呢。这里推荐大家去看一下Angular官方教程,它里面的Hero例子写的非常好。

除了看官方例子外,也可以等待我之后的更新,接下来我将会写Angular Material的相关使用,对Angular不熟悉的同学可以在接下来的几篇文章中弄明白如何使用Angular。

源码见:专题简介


以上所述就是小编给大家介绍的《初识Angular》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!

关注码农网公众号

关注我们,获取更多IT资讯^_^


查看所有标签

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

新零售:低价高效的数据赋能之路

新零售:低价高效的数据赋能之路

刘润 / 中信出版集团 / 2018-9 / 65.00元

小米新零售,如何做到20倍坪效? 天猫小店,如何利用大数据助力线下零售? 盒马鲜生,为什么坚持必须用App才能买单? 名创优品,实体小店在电商冲击下,如何拥抱春天? 新零售的未来在何方?什么样的思维模式才可应对? 新零售,不是商界大佬的专用名词,它就在我们生活触手可及的各个角落——小到便利店的酸奶,大到京东商城的冰箱,都蕴含着消费者、货物、经营场所三者共同作用的经济逻......一起来看看 《新零售:低价高效的数据赋能之路》 这本书的介绍吧!

随机密码生成器
随机密码生成器

多种字符组合密码

HTML 编码/解码
HTML 编码/解码

HTML 编码/解码

XML、JSON 在线转换
XML、JSON 在线转换

在线XML、JSON转换工具