大多时候,我们要学习一个新东西,不是不肯去学,而是不知道该如何开始。比如学angular,我要怎么开始学?怎么应用到自己项目中?这篇文章就是我根据自己边学习边应用,构建一个项目的切身体会,来讲下怎么开始一个angular项目,希望能帮到大家。

  首先,作为一个程序员,我们需要git,Github上那么多资源,有了git,我们可以更方便地下载各位大神的开源代码。

  其次,作为一个前端程序员,node这么火,我们难道不应该跟紧脚本,马上下载一个nodejs吗?

  既然前提软件已备好,gulp及angular是什么我就不讲了,只讲怎么用。

  1、全局安装gulp及bower

  打开windows控制台,快捷键win+R运行cmd

  

  确定后 运行npm install gulp -g

  

  安装完成后,运行 gulp -v 来确认是否安装完成。

  同理安装bower。

  2、规划文件目录结构

  文件目录的规划很重要,我这里规划如下:

  

  app:生产环境代码目录,partials下放路由的页面,temp下放指令引用的模板文件;

  src:源代码目录;

  vendor:第三方插件目录;

  index.html:入口html文件。

  

  js目录根据模块划分,而不是根据controller/filter/service来划分,这样会非常清晰,什么功能模块的代码在哪里。common为公用模块,所有模块都可复用的东西。

  建议文件目录的规划根据实际情况来。

  3、使用gulp

  打开windows控制台,cd到这个文件夹的src目录下

  

  win10可以如上图,在src下按住shift键,鼠标在空白处右击,选中在此处打开命令窗口。

  win7可以敲命令

  然后运行npm init

  

  接下来的选项可以按Enter键,都默认。完成后可以看到src目录下多了个package.json文件。

  

  接下来在src目录下手动新建一个gulpfile.js文件,注意名字不能错。

  接下来需要在src目录下,运行 npm install gulp --save-dev。这命令的意思是将gulp作为开发环境的依赖项安装在此项目中。

  由于我们需要很多gulp工具,比如拼接js的工具,压缩代码的工具,代理服务的工具等等。此处我们只写个小小的例子,只需要拼接js文件的工具“gulp-concat”,以及代理服务工具“gulp-webserver”等,到时发现工具少了再安装,哈哈哈。

  运行 npm install gulp-concat gulp-webserver --save-dev 。安装完成后,可以在src/package.json文件下看到变化。

  

  接下来,我们用gulp执行一个小任务。在gulpfile.js文件中编写如下代码:

  

  然后在命令窗口运行gulp

   

  会发现默认浏览器被打开,展示的就是index.html,这就是gulp-webserver启动了本地服务。gulp的工具怎么用,可以去npm官网查询。

  4、使用bower

  在src目录下运行bower init

  

  按enter键默认选项。完成后,可以看到src下有一个bower.json文件。

  接下来使用bower 安装 angular。执行 bower install angular --save

  安装成功后,可以在src/bower_components目录下看到angular插件。

  

  今天先做到这里,接下来的东西就是怎么用angular写代码,以及gulp具体怎么处理代码。

  

