开启AngularJS之路

 学习资源：

Angular官网（建议FQ）：https://angularjs.org

Angular中文官网：https://angular.cn

菜鸟教程：http://www.runoob.com/angularjs2

官网教程Demo：

我的学习步骤是从官网教程的DEMO下手，完全跟随教程一步一步先走一遍。

Demo构建的程序，用于管理一群英雄，首先Dashboard（仪表盘）展示了当前最勇敢的英雄，其次Dashboard顶部的另一个按钮Heroes（英雄列表），点击会切换到英雄列表视图；点击英雄名字时，路由会指向英雄详情页面，在此，可以进行修改英雄的名字。大致流程如此，基本涵盖了Angular的核心知识。

搭建开发环境：

确保已安装 node 和 npm，在命令行使用 node -v 和 npm -v ，查看版本，确保 node 是v4.x.x或更高，npm 为3.x.x或更高，官方提示老版本会产生错误。

安装教程：https://docs.npmjs.com/getting-started/installing-node

如果不能FQ，可以使用淘宝的npm镜像：

$ npm install -g cnpm --registry=https://registry.npm.taobao.org
$ cnpm install

运行条件：

由于目前各种环境（浏览器或Node）暂不支持ES6的代码，所以需要一些shim和polyfill（IE需要）让ES6写的代码能够转化为ES5形式并可以正常运行在浏览器中。

从上图可以看出在 Es5 浏览器下需要以下模块加载器：

• systemjs - 通用模块加载器，支持AMD、CommonJS、ES6等各种格式的JS模块加载。

• es6-module-loader - ES6模块加载器，systemjs会自动加载这个模块。

• traceur - ES6转码器，将ES6代码转换为当前浏览器支持的ES5代码，systemjs会自动加载 这个模块。

创建App：

步骤1. 全局安装 Angular CLI

npm install -g @angular/cli

步骤2.创建新项目（需要耐心等待，创建新项目需要花费较多时间，大部分用来安装npm包）

ng new my-app

步骤3. 启动开发服务器

cd my-app
ng serve --open（或 -o）

启动成功后浏览器会自动打开并访问 http://localhost:4200/ 

 ng serve 命令会启动开发服务器，监听文件变化，并在修改这些文件时重新构建此应用。

至此，项目已经创建，运行起来是 Angular 的一个简单的样式 "Welcome to app !"

 下面会按照学习笔记记录，实践官方demo：《英雄指南》-Tour of Heroes

标签：

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有