这里有新鲜出炉的 AngularJS 开发指南,程序狗速度看过来!
AngularJS 诞生于 Google 是一款优秀的前端 JS 框架,已经被用于 Google 的多款产品当中。AngularJS 有着诸多特性,最为核心的是:MVC、模块化、自动化双向数据绑定、语义化标签、依赖注入,等等。
这篇文章主要介绍了 Angular4 学习笔记之准备和环境搭建项目,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
写在前面的废话 1
我用 angular 的时候还是 1.x,属于代码写的很反人类但是 angular2 还没出的蛮荒年代。我本身是从 j2ee 转到 Android 的工程师,也是就是说,我的日常开发语言是 Java。突然切换到 JavaScript 那真是难受的像北极熊同企鹅讲话,更何况后来嫌 webstorm 太卡而用起了没有提示的 sublime(嗯,终于治好了多年顽疾的 "从不记函数名症候群")。经过了一段痛苦不堪的撞墙经历后,总算是开始习惯了。
但我还是想大吼一声,JavaScriptWCNM。
发泄完了说正事。
现在前端的主要框架比较火的是 React,Angular 虽然背后是谷歌但还是差了那么一点。两者我都用过,说一下我感觉的 Angular 的特点,以及和 React 的不同。
首先直接拿 Angular 和 React 比较是不公平的。因为 Angular 是一个什么都有的全家桶,React 只是 MVC 里的 V,经常需要搭配一些别的东西使用比如 redux(我用的标配是 react+redux+router)。.
其次,Angular 的特点是绑定,从写代码的角度上说比较符合 MVC 的概念。4.0 里的 component 就相当于 C 和 V 的合体,template 或者 templateUrl 就是 view,而 class 就是所谓的 controller。通过在 Controller 里声明唯一的 Model 在对应的 View 里使用,达到解耦的目的。而且 Angular 还支持注入 service,进一步分离业务逻辑。
React 的特点其实是虚拟 dom,是提速性质的东西。Redux 才是逻辑相关,通过唯一的 state 来解耦,你换 state 我换值。两者的思路都是很相似的,个人感觉 Redux 里的 Reducer 就是 Angular 里的 service。
第三,哪个更好一点?我个人还是喜欢 React 更多,当然这个主观因素占了很大的层面。写 Angular 的时候我还是一副怨天尤人的 Android 程序员,写 React 的时候就是已经入门的前端开发者了。
写在前面的废话 2
一些准备工作,是必须的。
node,一切的基础。
sublime,这个是我个人使用的 ide。之前用过 webstorm,但是要注册而且多少有点慢。但是用 sublime 小缺点就是需要自己下插件,webstorm 确实功能全一点….subime 对 React 的支持还是蛮好的,但是对 Angular 的支持还是有点坑。当然,也可能是我插件没装对。
git,本项目已经提交到 github。当然,更新程度和我的懒惰程度成反比。其实这个项目我已经完成了,但是因为某种来自东方的神秘力量(直说了吧,就是手贱)又给删掉了…
英文好,非必须。但是英文好可以直接去看 angular 的官方网站就,传送门,翻墙的话速度快一些。Angular 的中文版还停留在 2.0,写法和 4.0 略有不同。
当然 4.0 和 2.0 其实也没差多少,至少比 2.0 和 1.x 之间的差距要小的多(滚蛋吧 scope)
废话说完了,之所以有 1 有 2 没有 3,是因为我觉得很多时候我只要犯二就可以了。
先说需求 - 任何没有需求的项目都是耍!流!氓!
需求很简单,也基本上是在模仿超级机器人大战的整备页面(没错我是个钢弹迷而且最近刚好正在玩机战 z)。
首先本项目包含 3 个页面:
1 主页
上半部展示的是项目说明,下半部筛选出 3 个机体并进行简单的说明。
2 机体列表页
机体展示,展示所有拥有的机体,包括名称和状态(为了防止图片侵权,用的都是我自己做的高达模型)。
3 机体详情页
从主页和详情页面点击任意一部机体都可以跳转到这个页面,主要介绍机体的各项参数,基本情况以及状态。
环境搭建
首先要有 node 以及 sublime,然后需要用 sublime 的 package manager 安装插件 typescript。
关于如何安装 node、sublime 的包管理器并下载插件请参见之前文章里的方法。
其次,可以用 sourceTree 或者命令行克隆地址:
1)angular 给的官方 quickstart
- https://github.com/angular/quickstart.git
2)我的改编后的版本,好处是集成了 webpack 和 sCSS,缺点就是写的比较乱而且不知道有什么坑。
- https://github.com/stormrabbit/gundam-meister.git
第三,npm install 安装各项依赖。
如果安装失败可以考虑用下 cnpm
cnpm:
- npm install -g cnpm --registry=http://r.cnpmjs.org
- npm install microtime --registry=http://r.cnpmjs.org --disturl=http://dist.cnpmjs.org
假装安装一下
运行命令 npm start
目录结构:
src/main.ts 项目的入口文件 暂时不需要修改
src/index.html 项目展示的 html,容器,相当于 java 的虚拟机,标签是自定义的 component 的标签化。
src/app/app.module.ts 项目的配置文件,所用的 component、注册的 service 以及以后会有的 routing 等等都会注册到这里。相当于 Android 的 mainfist.xml 文件。
src/app/component/appcomponent/app.component.ts 项目的第一个容器,也是项目的正式入口。相当于 java 中的 main 函数,Android 中的 MainActivity。当然也不是一定要叫这个名字,不过是一种约定俗成。其中 template 是 html 页面,相当于 view,class 相当于 controller。
访问 http://localhost:3000/,显示页面
环境搭建完毕,hello,world。
来源: http://www.phperz.com/article/17/0826/343896.html