手把手教你怎么搭建angular+gulp的项目(一)的更多相关文章

  1. 手把手教你如何搭建iOS项目基本框架

    手把手教你如何搭建iOS项目基本框架 今天我们来谈谈如何搭建框架,框架需要做一些什么. 第一步:找到我们的目标我们的目标是让其他开发人员拿到手后即可写页面,不再需要考虑其他的问题. 第二步:我们需要做 ...

  2. 菜鸟-手把手教你把Acegi应用到实际项目中(8)-扩展UserDetailsService接口

    一个能为DaoAuthenticationProvider提供存取认证库的的类,它必须要实现UserDetailsService接口: public UserDetails loadUserByUse ...

  3. 手把手教你使用 Clion 开发 Linux C++ 项目

    手把手教你使用 Clion 开发 Linux C++ 项目 关于CLion CLion是一款专为开发C及C++所设计的跨平台IDE.它是以IntelliJ为基础设计的,包含了许多智能功能来提高开发人员 ...

  4. 菜鸟-手把手教你把Acegi应用到实际项目中(10)-保护业务方法

    前面已经讲过关于保护Web资源的方式,其中包括直接在XML文件中配置和自定义实现FilterInvocationDefinitionSource接口两种方式.在实际企业应用中,保护Web资源显得非常重 ...

  5. 手把手教你从零开始搭建SpringBoot后端项目框架

    原料 新鲜的IntelliJ IDEA.一双手.以及电脑一台. 搭建框架 新建项目 打开IDE,点击File -> New Project.在左侧的列表中的选择Maven项目,点击Next. 填 ...

  6. 手把手教 GitHub + Hexo 搭建博客

    前言 在很久以前,博主就想着要有自主的博客专栏或者网站.经历了博客园这个需要所谓的编辑审核,一直比较困惑,这些编辑是什么出身,怎么知道技术博客的价值性. 接下来找到了开源中国,这个可以自由发言的地方. ...

  7. 菜鸟-手把手教你把Acegi应用到实际项目中(11)-切换用户

    在某些应用场合中,我们可能需要用到切换用户的功能,从而以另一用户的身份进行相关操作.这一点类似于在Linux系统中,用su命令切换到另一用户进行相关操作.      既然实际应用中有这种场合,那么我们 ...

  8. 菜鸟-手把手教你把Acegi应用到实际项目中(12)-Run-As认证服务

    有这样一些场合,系统用户必须以其他角色身份去操作某些资源.例如,用户A要访问资源B,而用户A拥有的角色为AUTH_USER,资源B访问的角色必须为AUTH_RUN_AS_DATE,那么此时就必须使用户 ...

  9. 菜鸟-手把手教你把Acegi应用到实际项目中(7)-缓存用户信息

    首先讲讲EhCache.在默认情况下,即在用户未提供自身配置文件ehcache.xml或ehcache-failsafe.xml时,EhCache会依据其自身Jar存档包含的ehcache-fails ...

随机推荐

  1. Linux命令学习总结: file命令

    命令简介: 该命令用来识别文件类型,也可用来辨别一些文件的编码格式.它是通过查看文件的头部信息来获取文件类型,而不是像Windows通过扩展名来确定文件类型的. 执行权限 :All User 指令所在 ...

  2. AndroidManifest.xml详解(下)

    本文编辑整理自:http://blog.163.com/hero_213/blog/static/39891214201242835410742/ 八.第三层<activity-alias> ...

  3. Cookie对象工具包,对象添加,获取,修改-亲测可用

    先来了解下Cookie 和 Session对象的概念吧. 首先,Cookie是客户端缓存技术,大小一般为4kb左右,主要存储一些比较小的信息,常用的例子有用户名和密码,且是不安全的: Session是 ...

  4. Windows Phone 8.1 新特性 - 控件之FlipView

    本篇为大家介绍 Windows Phone 8.1 中新增的 FlipView 控件,它的中文名字叫做:翻转视图. 虽然听起来有点拗口,但是它的用途大家一定不会陌生.在 Windows Phone 8 ...

  5. best matched pair

    今天的模拟赛,被虐的不行....英文太差,弄不懂题意,弄懂题意了还不会... 感觉快要受不了了... #include <iostream> #include <cstdio> ...

  6. Java for LeetCode 153 Find Minimum in Rotated Sorted Array

    Suppose a sorted array is rotated at some pivot unknown to you beforehand. (i.e., 0 1 2 4 5 6 7 migh ...

  7. Java基础 —— CSS

    CSS:层叠样式表(Cascading Style Sheets) --> 提高显示功能,定义样式 html提供了div与span,只为了封装文本数据,div为一行数据,span为行内的数据. ...

  8. bzoj1042

    首先直接做多重背包肯定会TLE的, 观察这个背包问题有什么特殊性呢 物品种类和重量,价值是一定的,不同的是背包的容量和物品的数量 由于当物品数量没有限制的时候,方案数是可以预处理出来的 所以我们考虑用 ...

  9. Spring MVC中使用Mongodb总结

    近期项目做了次架构调整,原来是使用MySQL+GeoHash来存储LBS数据(地理位置信息),现在使用NOSQL数据库MongoDB来存储LBS数据(地理位置信息).由于项目是基于spring MVC ...

  10. Subsets,Subsets II

    一.Subsets Given a set of distinct integers, nums, return all possible subsets. Note: Elements in a s ...