zoukankan      html  css  js  c++  java
  • Angular2.0快速开始

    目前Angular2.0开发者预览版已经发布,和Angular1.x相比,发生了很多颠覆性的变化,随后Angular2团队在官网上给出了一个5分钟快速开始的教程,用于编写一个hello world级别的ng2的web应用,但是由于其中涉及到的新东西比较多,变化较大,仅仅是搭建环境并运行这个环节就不是那么容易掌握,本文就是以Angular2官方的quickstart教程为基础,讲解如何搭建本地运行环境并编写一个hello world的ng2应用。

    首先,关于Angular2.0是什么以及有什么新特性,这里不做赘述,只进行浅显的陈述意义不大,随后我会写一系列Angular2的文章来详述这个话题,本文要做的是让大家快速在本地搭建Angular2的开发环境并编写应用。

    步骤一:通过git clone Angular2.0官方的一个hello world种子项目

    首先在本地创建一个文件夹,叫做ng2

    mkdir ng2
    cd ng2

    在这个文件夹中git clone

    git clone https://github.com/angular/quickstart.git hello2ng2

    这时候就会将这个种子项目克隆到本地

    在这个项目中,包含了如下的一些库:

    1)能够编译为ES5的Angular2的库;

    2)能够编译为ES5的rtts_assert库,这个库主要是一个JS运行时的类型断言库,它主要用在Traceur中,Traceur用来将ES6代码转化为浏览器或者Node可以理解的ES5代码;

    3)ES6的shim库,Angular是为下一代web应用开发而设计的,所以它的内部脚本语言是使用ES6,但是由于目前各种环境(浏览器或Node)暂不支持ES6的代码,所以需要一些shim机制让ES6写的代码能够转化为ES5形式并可以正常运行在浏览器中,在这个项目中,这些库包括Traceur(能够将ES6转化为ES5的编译器),ES6的模块加载器,SystemJs(通用模块加载器),zone.js以及通过Traceur的配置项定义的元数据注解。

    关于上面的这些库,在目前情况下没有必要深究,它们的功能就是为了让你在现有条件下(ES6还不被广泛支持)能够编写Angular2代码并运行在自己的环境上。

    到目前为止这个项目的文件结构应该是这样的(app目录是我自己后来加上去的,作用后面会讲)。

    可以看到在项目根目录下有一个gulpfile.js,说明这个种子项目是采用gulp作为构建工具的,所以要安装gulp.

    npm install -g gulp

    接着在项目的根目录hello2ng2目录下安装项目依赖项

    npm install

    这一步需要注意的是,由于网络原因,很可能失败,所以需要翻墙或者使用VPN。

    上一步成功之后,使用gulp中配置的默认task重新生成Angular2的项目和他的依赖项。

    gulp

    到目前为止,我们算是已经搭建好了Angular2的环境,下面可以编写代码了。

    由于Angular2.0是采用ES6编写,所以需要对ES6有一个大致了解,这里推荐两个学习地址,ES6新特性ES6入门

    接着我们在项目根目录hello2ng2下建立一个app目录,用于存放我们编写的代码,然后创建一个index.html,内容如下:

     1 <!DOCTYPE html>
     2 <html>
     3 <head lang="en">
     4     <meta charset="UTF-8">
     5     <title>Angular 2 Hello World!</title>
     6     <script src="../dist/es6-shim.js"></script>
     7 </head>
     8 <body>
     9 <my-app></my-app>
    10 <script>
    11     System.paths={
    12         'angular2/*':'../angular2/*.js',
    13         'rtts_assert/*':'../rtts_assert/*.js',
    14         'app':'app.es6'
    15     };
    16     System.import('app');
    17 </script>
    18 </body>
    19 </html>

    在第6行加入es6的shim库文件,然后在11到15行通过配置SystemJS的一些加载项来加载外部js文件,包括angular2相关js文件,rtts_assert库相关js文件,以及后面我们自己编写的app.es6文件,然后加载完成后在第16行开始这个application。第9行实际上就是我们使用Angular2编写的一个叫做my-app的组件,是不是很像Angular1.x中的directive?当然,在Angular2中编写组件更为简单。

    接着在app目录下新建一个app.es6文件,后缀名为es6表明它采用es6语法,文件内容如下:

     1 import {Component, Template, bootstrap} from 'angular2/angular2';
     2  
     3 // Annotation section
     4 @Component({
     5   selector: 'my-app'
     6 })
     7 @Template({
     8   inline: '<h1>Hello {{ name }}</h1>'
     9 })
    10  
    11 // Component controller
    12 class MyAppComponent {
    13   constructor() {
    14     this.name = 'World!';
    15   }
    16 }
    17  
    18 bootstrap(MyAppComponent);

    第一行采用es6的模块加载机制从angular2中加载三个模块,分别是Component,Template以及bootstrap(这里的bootstrap和Twitter的BootStrap没有关系,这里是用来启动Angular2应用的一个模块,在Angular1.x中也是有这个API的,只不过我们更愿意使用自动启动的ng-app).

    第4行和第7行使用注解(Annotation)来表明my-app这个组件的一些属性,第5行是它的选择器,第8行是它的模板即需要渲染成的html字符串。注解在ES6中是没有的,严格地讲,这个app.es6文件采用放入的是AtScript脚本,它是ES6的一个超集,在ES6的基础上添加了一些新的特性(比如说注解),通过编译之后能够生成ES6代码,它简化了ES6的代码的写法,它是Angular2团队专门为Angular研发的。关于它的介绍这里有一篇文章,然后在第12行到第16行定义了一个类来作为my-app这个组件的controller,相比于1,你会发现代码更为简洁,更为模块化和清晰(一个组件对应一个类),然后在第18行启动这个组件。它的作用就是在页面上渲染一个hello world的h1标题。

    到目前为止,我们已经编写了一个完整的组件,在Angular2中编写组件就是这么容易(想想Angular1.x中封装为directive 那种方式,窃喜啊),接下来可以运行这个ng2的web app了.

    运行需要web服务器,在node环境下,安装一个简易的web服务器

    进入到项目根目录,安装web服务器并启动它

    npm install http-server -g
    http-server

    然后就可以在本地http://localhost:8080/app/下查看结果了。

    到目前为止,我们已经能够编写并运行一个Angular2的应用程序了,在后面,我会写一系列文章来揭示Angular2到底有哪些新特性以及如何使用。

  • 相关阅读:
    记一次对网站的SEO优化改造
    pc端页面添加响应式布局
    linux开启coredump
    vue中鼠标事件
    垂直居中的几种方法
    最准确的身份证号码正则验证
    将数组[NaN ,1,21,32,NaN,41,5]里面的NaN成员剔除(复用underscore.js的filter方法)
    项目中使用Mockjs模拟数据
    研究生学习与生活(2019)
    研究生学习与生活(九)
  • 原文地址:https://www.cnblogs.com/myzhibie/p/4667210.html
Copyright © 2011-2022 走看看