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 npm@latest -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 angular-cli@latest
查看已安装全局包: 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> 标签指定路由的写法为:
// 主动路由跳转:路由名称,路由参数
<a href="#/user/88">Tom</a>
模块详解:module
在顶部使用import语句,导入模块或者组件需要使用的外部模块。在模块中需要使用自己创建的组件或者其他服务、指令,也需要import。import语句之后,使用@NgModule()语句描述本模块的元数据。
declarations:声明属于本模块的组件,每个组件必须在且仅在一个模块中声明。
imports:引入本模块中用到的模块,该模块是处于import语句引入的模块中。
providers:声明模块中使用的服务的提供者。
bootstrap:根模块中的引导组件,应用启动过程中,会创建这个数组中的组件并插入到HTML中,一般只有一个引导组件。
最后,使用export语句,创建模块的类并暴露出去。模块、组件只有暴露出去,其他的模块才能引用。
事件响应详解:
添加事件格式如下:(click)="onClickMe()"
<button (click)="onClickMe()" [ngClass]=”getMethod”>点击我!</button>
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 文件的其他脚本之前加载垫片库
<script src="node_modules/es6-shim/es6-shim.js"></script>
Appendix: package.json (注:JSON文件不支持注释,引用时请清除注释)
在npm的package.json文件中,指定我们需要使用的包,包列在dependencies和 devDependencies中。
{ "dependencies": { "angular2": "2.0.0-beta.0", "systemjs": "0.19.6", "es6-promise": "^3.0.2", "es6-shim": "^0.33.3", "reflect-metadata": "0.1.2", "rxjs": "5.0.0-beta.0", "zone.js": "0.5.10" }, "devDependencies": { "concurrently": "^1.0.0", "lite-server": "^1.3.1", "typescript": "^1.7.3" } }
在package.json中,包含可选的scripts配置节,我们可以定义一些有用的命令来执行开发和构建任务。建议的package.json中包含了一些常用脚本命令。
{
"scripts": {
"tsc": "tsc",
"tsc:w": "tsc -w",
"lite": "lite-server",
"start": "concurrent \"npm run tsc:w\" \"npm run lite\" "
}
}
Appendix: TypeScript configuration
添加一个TypgeScript配置文件tscofnig.json到我们的项目,在编译生成JavaScript的时候来指导编译器。
当noImplicitAny标志为false的时候,如果编译器不能根据变量的使用来推断变量的类型,直接默认为any 类型。这就是为什么称为"implicitly any"。
当noImplicitAny 标志为true的时候,TypeScript 编译器不能推断类型,它仍然生成JavaScript 文件,但是报告一个错误。
可以使用下面的标志来抑制它们: "suppressImplicitAnyIndexErrors":true
Appendix: SystemJS Configuration
SystemJS 加载应用和库模块,在index.html添加SystemJS配置
System.import 调用告诉SystemJS 导入boot文件boot是我们告诉Angular启动应用的地方我们同时也捕获和记录启动中的错误信息到控制台中。其它的模块或者由 Angular 自身或者由前面的模块加载。
Appendix: boot.ts
从 angular2/platform/browser 中导入 bootstrap 函数,bootstrap 用于引导Module启动应用。
Angular2教程资料:
W3cSchool: https://www.w3cschool.cn/angular2/
菜鸟教程: http://www.runoob.com/angularjs2/angularjs2-tutorial.html
Angular2 入门详解的更多相关文章
- Linq之旅:Linq入门详解(Linq to Objects)
示例代码下载:Linq之旅:Linq入门详解(Linq to Objects) 本博文详细介绍 .NET 3.5 中引入的重要功能:Language Integrated Query(LINQ,语言集 ...
- SQL注入攻防入门详解
=============安全性篇目录============== 本文转载 毕业开始从事winfrm到今年转到 web ,在码农届已经足足混了快接近3年了,但是对安全方面的知识依旧薄弱,事实上是没机 ...
- SQL注入攻防入门详解(2)
SQL注入攻防入门详解 =============安全性篇目录============== 毕业开始从事winfrm到今年转到 web ,在码农届已经足足混了快接近3年了,但是对安全方面的知识依旧薄弱 ...
- Quartz 入门详解
Quartz是OpenSymphony开源组织在Job scheduling领域又一个开源项目,它可以与J2EE与J2SE应用程序相结合也可以单独使用.Quartz可以用来创建简单或为运行十个,百个, ...
- Redis快速入门详解
Redis入门详解 Redis简介 Redis安装 Redis配置 Redis数据类型 Redis功能 持久化 主从复制 事务支持 发布订阅 管道 虚拟内存 Redis性能 Redis部署 Redis ...
- [转]SQL注入攻防入门详解
原文地址:http://www.cnblogs.com/heyuquan/archive/2012/10/31/2748577.html =============安全性篇目录============ ...
- 迈向angularjs2系列(2):angular2指令详解
一:angular2 helloworld! 为了简单快速的运行一个ng2的app,那么通过script引入预先编译好的angular2版本和页面的基本框架. index.html: <!DOC ...
- [置顶]
xamarin android toolbar(踩坑完全入门详解)
网上关于toolbar的教程有很多,很多新手,在使用toolbar的时候踩坑实在太多了,不好好总结一下,实在浪费.如果你想学习toolbar,你肯定会去去搜索androd toolbar,既然你能看到 ...
- 转:JAVAWEB开发之权限管理(二)——shiro入门详解以及使用方法、shiro认证与shiro授权
原文地址:JAVAWEB开发之权限管理(二)——shiro入门详解以及使用方法.shiro认证与shiro授权 以下是部分内容,具体见原文. shiro介绍 什么是shiro shiro是Apache ...
随机推荐
- tomcat7简单优化
生产环境下我们不应该使用root用户开启tomcat服务,所以为了安全起见,我们创建一个用户tomcat useradd tomcat passwd tomcat(密码也设为tomcat) 编辑tom ...
- 获取和设置用户id以及组id
#include<unistd.h> uid_t getuid(void); uid_t geteuid(void);//获取有效用户id gid_t getgid(void); gid_ ...
- Map的嵌套使用
Map嵌套Map: 例: AAA: Javas班: 001 熊大 002 熊二 Hdoop班 001 小猪猪 002 小菲菲 ★使用增强for循环遍历Set数组: import java.util.H ...
- MySQL中or与in
and和or mysql允许多个where子句,用and和or可以使用多个子句.and比or有更高的优先级.任何时候使用and和or都应使用圆括号操作符来明确的分组操作. in 圆括号在where子句 ...
- 线性代数笔记13——Ax=b的通解
关于最简行阶梯矩阵和矩阵秩,可参考<线性代数笔记7——再看行列式与矩阵> 召唤一个方程Ax = b: 3个方程4个变量,方程组有无数解,现在要关注的是b1b2b3之间满足什么条件时方程组有 ...
- netBeans 修改新建php文件头部注释模板
用Netbeans(版本8.2)写php配置模板,模板配置好,可以省很多事,方便开发,而且,显得很专业. 新建php文件时: <?php /** * Encoding : UTF-8 * Cre ...
- c++ 函数中的部分代码执行一次
编程时有时需要将一段代码中的某一块只执行一次: #include<iostream> using namespace std; int fun1(int a) { static bool ...
- win10:如何开启自带虚拟机
1.首先要找到控制面板,我们点开windows键,然后选择在所有应用中找到“Windows 系统”,打开之后,我们找到“控制面板”,打开. 2.打开控制面板之后,我们选择程序,如图示. 3 ...
- Digispark kickstarter + JoyStick 模拟鼠标
IDE:Arduino 1.0.4 一.线路连接 S-Y --> P5(A0) S-X --> P2(A1) S-K --> P0 VCC --> VCC GND --> ...
- 一:elasticsearch常用操作总结
索引 搜索 mapping 分词器 1.创建索引 http://192.168.65.131:9200/smartom_index 2.查看索引: http://192.168.65.131:9200 ...