angular学习笔记01

Angular的简介

Angular CLI是一个命令行界面工具，它可以创建项目、添加文件以及执行一大堆开发任务，比如测试、打包和发布。我们的目的是构建一个简单的Angular CLI应用程序，更好的快速开发Angular应用，通过开发Angular的过程中一定要多看Angular官方文档。

如果没有node的话，那就去node官网下载：http://nodejs.cn/

Angular-cli安装配置

1、全局安装Angular-cli

npm install -g @angular/cli

2、创建新项目

npm new my-app

3、启动开发服务器

cd my-app
ng serve --open

然后自动打开浏览器并访问：http://localhost:4200/

4、编辑我们第一个Angular组件

vsc

5、自动出现vscode编辑器

如果没有vscode编辑器，就去打开https://code.visualstudio.com/

6、找到src/app/app.component.ts文件

export class AppComponent {
  title = 'My First Angular App';
}

7、打开 src/app/app.component.css 并给这个组件设置一些样式

h1 {
  color: #369;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 250%;
}

学习资料入门：

1、NiceFish（美人鱼）是一个微型Blog系统，前端基于Angular 4.0.2

https://git.oschina.net/mumu-osc/NiceFish

2、NiceFish的后台管理界面，纯前端，没有任何后端代码。整体基于Angular2和Bootstrap3.3.7

https://git.oschina.net/mumu-osc/NiceFish-Admin

3、NiceFish的Java版后台，最简单的SpringMVC+Mybatis

http://git.oschina.net/mumu-osc/NiceFish-SpringMybatis

4、Angular2.0视频教程来了！视频和PPT的链接都在底部

https://my.oschina.net/mumu/blog/834254

5、以下是视频对应的PPT

http://git.oschina.net/mumu-osc/NiceFish/attach_files

6、REST API的测试和原型设计

这个可以拿来练习用的，因为angular需要获取api接口

http://jsonplaceholder.typicode.com/

7、Angular官网手册

https://angular.cn/