使用AngularJS,Browserify和Grunt开发web应用
发布在前端模块化工具研究2014年4月2日view:11237
在文章任何区域双击击即可给文章添加【评注】!浮到评注点上可以查看详情。

enter image description here

使用AngularJS,Browserify和Grunt开发web应用

创建一个项目

首先,创建一个文件夹来包含项目文件并在其中初始化package.json文件:

mkdir mysite && cd mysite  
npm init  

接下来,安装开发过程中的依赖模块,在后面的开发过程中,你需要通过Grunt来运行Grunt和Browserify:

npm i grunt grunt-browserify grunt-contrib-copy --save-dev

到目前为止,NPM中依然没有Angular的官方模块,于是我们选择使用napa来安装Angular:

npm i napa --save-dev  

接下来你需要在package.json文件中添加以下字段:

{
  "scripts": {
    "install": "napa"
  },
  "napa": {
    "angular": "angular/bower-angular",
    "angular-route": "angular/bower-angular-route"
  }
}  

现在,任何时候只要你运行npm install,他都会帮助你将AngularJS安装到node_modules/angular/文件夹中,同时将Angular Route安装到node_modules/angular-route/中。

目录结构

现在我们根据angular-seed的例子来设置目录结构。依照下面的目录结构图创建你的目录:

|- app/
|--- css/
|----- app.css
|--- js/
|----- app.js
|--- partials/
|----- partial1.html
|----- partial2.html
|--- index.html
|- Gruntfile.js
|- package.json   

Gruntfile

接下来你需要编写Gruntfile.js文件:

module.exports = function(grunt){
    grunt.initConfig({
        browserify: {
        js:{
        src: 'app/js/app.js',
        dest: 'dist/js/app.js'
        },  
    },
    copy:{
    all:{
    expand: true,
    cwd: 'app/',
    src: ['**/*.html','**/*css'],
    dest: 'dist/'
        },
    }
    });

    grunt.loadNpmTasks('grunt-browserify');
    grunt.loadNpmTasks('grunt-contrib-copy');

    grunt.registerTask('defuault',['browserify','copy']);
}

创建应用

现在我们要开始来创建应用了,先从index.html开始:

<!doctype html>

<html lang="en" ng-app="myApp">
<head>
  <meta charset="utf-8">
  <title>My AngularJS App</title>

  <link rel="stylesheet" href="css/app.css"/>
</head>
<body>

  <ul class="menu">
    <li><a href="#/view1">view1</a></li>
    <li><a href="#/view2">view2</a></li>
  </ul>


  <div ng-view></div>


  <script src="js/app.js"></script>
</body>
</html>  

让Angular和Browserify协同工作真是太简单了。只需要在app/js/app.js中添加下面内容:

    require('angular/angular');
    require('angular-route/angular-route');


angular.module('myApp', ['ngRoute']).config(['$routeProvider', function($routeProvider) {

  $routeProvider.when('/view1', {templateUrl: 'partials/partial1.html'});
  $routeProvider.when('/view2', {templateUrl: 'partials/partial2.html'});
  $routeProvider.otherwise({redirectTo: '/view1'});
}]);  

只需要这样就搞定了!现在你可以通过点击或导航到#/view1金额#/view2来载入app/partials中的内容。

创建一个简单的Angular service

下面我们来创建两个简单的Angular模块:

首先在app/js/service.js中添加以下内容:

angular.module('myApp.services', []).
  value('version', '0.1');  

接下来在app/js/filters.js中添加以下内容:

angular.module('myApp.filters', []).
  filter('interpolate', ['version', function(version) {
    return function(text) {
      return String(text).replace(/\%VERSION\%/mg, version);
    }
  }]);  

最后把这两个js文件都包含到app/js/app.js中:

require('angular/angular');

require('./services');
require('./filters');

angular.module('myApp', ['myApp.filters', 'myApp.services'])
  .config(['$routeProvider', function($routeProvider) {
    $routeProvider.when('/view1', {templateUrl: 'partials/partial1.html'});
    $routeProvider.when('/view2', {templateUrl: 'partials/partial2.html'});
    $routeProvider.otherwise({redirectTo: '/view1'});
  }]);

然后你就可以再app/partials/partial1.html中使用前面定义的过滤器了:

<p>This is the partial for view 2.</p>
<p>
  Showing of 'interpolate' filter:
  {{ 'Current version is v%VERSION%.' | interpolate }}
</p>  

全局函数

将一个全局函数绑定为一个控制器并不是一个好主意,因为它可能会污染命名空间。但是在Browserify中完全不需要担心这件事。放心的将函数添加到window全局对象即可。创建app/js/HelloController.js文件并添加以下内容:

window.HelloController = function($scope) {
  $scope.dude = 'AngularJS';
};  

在你的app/index.html中使用这个控制器即可:

<div ng-controller="HelloController">
  Hi {{dude}}!
</div>  

最后在app/js/app.js文件中添加你的控制器:

require('./HelloController');  

总结

本文讲述了AngularJS、Browserify和Grunt的基本用法,除此之外,你还可医生用grunt-contrib-connect和grunt-contrib-watch来让文件的修改自动反映到最终使用的文件上。


本文译自AngularJS, Browserify and Grunt,原文地址http://dontkry.com/posts/code/angular-browserify-grunt.html#continuing-with-angularjs

如果你觉得本文对你有帮助,请为我提供赞助 https://me.alipay.com/jabez128

评论
发表评论
4年前

开发时,试试 https://github.com/island205/browserify-loader 也不错!

WRITTEN BY
张小俊128
Intern in Baidu mobile search department。认真工作,努力钻研,期待未来更多可能。
TA的新浪微博
PUBLISHED IN
前端模块化工具研究

介绍前端模块化工具的基础知识和使用方式

我的收藏