AngularJS开发环境搭建，出hello word

原文

从接触AngularJS到现在已经有1年多的时间期间已经用这个框架开发了大大小小的好几个项目，参考了其他一些项目的结构模版和自己摸索尝试，从一开始项目结构错乱复杂到现在我自认为是比较良好的结构划分，现在整理成一个系列留作团队培训内容和分享，如果有更好的方案欢迎一起研究讨论。
我们以一个简单的新闻管理系统作为引子从无到有的创建一个基于angularjs框架的系统，第一篇我们先从创建一个angularjs的框架开始。系列中包含gulp、bower、sass极angular中的指令、服务、过滤器、拦截器的使用，我们使用sublime text3 作为开发编辑器。
这个系列的github地址：https://github.com/chenfengjw163/angular-news.git

在github上创建angular-news项目后在本地clone：
  • 1
  • 1
git clone https://github.com/chenfengjw163/angular-news.git

用sublime 打开：

好了，我们开始吧！

gulp、bower和sass安装

如果使用过gulp和bower的同学可以跳过下面的文字到下一步。
gulp、bower和sass不知道什么东西的同学自行google。
下面我们来简单介绍下如何安装：
安装nodejs：https://nodejs.org/en/download/
sass则需要安装ruby环境：http://www.w3cplus.com/sassguide/install.html
安装好之后命令行执行：
  • 1
  • 1
npm -v
  • 1
  • 1
ruby -v

显示版本号就表示安装成功了，接下来执行：
  • 1
  • 1
npm install -g bower
  • 1
  • 1
npm install -g gulp

安装bower和gulp。

因为这个项目我们会用到gulp构建工具和bower管理所以我们先初始化gulp和bower的配置在项目目录下打开命令行，执行:
  • 1
  • 1
gulp init

和
  • 1
  • 1
bower init

根据提示填写信息完成之后两个工具的配置文件就创建完毕了。
接下来我们安装一些npm工具：
  • 1
  • 1
npm install --save gulp-concat gulp-connect gulp-sass

gulp-concat用于合并文件、gulp-connect用于创建一个web调试环境、gulp-sass用于编译sass文件。
和一些bower依赖包：
  • 1
  • 1
bower install --save angular angular-resource angular-ui-router bootstarp jquery

ps：如果安装慢或者直接不能安装的情况，则用vpn链接看看。
安装好之后我们项目目录下会多出两个文件夹：bower_components和node_moudules分别是bower和gulp工具的安装目录。

在根目录下创建scss文件夹作为我们sass源文件（后缀名.scss）目录和www作为我们的开发资源目录。
www中我们创建以下文件夹把开发文件分类：
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
bower_components node_moudules www ——css #sass源文件编译为css文件的存放目录 ——directive #angular指令的存放目录 ——img #图片资源文件 ——js #公共js脚本文件目录 ——views #页面极页面js文件 ——index.html #angular应用的启动页面 gulpfile.js #gulp构建任务文件 package.json #npm项目文件 bower.json #bower项目文件

文件夹创建好了，我们在根目录创建一个gulpfile.js文件作为gulp的任务列表，任务执行编译sass文件、合并js文件和实现livereload，并编辑以下内容，如果不了解gulp task写法的可以自己去了解下：
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
var gulp = require('gulp'),connect = require('gulp-connect'),concat = require('gulp-concat'); sass = require('gulp-sass'); //connect任务开启一个web调试服务，访问http://localhost:8080 gulp.task('connect',function () { connect.server({ port:8080,livereload: true }); }); //allJs任务，执行合并js任务 gulp.task('allJs',function () { //合并数组中所有的js文件为all.js放入www文件夹中 return gulp.src(['www/js/*.js','www/directive/*/*.js','www/views/*/*.js']) .pipe(concat("all.js")) .pipe(gulp.dest("www/")); }); //sass任务，执行编译sass任务 gulp.task('sass',function () { //编译scss文件把编译后的文件合并为css.css放入www/css文件夹中 return gulp.src(['scss/*.scss']) .pipe(sass().on('error',sass.logError)) .pipe(concat("css.css")) .pipe(gulp.dest("www/css")); }) //reload任务，在执行reload之前先执行allJs和sass任务 gulp.task('reload',['allJs','sass'],function () { //刷新web调试服务器 return gulp.src(['www/']) .pipe(connect.reload()); }) //watch任务，开启一个监控 gulp.task('watch',function () { //监控数组中文件的修改，如果有修改则执行reload任务 gulp.watch(['scss/*.scss','www/index.html','www/js/*.js','www/directive/*/*','www/views/*/*'],['reload']); }); //默认的gulp任务，直接执行gulp即可启动default，启动default前启动connect和watch任务 gulp.task('default',['connect','watch']);

