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教程资料:

    http://angular2.axuer.com/

    https://www.angular.cn/

W3cSchool:    https://www.w3cschool.cn/angular2/

菜鸟教程:     http://www.runoob.com/angularjs2/angularjs2-tutorial.html

Angular2 入门详解的更多相关文章

  1. Linq之旅:Linq入门详解(Linq to Objects)

    示例代码下载:Linq之旅:Linq入门详解(Linq to Objects) 本博文详细介绍 .NET 3.5 中引入的重要功能:Language Integrated Query(LINQ,语言集 ...

  2. SQL注入攻防入门详解

    =============安全性篇目录============== 本文转载 毕业开始从事winfrm到今年转到 web ,在码农届已经足足混了快接近3年了,但是对安全方面的知识依旧薄弱,事实上是没机 ...

  3. SQL注入攻防入门详解(2)

    SQL注入攻防入门详解 =============安全性篇目录============== 毕业开始从事winfrm到今年转到 web ,在码农届已经足足混了快接近3年了,但是对安全方面的知识依旧薄弱 ...

  4. Quartz 入门详解

    Quartz是OpenSymphony开源组织在Job scheduling领域又一个开源项目,它可以与J2EE与J2SE应用程序相结合也可以单独使用.Quartz可以用来创建简单或为运行十个,百个, ...

  5. Redis快速入门详解

    Redis入门详解 Redis简介 Redis安装 Redis配置 Redis数据类型 Redis功能 持久化 主从复制 事务支持 发布订阅 管道 虚拟内存 Redis性能 Redis部署 Redis ...

  6. [转]SQL注入攻防入门详解

    原文地址:http://www.cnblogs.com/heyuquan/archive/2012/10/31/2748577.html =============安全性篇目录============ ...

  7. 迈向angularjs2系列(2):angular2指令详解

    一:angular2 helloworld! 为了简单快速的运行一个ng2的app,那么通过script引入预先编译好的angular2版本和页面的基本框架. index.html: <!DOC ...

  8. [置顶] xamarin android toolbar(踩坑完全入门详解)

    网上关于toolbar的教程有很多,很多新手,在使用toolbar的时候踩坑实在太多了,不好好总结一下,实在浪费.如果你想学习toolbar,你肯定会去去搜索androd toolbar,既然你能看到 ...

  9. 转:JAVAWEB开发之权限管理(二)——shiro入门详解以及使用方法、shiro认证与shiro授权

    原文地址:JAVAWEB开发之权限管理(二)——shiro入门详解以及使用方法.shiro认证与shiro授权 以下是部分内容,具体见原文. shiro介绍 什么是shiro shiro是Apache ...

随机推荐

  1. 代码分层之模拟servlet调用dao

    一:代码分层 com.guangming.dao 存放dao相关的类型 例如 StudentDAOImpl 处理 数据库的链接 存取数据com.guangming.servlet 存放servlet相 ...

  2. jquery trigger函数和triggerHandler函数的对照

    一句话的差别就是:trigger will bubbling jQuery events (not default DOM events) and triggerHnadler will not do ...

  3. Unity3D用户手册 学习

  4. c# AddMonths,你了解吗?

    AddMonths:找到对应月的day,如果没有则取最后一个day var d1 = new DateTime(2017, 6, 30); var d2 = d1.AddMonths(-1);//20 ...

  5. TypeScript 之 声明文件的结构

    https://www.tslang.cn/docs/handbook/declaration-files/library-structures.html 模块化库 一些库只能工作在模块加载器的环境下 ...

  6. 关于Adaboost算法

    我花了将近一周的时间,才算搞懂了adaboost的原理.这根骨头终究还是被我啃下来了. Adaboost是boosting系的解决方案,类似的是bagging系,bagging系是另外一个话题,还没有 ...

  7. Jenkins进阶-应用的远程部署(12)

    越来越多的公司部署需要实现自动化模式,大家的首选的工具就是Jenkins,下来介绍下通过Publish Over SSH Plugin插件实现远程部署: 一.安装插件Publish Over SSH ...

  8. LOJ 2743(洛谷 4365) 「九省联考 2018」秘密袭击——整体DP+插值思想

    题目:https://loj.ac/problem/2473 https://www.luogu.org/problemnew/show/P4365 参考:https://blog.csdn.net/ ...

  9. Eclipse提交代码到Spark集群上运行

    Spark集群master节点:      192.168.168.200 Eclipse运行windows主机: 192.168.168.100 场景: 为了测试在Eclipse上开发的代码在Spa ...

  10. 用Shell判断字符串包含关系的方法小结

     这篇文章主要给大家介绍了关于用Shell判断字符串包含关系的几种方法,其中包括利用grep查找.利用字符串运算符.利用通配符.利用case in 语句以及利用替换等方法,每个方法都给出了详细的示例代 ...