Angular入门之初识篇

时间：2021-08-02 09:21:19

转自：http://www.showmeyea.com/#/blog/46c8704897394f09a64edfe59478f38b

1、简介

Angular（本文所出现的Angular是指Angular2以后的版本，事实上在它之前的版本名为AngularJS，而非Angular）作为近年来广受欢迎的一款前端框架，一直以来追随者众多，而且不断有人想更深入的学习和了解，本文将主要针对Angular的一些基本语法和组件的使用方法进行讲解。作为一款 MVW（知乎-如何理解前端框架中的MVVM，MVC，MVW？） 框架，其本身还拥有众多实用的组件，极大地为开发者提高了开发效率。更多关于Angular的介绍，请自行百度。此处附上 Angular中国官方 。
Angular入门之初识篇

2、前期准备

  • node.js 对前端有一定了解的朋友很可能已经对这个神器很熟悉了，作为如今最火的前端开发环境，它甚至已经可以胜任后台服务器开发的工作了。而Angular作为新兴的前端框架，自然也是会凑凑热闹了，甚至有些无法自拔，因为从生成一个Angular项目到打包到生产环境，都离不开它。此处附上官方下载地址，请根据自己的开发环境自行前去下载和安装。
  • npm.js 对于不了解npm.js的朋友来说，可以用一种比较简单的方式快速理解它。对于初学者而言，它仅仅是一个JavaScript仓库以及一系列仓库工具的集合，即便是Angular的开发环境也是通过npm.js仓库来保存的。由于新版本的node.js本身集成了npm.js工具集，因此不需要额外的下载和安装。
  • Typescript 这是一款来自微软的开发语言，其本身衍生与JavaScript，因此很大程度地保留了JavaScript的语法和特性。但作为面向对象的开发语言，它又与JavaScript有着许多明显的区别，以摆脱JavaScript诸多弊病。而Angular的开发语言便是Typescript。因此，在学习Angular之前，请务必先了解和学习一下Typescript，对于有JavaScript开发经验的人来说，这也并不是一件难事。当然，如果你又有面向对象的开发经验，那么恭喜你，你学习起来将更加容易。此处附上Typescript中文网。

3、环境搭建

1. node.js安装 

2. Angular-CLI安装 

键入命令行  
npm install -g @angular/cli

安装完毕之后，键入命令行

ng -v

若出现类似以下的信息，则表明安装成功

    _                      _                 ____ _     ___
   / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
  / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
 / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
/_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
               |___/


Angular CLI: 1.5.4
Node: 8.9.3
OS: win32 x64
Angular:
...

4、创建Angular项目

键入命令行，此处的my-app为项目名称

ng new my-app

待项目初始化完成之后，进入项目目录，键入命令运行项目

cd my-app
ng serve --open  

正常情况下，浏览器会自动弹出并访问 http://localhost:4200/，若浏览器长时间无响应，自行打开浏览器并访问 http://localhost:4200/。若正常启动，则项目创建成功。

标签：

相关文章