Angular2 入门详解

Posted 2020-10-04

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Angular2 入门详解相关的知识，希望对你有一定的参考价值。

　　AngularJS 2 快速入门

npm是什么？ npm其实是Node.js Package Manager的简称，是Node.js包管理工具（package manager）

安装Node.js之后配置npm：

配置npm的全局模块的存放路径以及cache的路径:

查看全局模块路径：npm config get prefix

查看全局cache路径：npm config get cache

在NodeJs下建立"node_global"及"node_cache"两个文件夹:

npm config set prefix "D:\Program Files\nodejs\node_global"

npm config set cache "D:\Program Files\nodejs\node_cache"

　　　　安装相关环境:

设置淘宝镜像：

npm config set registry https://registry.npm.taobao.org -g

安装淘宝的npm镜像，安装之后可以使用cnpm替换npm执行命令：

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

更新npm: npm install [email protected] -g

键入命令： npm install express 回车等待安装express

键入命令： npm install jade 回车等待安装jade

键入命令： npm install mysql回车等待安装mysql

安装cli: npm install -g angular-cli

更新cli先卸载再安装： npm uninstall -g angular-cli npm cache clean

npm install -g [email protected]

查看已安装全局包： npm list -g --depth 0

　　第一个Angular 组件

组件是Angular中最基本的一个概念。一个组件包含一个视图-我们用来展示信息或者完成用户交互的页面。

技术上来讲，一个组件就是一个控制模板试图的类。

　　在Angular2中有三种类型的指令（Directive）

1. 组件 — 拥有模板的指令。

2. 结构型指令－通过添加和移除DOM元素来改变DOM结构的指令。例如：NgFor, NgIf

3. 属性型指令 - 改变元素显示和行为的指令。例如：NgStyle

　　指令的输入（Input）属性

如果属性出现在了模板表达式等号(=)的右侧，它就是一个源。如果它出现在了方括号([ ])中，并且出现在等号(=)的左侧，它就是一个目标。

　　组件详解：

exports使一个文件转变成一个模块。文件名（不包含扩展名）通常就是这个模块的名称。

import：当我们需要引入其他模块的时候，直接import进来就可以使用。

Componet：方法来定义一个组件的注解，这个方法需要引入 angular2/core 才可以使用

import {Component} from ‘angular2/core‘;

@Component：告诉Angular这个类是一个组件。里面的参数有两个selector 和 template.

selector: 创建的组件的名字，就像html标签的名字一样

template：控制这个组件的视图，告诉Angular怎么去渲染这个视图。

templateUrl: HTML模板，使用相对路径，./表示这个组件文件所在的当前目录，../表示上一级目录

styleUrls: HTML模板使用的样式表，可以有多个

样例：

@Component({

selector: ‘my-app‘,

template: ‘<h1>My First Angular 2 App</h1>‘，

templateUrl: ‘./app.component.html‘,

styleUrls: [‘app/app.component.css‘]，

})

在 html 中，用 <a> 标签指定路由的写法为:

// 主动路由跳转：路由名称，路由参数

　　模块详解：module

在顶部使用import语句，导入模块或者组件需要使用的外部模块。在模块中需要使用自己创建的组件或者其他服务、指令，也需要import。import语句之后，使用@NgModule()语句描述本模块的元数据。

declarations：声明属于本模块的组件，每个组件必须在且仅在一个模块中声明。

imports:引入本模块中用到的模块，该模块是处于import语句引入的模块中。

providers:声明模块中使用的服务的提供者。

bootstrap:根模块中的引导组件，应用启动过程中，会创建这个数组中的组件并插入到HTML中，一般只有一个引导组件。

最后，使用export语句，创建模块的类并暴露出去。模块、组件只有暴露出去，其他的模块才能引用。

　　事件响应详解：

添加事件格式如下：(click)="onClickMe()"

　　Angular用法：

1.数据绑定：ng-bind=""

2.Ng-click 点击事件 Ng-mouseover 鼠标移入事件

3.Ng-show:显示元素 Ng-hide隐藏元素

4.双向绑定：{{}} {{msg}}

5.页面元素显示与隐藏： ng-show 　　ng-hide

6.响应事件：ng-click　　ng-change

　　Appendices(附录)：

Appendix: Browser ES6 support

在index.html 文件的其他脚本之前加载垫片库

Appendix: package.json (注：JSON文件不支持注释，引用时请清除注释)

在npm的package.json文件中，指定我们需要使用的包，包列在dependencies和 devDependencies中。

 1 {
 2 
 3   "dependencies": {
 4 
 5     "angular2": "2.0.0-beta.0",
 6 
 7     "systemjs": "0.19.6",
 8 
 9     "es6-promise": "^3.0.2",
10 
11     "es6-shim": "^0.33.3",
12 
13     "reflect-metadata": "0.1.2",
14 
15     "rxjs": "5.0.0-beta.0",
16 
17     "zone.js": "0.5.10"
18 
19   },
20 
21   "devDependencies": {
22 
23     "concurrently": "^1.0.0",
24 
25     "lite-server": "^1.3.1",
26 
27     "typescript": "^1.7.3"
28 
29   }
30 
31 }