脚本宝典收集整理的这篇文章主要介绍了Angular2学习笔记一(之Hello world),脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
Angular2虽然新出不久,但网上的对于hello world的教程已经很多。在这里也不是记录关于Angular2的新发现,而是对现有网上部分资料进行整理,归纳与总结最后分享给大家。
环境
对于Angular2的开发环境,大家需要明确下面几点:node、npm、cnpm、angular-cli、tyPEscript。下面分步进行环境安装,这里IDE采用webStorm或者Idea。
安装
1、从Node.js官网下载并安装,因为Angular2要求node版本较高,建议安装最新版本。在Node新版本中已经自带npm,所以无须另外安装。安装完Node.js后,进行简单的环境配置即可。
在Node的安装根目录下,创建node_global、node_cache两个文件夹,以管理员身份打开cmd窗口执行以下命令:
npm config set PRefix "C:Program Filesnodejsnode_global"
npm config set cache "C:Program Filesnodejsnode_cache"
设置环境变量,编辑用户变量
PATH="C:Program Filesnodejsnode_global"
添加系统变量,这样就可以统一管理全局插件的安装了:
NODE_PATH="C:Program Filesnodejsnode_globalnode_modules"
2、接下来安装cnpm,由于访问国外资源的限制,cnpm提供了镜像安装的解决方法,非常好用。可翻墙的同学跳过此步。
$ npm install -g cnpm --registry=https://registry.npm.taobao.org
3、安装angular-cli脚手架,现在还是1.0beta版本,这里注意用到了cnpm,本人这里采用镜像安装,比较快速:
$cnpm install -g angular-cli
4、接下来安装typescript环境依赖:
$cnpm install -g typescript
5、至此,angualr2的开发环境已经准备就绪,hello world即将到来!下面看下各插件版本信息
Microsoft Windows [版本 10.0.10586]
(c) 2015 Microsoft Corporation。保留所有权利。
C:WINDOWSsystem32>node -v
v7.5.0
C:WINDOWSsystem32>npm -v
4.1.2
C:WINDOWSsystem32>cnpm -v
cnpm@4.5.0 (C:Program Filesnodejsnode_globalnode_modulescnpmparse_argv.js)
npm@3.10.10 (C:Program Filesnodejsnode_globalnode_modulescnpmnode_modulesnpmlibnpm.js)
node@7.5.0 (C:Program Filesnodejsnode.exe)
npminstall@2.24.0 (C:Program Filesnodejsnode_globalnode_modulescnpmnode_modulesnpminstalllibindex.js)
prefix=C:Program Filesnodejsnode_global
win32 x64 10.0.10586
registry=https://registry.npm.taobao.org
C:WINDOWSsystem32>ng -v
_ _ _
__ _ _ __ __ _ _ _ | | __ _ _ __ ___ | |(_)
/ _` || '_ / _` || | | || | / _` || '__|_____ / __|| || |
| (_| || | | || (_| || |_| || || (_| || | |_____|| (__ | || |
__,_||_| |_| __, | __,_||_| __,_||_| ___||_||_|
|___/
angular-cli: 1.0.0-beta.28.3
node: 7.5.0
os: win32 x64
C:WINDOWSsystem32>tsc -v
Version 2.1.6
C:WINDOWSsystem32>
创建项目
1、管理员打开cmd,进入到存放工程的目录下执行以下命令(PROJECT_NAME为您的项目名称,随意)。这里须注意下,由于没有翻墙,如果直接用$ng new PROJECT_NAME项目会创建失败,所以这里创建项目也用到了cnpm:
$ng new PROJECT_NAME --skip-npm
$cd PROJECT_NAME
$cnpm install
2、启用项目,浏览器输入 http://localhost:4200/
,看是否看到app work!
$ng serve
3、至此,一个Angular2项目已经搭建完成,生成的文档结构如图。
组件、模块、路由
angular-cli提供了生成component、Module及Routet的方法,命令以 ng generate 开头,可以缩写为 ng g,下面给出创建 component 的几种方式。
ng generate component my-new-component
ng g component my-new-component # using the alias
# components support relative path generation
# if in the directory src/app/feature/ and you run
ng g component new-cmp
# your component will be generated in src/app/feature/new-cmp
# but if you were to run
ng g component ../newer-cmp
# your component will be generated in src/app/newer-cmp
下表里是所有的命令:
Scaffold
usage
Component
ng g component my-new-component
Directive
ng g directive my-new-directive
Pipe
ng g pipe my-new-pipe
Service
ng g service my-new-service
Class
ng g class my-new-class
Interface
ng g interface my-new-interface
Enum
ng g enum my-new-enum
Module
ng g module my-module
添加组件Component
在cmd窗口执行命令,将自动添加对应的组件及添加依赖。
$ng g component home
$ng g component about
添加模块Module
执行添加模块命令,注意新添加的文件区别。
$ng g module home
$ng g module about
添加模块后,模块文件夹下多了一个home.module.ts文件。
实现路由
这部分,我们将实现简单的页面懒加载,达到按需加载页面目的。页面懒加载的好处这里不再描述,具体可参考相关资料。在上节中,我们已经在项目中添加了两个组件,我们可以认为这两个组件就是两个页面,所以在下面,我们来实现点击超连接跳转到相应的页面。
打开项目的根模块app.module.ts页面,可以看到,在我们用命令添加组件的时候,已经自动将home跟about两个组件添加的依赖。但这里,我们假定about这个组件默认没有绑定,需要懒加载,那么就需要把AboutComponent依赖去除。下面代码是实现路由的方法
图片说明:Routes里面有三个数组,第一个表示系统默路由认指定的页面home;第二个表示当路由为/home时指定的页面,第三个则表示按需加载about页面。配置根模块,还不能实现页面切换,下面添加UI元素。
接下来配置about.module.ts模块
启动项目,在浏览器里查看结果如下
至此,项目就已经实现按需加载页面了。
引入 Angular MATErial2
在上部分中,组件、模块与路由都添加了,实现了页面的切换,那现在我们来引用Material2这个样式框架,首先在项目中安装这个插件。
npm install --save @angular/material
在项目的根模块中(src/app/app.module.ts
)引用这个框架。
接着,在src/style.css
文件中,引用框架的样式。
@import '~@angular/material/core/theming/prebuilt/deeppurple-amber.css';
在src/index.html
中添加字符图标的样式
<link href="https://fonts.GOOGLEapis.COM/icon?family=Material+Icons" rel="stylesheet">
最后,我们在src/app/home/home.component.html
中添加必要的元素
<button md-button>FLAT</button>
<button md-raised-button>RAISED</button>
<button md-icon-button>
<md-icon class="md-24">favorite</md-icon>
</button>
<button md-fab>
<md-icon class="md-24">add</md-icon>
</button>
<button md-mini-fab>
<md-icon class="md-24">add</md-icon>
</button>
<br/>
<br/>
<button md-raised-button color="primary">PRIMARY</button>
<button md-raised-button color="accent">ACCENT</button>
<button md-raised-button color="warn">WARN</button>
<br/>
<br/>
<button md-button disabled>OFF</button>
<button md-raised-button [disabled]="isDisabled">OFF</button>
<button md-mini-fab [disabled]="isDisabled"><md-icon>check</md-icon></button>
刷新页面,我们将看到这些变化,代表你已经成功引入这个material2样式框架。
总结
本文所实例的例子虽然简单,但已经明确了angular2框架实现的一般思路。通过本例子,希望大家也能很容易上手angular2开发。在下一篇中,将分享下创建基于angular2的移动项目构建方法(ionic2+cordova)
参考资料
以上是脚本宝典为你收集整理的Angular2学习笔记一(之Hello world)全部内容,希望文章能够帮你解决Angular2学习笔记一(之Hello world)所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。