这里所说的Angular是指angular2.0以后的版本,和angularjs不同。以后我说的Angular都是指angular2.0以后的版本。截至现在Angular的版本为5.2.1。
Angular是google公司开源的一款前端框架,github地址为:https://angular.io/。是目前非常流行的前端框架之一,其它两个框架是react和vue。这里就不比较了,用一颗敬畏之心去学习并使用就好,Angular是我最喜欢的,也许先入为主吧,各有所好。Angular官网首页介绍的Angular的功能和特点,这里就不多说了,直接开始写第一个Angular网页应用。
Angular事实上必须用 TypeScript 来开发,因为它的文档和学习资源几乎全部是面向 TS 的, Angular本身也是TS开发的。TS 有很多好处——静态类型检查在大规模的应用中非常有用,同时对于 Java 和 C# 背景的开发者也是非常提升开发效率的。在不用 TS 的情况下使用 Angular 会很有挑战性。
- 全局安装angular-cli
Angular CLI是一个命令行界面工具,可以创建项目,添加文件以及执行各种正在进行的开发任务,如测试,捆绑和部署,省去了你对项目繁琐的配置。包管理推荐用yarn,可以去官网查阅和学习,这里就不多说了。在使用的过程中也会有很多友好的提示,要注意查看和学习。
npm使用以下命令安装
npm install -g @angular/cli
yarn使用以下命令安装
yarn global add @angular/cli
-g 和 global是指全局安装的意思,安装过程中node-sass有可能会失败,多试几次。安装后用
ng -v
命令看看是否安装成功了。
- 用angular-cli建一个Angular项目
打开Windows PowerShell,把路径切换为自己的工作空间,用ng命令创建一个Angular项目
ng set --global packageManager=yarn // 这是把ng的包管理设置为yarn
ng new my-app // 新建一个项目,并且安装项目依赖包,过程比较漫长
ng new my-app --skip-install // 新建一个项目,跳过安装依赖包的步骤,简写:ng new my-app -si,
// 没有安装依赖包的,需要用yarn install或者npm install安装依赖包
- 启动这个Angular项目
在PowerShell中把路径切换到项目目录cd my-app
,用ng serve --open
命令来启动项目,使用--open(或者只是-o)选项会自动打开浏览器,项目默认启动在4200端口http://localhost:4200。
-
编辑你的第一个Angular组件
用vscode打开项目,找到/src/app/app.component.ts文件,修改一下title并保存,看看浏览器中Logo上面标题有什么变化。
h1 {
color: #369;
font-family: Arial, Helvetica, sans-serif;
font-size: 250%;
}
这样,第一个Angular项目就算好了,但是距离实际开发还远远不够,继续努力学习吧,相信Angular会带给你更多惊喜。