OK准备工作已经差不多了，我们来编写index.html的内容：
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
<!DOCTYPE html> <html lang="en"> <head> <Meta charset="UTF-8"> <title>新闻发布</title> <script src="/bower_components/angular/angular.min.js"></script> <script src="/bower_components/angular-resource/angular-resource.min.js"></script> <script src="/bower_components/angular-ui-router/release/angular-ui-router.min.js"></script> <script src="all.js"></script> </head> <body ng-app="newsApp"> <div ui-view> </div> </body> </html>

引用了bower安装的资源文件和我们自己的all.js文件，在body上添加ng-app内容是angular的应用名，因为我们使用的是ui-router作为我们的路由管理我们需要使用ui-view指令作为内容页标签(如果使用angular默认的路由管理则是ng-view)。

所以我们的项目目录变成介个样子：

开启一个web调试服务只需要在项目下启动命令行执行：
  • 1
  • 1
gulp

打开http://localhost:8080/www我们只能看到一个空白的页面，因为我们还没有添加页面，我们接下来尝试添加一个测试页面看看。

在www/js目录下创建app.js作为angular的应用主文件，当然它最后也要被合并到all.js中去的！
app.js:
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
(function() { 'use strict'; angular.module('newsApp',[ 'ngResource','ui.router','newsApp.home' ]) .config(function($urlRouterProvider) { $urlRouterProvider.otherwise('/home'); }); })();

创建newsApp模块，引用ngResource和ui.router，分别是实现restful接口的服务和ui-router路由服务，newsApp.home则是我们自己创建的子模块。
.config中配置了路由默认的路径。

在www/views文件夹中创建home子功能文件夹并创建两个文件home.html和对应的home.js
home.html:
  • 1
  • 1
<p>Hello World!</p>

home.js:
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
(function () { 'use strict'; angular .module("newsApp.home",[]) .config(function ($stateProvider) { $stateProvider.state('home',{ url: '/home',controller: "homeCtrl",templateUrl: 'views/home/home.html' }) }) .controller("homeCtrl",homeCtrl); function homeCtrl ($scope) { } })();

大家可以看到home.js中创建了子模块newsApp.home并配置了一个名称为home路由它的对应的controller和模版页面。

当我们创建了这些文件后我们可以在www文件夹下看到一个自动生成的all.js文件，这就是我们通过gulp工具把我们所有分散在各个文件夹中的js合并后的js文件，这样的好处是我们在项目开发时可以根据不同的功能创建不同的目录把开发文件分类的很清楚清晰，也不需要在页面上引用这么多数量的文件，在gulp我们也可以增加处理步骤比如：混淆js、压缩js

我们不需要刷新页面我们就可以在页面上看到我们最熟悉的两个单词：
hello world～
OK，一个angular的框架已经搭建好了！

下一期我们将会演示如果使用angular开发具体的功能。

AngularJS开发环境搭建，出hello word的更多相关文章

  1. html5 拖拽及用 js 实现拖拽功能的示例代码

    这篇文章主要介绍了html5 拖拽及用 js 实现拖拽,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下

  2. amaze ui 的使用详细教程

    这篇文章主要介绍了amaze ui 的使用详细教程,本文通过多种方法给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下

  3. ios – Xcode警告：“没有处理文件的规则”和“找不到目录”

    重命名我的项目文件夹后,我收到以下错误消息：什么可能出错？解决方法关于第一个警告,您可以在项目设置中的“构建阶段”中检查XCode,即头文件不会出现在“编译源”列表中.

  4. 你如何将xcode项目转换为cocoapod？

    我有一段代码,我发现我在多个不同的项目中重复使用,所以我想把它变成一个cocoapod并使用私人cocoapod仓库.我的问题是如何将xcode项目设置为cocoapod？它应该是一个静态库还是一个带有appdelegate的空“项目”？

  5. ios – 如何将文件添加到主包的/ Library / Sounds目录中？

    根据Apple’sdocumentation,/Library/Sounds中的声音文件将在尝试播放声音时由系统搜索.如何将声音文件添加到此文件夹？适用于iOS的正确文档应为here总之,您只需将声音文件作为应用程序包的非本地化资源添加到项目中.

  6. ios – 资产目录与文件夹参考：何时使用其中一个？

    我可以将文件放入Assets.xcassets,或者我可以将文件放入文件夹引用.我何时会选择一个而不是另一个？

  7. ios – 从icloud备份中限制sqlite-wal和sqlite-shm

    我是第一次使用coredata,我必须从文档目录中的iCloud备份限制sqlitedb文件,我使用下面的代码完成了它//阻止iCloud备份文档目录文件夹现在我不明白的是,我们还需要从icloud备份中限制sqlite-wal和sqlite-shm文件,如果是,那么如何从icloud备份限制sqlite-wal和sqlite-shm文件我想要一个解决方案,而无需从文档目录文件夹中更改sqlitedb位置…

  8. iOS：如何从文档目录中删除具有特定扩展名的所有现有文件？

    当我更新我的iOS应用程序时,我想删除Documents目录中的任何现有sqlite数据库.现在,在应用程序更新时,我将数据库从软件包复制到文档目录,并通过附加软件包版本来命名它.因此,在更新时,我还想删除可能存在的任何旧版本.我只是希望能够删除所有sqlite文件,而无需循环浏览并查找以前版本的文件.是否有任何方法可以对removeFileAtPath：方法进行通配符？解决方法那么,你想要删除所有*.sqlite文件？

  9. .dylib在Debug中链接,在XCode中找不到适用于iPhone的版本

    所以我已经将libxml2.2.dylib库包含在我的iPhoneXCode项目中,以创建一些Xml和XPath解析实用程序.当我编译并运行在模拟器和设备的调试模式时,我没有问题,但是,当我切换到发布模式我得到…

  10. ios – 从文件目录加载UIImage

    我正在尝试从文件目录加载一个UIImage,并将其设置为UIImageView,如下所示：但是,每当我尝试以上,图像从不加载.该图像在Documents/MyAppCustomDirectory/school.png中.以上是否正确从该目录加载？我也尝试了其他几个：UIImageimageWithContentsOfFile,以及基于SO响应的其他方法.解决方法要获取您应该使用的文档目录：我不太清

