选用TypeScript开发AngularJS2[通俗易懂]

选用TypeScript开发AngularJS2

大家好,又见面了,我是全栈君。

  AngularJS开发模式可以有多种方案,本人选择以下的方案目标解决下面几个目的:

     1. 强类型语言使用惯了,养成了一些习惯,在javascript这在弱类型语言开发中常常掉坑。

     2.面向对象的那套思维模式已经根深蒂固,javascript的面向对象是模拟实现的,好多地方绕不过弯在所难免。

        基于上面这两个理由,选择TypeScript语言,水到渠成。对于从java转到前台开发的人来说,简直是意外啊。

     3.前端模块化开发一直是我这样的懒人的理想。内心真实话是这样:javascript、css让界面渲染和控制数据分开,回归当年CS应用开发模式,或许也是萦绕心头很久的一种幻想吧。

     4.MVVM模式让前端进入有搞头的新时代。

 

简单写点攻略,抛砖引玉:

首先,TypeScript相关

     TypeScript仍然是一种解释型语言,TypeScript语言的源码编译后成了符合AngularJS2框架标准的Javascript代码,本质上就是要将TypeScript源码编译成Javascript代码。另外Nodejs是基于Chrome内核的,这样可能某些地方直接跳过javascript,直接调用Chrome内核的API也是有可能存在的。题外话,国内也出现了若干浏览器,什么QQ浏览器、UC浏览器等等,根据传闻也不过是拿了人家的内核,在此基础上构造了界面和小动作,然后就堂而皇之地吹起来说是国产浏览器了,这些都是狗皮膏药。有本事拿着HTMIL5、ES6等等标准实现一个自己的浏览器内核,那才是真正的浏览器。

     TypeScript语言的开发环境,首选当然是微软定身量做的Visual Code,毕竟TypeScript也是微软开源的一种语言嘛。说到这儿,很多事情就是明白的了,语言本身没有什么特别,只有好用不好用的区别,解析后的目标代码跟语言就没什么关联了,而目标代码调用的API后面依然可以是藏着很多密码的,如此,自己实现一遍浏览器的内核还是很有必要的。TypeScript的开发工具还可以选择Atom、Sublime Text等,详见:http://www.typescriptlang.org/index.html#download-links

 

    AngularJS用TypeScript开发,需要搭建一个脚手架。脚手架这个词用在这儿,最恰当不过了。因为它基于NodeJS环境开发、编译等,同时使用NodeJS生态里的各种工具,比如npm包管理工具等。因此要将这些基本环境(主要是一些配置文件)事先生成。常用的脚手架有Angular-SeedAngular-cli

     Angular-seed采用Gulp框架编译TypeScript,据说这个Gulp也是很牛叉的框架,采用非阻塞流来处理要编译源码字符流,有空确实要深入了解一下。

     Angular-cli是AngularJS框架原生的脚手架,并且当下似乎已经完成了1.0版本,然后移动到了@angular/cli中,和AngularJS融为一体了。因此安装Angular-cli的命令已经改成:

    

npm install -g @angular/cli

 

详情请看: https://github.com/angular/angular-cli

 

     脚手架搭建好,就可以正式干活。脚手架搭建运行如下命令:

    

    

ng new PROJECT-NAME
cd PROJECT-NAME
ng serve

   

     就这三板斧,新建你的工程,新建成功之后,文件夹下就有了各种配置文件,当然若觉得不够,则继续添加。

     另外,ng命令还可以自动新建模块、组件、指令等模板文件,当然也可以自己手工新建这些文件。详情请见: https://github.com/angular/angular-cli#generating-components-directives-pipes-and-services

    在OSCHINA的码云上开了一个项目,你可以直接克隆下来作为脚手架: https://git.oschina.net/dayu/angularjs2-lib-base

    若有更多想法,不妨提交上来大家共享共利之。

 

 

 

 

 

转载于:https://my.oschina.net/dayu6/blog/1093881

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请联系我们举报,一经查实,本站将立刻删除。

发布者:全栈程序员-站长,转载请注明出处:https://javaforall.net/108386.html原文链接:https://javaforall.net

(0)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • networkmanager和network区别_network graph

    networkmanager和network区别_network graph一、NetworkManager做了什么:NetworkManager确保网络连接正常。当检测到系统中没有网络配置但有网络设备时,NetworkManager会创建临时连接以提供连接。通过不同的工具(GUI,nmtui,nmcli)提供管理。NetworkManager可以配置网络别名,IP地址,静态路由,DNS信息和VPN连接,以及许多特定于连接的参数。重新启动后保持设备状态,并接管重新启动期间设置为受管模式的接口。未明确设置为不受管理但由用户或其他网络服务手动控制的设备。可以和netwo

    2022年9月1日
    0
  • Hybrid开发框架一、Weex

    Hybrid开发框架一、Weex前言最近开始试水Weex开发,使用这么长一段时间,感觉写Weex还是非常方便的。作为一个Android开发,免不了要追查一下weex的sdk源码。今天,就以WeexSDKforAndroid为例,分析SDK的认识WeexSDK源码https://github.com/alibaba/weex/tree/dev/android整体分析下拉,按照js文件的渲染过程,绘制出了下面…

    2022年9月22日
    0
  • iOS唯一标示符引导

    iOS唯一标示符引导

    2021年5月11日
    128
  • js判断数组中是否存在某个元素(四种方法)[通俗易懂]

    js判断数组中是否存在某个元素(四种方法)[通俗易懂]法一:利用indexOf不存在返回-1,存在返回第一次出现的索引//js检查数组中是否包含某个元素//法一indexOfvararr=[100,20,50,58,6,69,36,45,78,66,45]if(arr.indexOf(66)==-1){console.log(“不存在”)}else{console.log(“存在,索引是:”,arr.indexOf(6.

    2022年10月19日
    0
  • this指针的原理

    this指针的原理讲解this指针的原理是个很复杂的问题,如果我们从javascript里this的实现机制来说明this,很多朋友可能会越来越糊涂,因此本篇打算换一个思路从应用的角度来讲解this指针,从这个角度理解this指针更加有现实意义。  下面我们看看在java语言里是如何使用this指针的,代码如下:复制代码publicclassPerson{privateStringname;priva

    2022年5月17日
    51
  • 关于maven打包时, 资源文件没有被打包进来的问题

    关于maven打包时, 资源文件没有被打包进来的问题在之前的一篇文章mybatis看这一篇就够了当中,提到过,在使用mybatis时,有时候需要把编写了SQL语句的XML文件,和Java类文件放在一起,如如果不加配置,用maven进行打包时,默认不会将src/main/java目录下的XML文件打包进去。因为src/main/java被设定为了源码目录,默认只会将其中的Java文件进行编译打包。即,默认打包得到的结果如下可以看到com.example.mp.mappers包下没有XML文件我们可以配置pom.xml中的resources标签,指定

    2022年5月29日
    59

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注全栈程序员社区公众号