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。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 详解Angular 开发环境搭建

    Angular 是一款开源 JavaScript 框架,由Google 维护,用来协助单一页面应用程序运行的.它的目标是增强基于浏览器的应用,使开发和测试变得更加容易.目前最新的 Angular 版本是 v4.2.3 开始搭建 Angular 开发环境 搭建 Angular 开发环境需要的步骤: Node.js 配置 npm Angular CLI 安装 Node.js 下载安装Node.js,下载最新的 LTS 版本即可,目前最新的版本是 v6.11.0 LTS 配置 npm 安装好 Node

  • .Net Core+Angular Cli/Angular4开发环境搭建教程

    .Net Core+Angular Cli/Angular4开发环境搭建教程

    一.基础环境配置 1.安装VS 2017 v15.3或以上版本 2.安装VS Code最新版本 3.安装Node.js v6.9以上版本 4.重置全局npm源,修正为 淘宝的 NPM 镜像: npm install -g cnpm --registry=https://registry.npm.taobao.org 5.安装TypeScript cnpm install -g typescript typings 6.安装 AngularJS CLI cnpm install -g @angul

  • 详解webpack+angular2开发环境搭建

    刚搭建完一个webpack+angular2环境,由于angular及webpack官网上没有一个折中的搭建方案,所以只能摸索着搭建,中间遇到一些坑,遂总结记录下来,以供交流. 搭建完后的项目初步环境如下: app ----app.component.ts ----app.module.ts ----main.ts index.html package.json tsconfig.json webpack.config.js app.componnet.ts:组件文件.angular2应用是由组

  • AngularJS入门教程之学习环境搭建

    学习AngularJS的一个好方法是逐步完成本教程,它将引导您构建一个完整的AngularJS web应用程序. 该web应用是一个Android设备清单的目录列表,您可以筛选列表以便查看您感兴趣的设备,然后查看设备的详细信息. 本教程将向您展示AngularJS怎样使得web应用更智能更灵活,而且不需要各种扩展程序或插件. 通过本教程的学习,您将: 1.阅读示例学习怎样使用AngularJS的客户端数据绑定和依赖注入功能来建立可立即响应用户操作的动态数据视图. 2.学习如何使用AngularJ

  • AngularJs入门教程之环境搭建+创建应用示例

    AngularJs入门教程之环境搭建+创建应用示例

    本文简单讲述了AngularJs环境搭建+创建应用的方法.分享给大家供大家参考,具体如下: 概述 AngularJS是Google工程师研发的一款JS框架,官方文档中对它的描述是,它是完全使用JavaScript编写的客户端技术,同其他历史悠久的Web技术(HTML,CSS等)配合使用,使得Web开发变得更简单.更高效.它是笔者用过的比较有特色的一款框架,以HTML作为模版语言并扩展HTML属性,使得应用组件开发保持高度的清晰和一致.本系列文章將以实际的案例简单的介绍AngularJs的特性和用

  • 详解.Net Core + Angular2 环境搭建

    本文介绍了.Net Core + Angular2 环境搭建,具体如下: 环境搭建: 1)node.js版本>5.0,NPM版本>3.0,TypeScript版本>2.0(全装最新版就好了) 2)安装NTVS 1.2(node tools for vs),TSVS dev 1.4(TS for VS) 3)构建package.json,tsconfig.json,gulp.js文件 1.package.json { "name": "template.ang

  • AngularJS整合Springmvc、Spring、Mybatis搭建开发环境

    AngularJS整合Springmvc、Spring、Mybatis搭建开发环境

    最近想学习AngularJS的使用,网上搜了一圈后,折腾了半天解决bug后,成功使用AngularJS整合Springmvc.Spring.Mybatis搭建了一个开发环境.(这里Spring使用的版本是4.0.6,Mybatis版本是3.2.5,AngularJS的版本是1.0.3) 第一步:创建一Maven项目,在pom.xml下添加需要的包 <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="

  • 详解Angular CLI + Electron 开发环境搭建

    本文介绍了Angular CLI + Electron 开发环境搭建,分享给大家 用 @angular/cli 配合 Electron 构建桌面软件开发环境,可以在 Electron 中使用 Angular 的各种特性,使开发桌面软件像开发网站一样简单.快捷,而且可以模块化,紧跟最新技术趋势. 安装 Angular CLI 和 Electron 首先使用 npm 安装 Angular Cli: $ npm i -g @angular/cli 然后安装 Electron $ npm i -g el

  • Angular2从搭建环境到开发步骤详解

    Angular2从搭建环境到开发步骤详解

    Angular-CLI 说到 cli 大家不陌生,每出一个框架都会有对应的 cli ,俗称脚手架.angular2 本身提供了起步项目 angular2-quickstart,我尝试了一下,发现不是很好用,其它的大部分扩展需要自行安装,之后看了一下 angular-cli 部署简单易用,还提供了快捷搭建项目的目录. 安装 首先,最好先升级 node 到 6.x 可以避免 node 版本过低带来的不必要的麻烦. npm install -g angular-cli 用法 ng --help 查看所

  • Angular4学习笔记之准备和环境搭建项目

    Angular4学习笔记之准备和环境搭建项目

    写在前面的废话1 我用angular的时候还是1.x,属于代码写的很反人类但是angular2还没出的蛮荒年代.我本身是从j2ee转到Android的工程师,也是就是说,我的日常开发语言是Java.突然切换到JavaScript那真是难受的像北极熊同企鹅讲话,更何况后来嫌webstorm太卡而用起了没有提示的sublime(嗯,终于治好了多年顽疾的"从不记函数名症候群").经过了一段痛苦不堪的撞墙经历后,总算是开始习惯了. 但我还是想大吼一声,JavaScriptWCNM. 发泄完了说

  • Laravel框架学习笔记（一）环境搭建

    Laravel框架学习笔记（一）环境搭建

    为什么选择laravel框架,是因为laravel框架目前是Php最流行的框架,深入研究后发现和asp.net mvc框架在功能上基本上是伯仲之间.只是各自的实现方法不同. php在windows下的开发环境搭建 1.下载php地址http://windows.php.net/download/注意相关版本,我的服务器用的iis7.5 32 系统 VC11 x86 Non Thread Safe 解压之后放到相应的目录,配置php.ini文件,这里注意里面的dll启用的相关配置,这个网上有也不多

  • Angular4学习笔记之实现绑定和分包

    Angular4学习笔记之实现绑定和分包

    本文介绍了Angular4学习笔记之实现绑定和分包,分享给大家,希望对大家有帮助 src目录下的app/app.component.ts文件是一个标准的angular4组件的结构. 上面@component()括号内template属性里用`(这个符号不是单引号,而是键盘1左边.tab键上面的那个符号)包裹的是View,下面export的class部分是Controller. 希望实现的效果长这个样子: 万里长征第一步,先从修改View开始. 修改temlate里的HTML文件,改成下面的样子:

  • springboot学习笔记之 profile多环境配置切换的实现方式

    前言 一个应用程序从开发到上线,往往需要经历几个阶段,例如开发.测试.上线.每个阶段所用到的环境的配置可能都是不一样的,Springboot 应用可以很方便地在各个环境中对配置进行切换.所以,今天主要介绍Springboot profiles实现多环境配置切换. profiles多环境配置切换的四种方式 多个配置文件的方式yml 多文档块方式 设置程序参数 设置虚拟机参数 1.多个配置文件的方式 1.1.修改application.properties server.port=8080 1.2.

  • PHP学习笔记 （1） 环境配置与代码调试

    一配置PHP环境 1.了解什么是PHP PHP("PHP: Hypertext Preprocessor",超文本预处理器的字母缩写) PHP,是英文超级文本预处理语言Hypertext Preprocessor的缩写.PHP 是一种 HTML 内嵌式的语言,是一种在服务器端执行的嵌入HTML文档的脚本语言,语言的风格有类似于C语言,被广泛的运用 2.PHP的背景和优势 PHP的发展背景 1).1994年由Rasmus Lerdorf创建,开始是一个简单的Perl语言编写的程序,用统计

  • Angular4学习笔记之新建项目的方法

    Angular4我自己还在摸索学习中,这个系列中的笔记会不定期修改和更新-- 一.安装nodejs(下面方式 二选一,个人推荐第二种) 1.nodejs官网下载安装 2.使用nvm安装管理(具体方式参照我的另一篇) 二.全局安装angular-cli npm install -g @angular/cli 三.进入一个存放项目的文件夹,运行以下代码,初始化项目 ng new <项目名> 四.启动项目 cd <项目名> npm install ng serve 附: 1.引入jQue

  • CI框架学习笔记（一） - 环境安装、基本术语和框架流程

    CI框架学习笔记（一） - 环境安装、基本术语和框架流程

    最开始使用CI框架的时候,就打算写一个CI源码阅读的笔记系列,可惜虎头蛇尾,一直没有行动.最近项目少,总算是有了一些时间去写一些东西.于是准备将之前的一些笔记和经验记录下来,一方面权作备忘,另一方面时刻提醒自己:借鉴和学习才有出路,忘记过去意味着背叛!基本术语说明 在本文开始之前,有必要对文中反复出现的术语做一个简单的说明,如果你对这一部分已经熟谙,完全可以略过.本文中反复出现和提及的术语包括: 前端控制器(Front Controller): 用于集中控制用户的所有请求的组件,将用户的请求发送

  • Angular4学习笔记之根模块与Ng模块

    根模块 (root module) 每个应用都至少有一个根模块用来引导并运行应用.根模块通常命名为 AppModule. 示例 src/app/app.module.ts import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { AppComponent } from './app.component'; @NgModule({ imp

  • Android学习笔记（一）环境安装及第一个hello world

    Android学习笔记（一）环境安装及第一个hello world

    开发环境 安装JDK和JRE 下载安装文件并安装: jdk-8u11-windows-i586.exe jre-8u11-windows-i586.exe 使用google提供的adt-bundle,直接解压到本地即可使用,使用版本如下: adt-bundle-windows-x86-20131030.zip 第一个android工程 打开eclipse如下图所示: 新建工程 新建一个工程,取名为FirstApp,使用默认设置 . File->New->Android Application

  • Angular4学习笔记router的简单使用

    router,也就是路由,是前端中一个比较重要的概念.通过router把特定的地址和对应的页面关联后分离出来,以达到解耦的目的.在src/app目录下新建一个detail的文件夹,建立一个名为gundam-detail.component的文件. import { Component } from '@angular/core'; import { Gundam } from '../../model/gundam'; @Component({ template: ` <div *ngIf=&quo

随机推荐