随机推荐

  1. Angular2 innerHtml删除样式

    我正在使用innerHtml并在我的cms中设置html,响应似乎没问题,如果我这样打印：{{poi.content}}它给了我正确的内容：``但是当我使用[innerHtml]=“poi.content”时,它会给我这个html：当我使用[innerHtml]时,有谁知道为什么它会剥离我的样式Angular2清理动态添加的HTML,样式,……

  2. 为Angular根组件/模块指定@Input()参数

    我有3个根组件,由根AppModule引导.你如何为其中一个组件指定@input()参数？也不由AppModalComponent获取：它是未定义的.据我所知,你不能将@input()传递给bootstraped组件.但您可以使用其他方法来做到这一点–将值作为属性传递.index.html：app.component.ts：

  3. angular-ui-bootstrap – 如何为angular ui-bootstrap tabs指令指定href参数

    我正在使用角度ui-bootstrap库,但我不知道如何为每个选项卡指定自定义href.在角度ui-bootstrap文档中,指定了一个可选参数select(),但我不知道如何使用它来自定义每个选项卡的链接另一种重新定义问题的方法是如何使用带有角度ui-bootstrap选项卡的路由我希望现在还不算太晚,但我今天遇到了同样的问题.你可以通过以下方式实现：1)在控制器中定义选项卡href：2)声明一个函数来改变控制器中的散列：3)使用以下标记：我不确定这是否是最好的方法,我很乐意听取别人的意见.

  4. 离子框架 – 标签内部的ng-click不起作用

    >为什么标签标签内的按钮不起作用？>但是标签外的按钮(登陆)工作正常,为什么？>请帮我解决这个问题.我需要在点击时做出回复按钮workingdemo解决方案就是不要为物品使用标签.而只是使用divHTML

  5. Angular 2：将值传递给路由数据解析

    我正在尝试编写一个DataResolver服务,允许Angular2路由器在初始化组件之前预加载数据.解析器需要调用不同的API端点来获取适合于正在加载的路由的数据.我正在构建一个通用解析器,而不是为我的许多组件中的每个组件设置一个解析器.因此,我想在路由定义中传递指向正确端点的自定义输入.例如,考虑以下路线：app.routes.ts在第一个实例中,解析器需要调用/path/to/resourc

  6. angularjs – 解释ngModel管道,解析器,格式化程序,viewChangeListeners和$watchers的顺序

    换句话说：如果在模型更新之前触发了“ng-change”,我可以理解,但是我很难理解在更新模型之后以及在完成填充更改之前触发函数绑定属性.如果您读到这里：祝贺并感谢您的耐心等待！

  7. 角度5模板形式检测形式有效性状态的变化

    为了拥有一个可以监听其包含的表单的有效性状态的变化的组件并执行某些组件的方法,是reactiveforms的方法吗？

  8. Angular 2 CSV文件下载

    我在springboot应用程序中有我的后端,从那里我返回一个.csv文件WheniamhittingtheURLinbrowsercsvfileisgettingdownloaded.现在我试图从我的角度2应用程序中点击此URL,代码是这样的：零件：服务：我正在下载文件,但它像ActuallyitshouldbeBook.csv请指导我缺少的东西.有一种解决方法,但您需要创建一个页面上的元

  9. angularjs – Angular UI-Grid：过滤后如何获取总项数

    提前致谢：)你应该避免使用jQuery并与API进行交互.首先需要在网格创建事件中保存对API的引用.您应该已经知道总行数.您可以使用以下命令获取可见/已过滤行数：要么您可以使用以下命令获取所选行的数量：

  10. angularjs – 迁移gulp进程以包含typescript

    或者我应该使用tsc作为我的主要构建工具,让它解决依赖关系,创建映射文件并制作捆绑包？

返回
顶部