Angular 2 - 初学Angular2

由于之前一直做的Angular1.* ,,觉的Angular的双向绑定,DOM的对开发者来说简直是神器。所以对Angular2的期待可见一斑。

最近终于有空抽一点时间学习Angular2 , 可是Angular都出到5+了。我是落后了多少。Anyway,什么时候开始学习都不算完。

简单看了下Angular2的简介就开始了我的一个App。不幸的事我遇到了一些小问题。由于之前电脑有Node , NPM , 所有就直接开干。

我用的是NPM 6.5.0 + NODE 10.14.2

但是当我用Angular CLI 新建项目的时候,出现了一些小插曲,说我的版本有问题。

 所以百度了下。卸载我的NPM 然后重新安装就好了.

具体步骤如下:

  1. npm uninstall -g npm 删除已经有的NPM
  2. npm install -g npm 重新安装NPM
  3. npm install -g @angular/cli 安装angular CLI
  4. ng new demo1 成功创建新项目

我们可以进去demo1 查看CLI给我们创建的初始小程序。

  接下来我们可以用进入demo1 , 接下来我们可以CLI命令ng serve --open 启动程序.

  • ng serve 会自动开发服务器,并检查你的文件修改,如果项目文件有更改,他就会重新构建程序
  • (open/o) 选项是用于自动打开浏览器,并访问localhost 的 4200 端口 (http://localhost:4200/)

接下来我们就会看到浏览器自动打开,并显示如下页面

  

接着我们就可以对项目进行一些修改工作。

进入app我们可以看到我们的component和module。css(sass/scss/less) 都已经创建好了。
接下来我们给component 添加一个属性。然后显示到页面。

我们给Component 添加一个message属性然后找到对应的html,让message显示出来。

我们可以发现当我们修改Component或者HTML的之后,CLI 会自动启动编译,然后更新app

然后我们可以看到页面上已经显示我们刚刚添加的在Component中的属性

猜你喜欢

转载自www.cnblogs.com/allenj/p/10140030.html