用nodesjs+grunt+bower+angularjs搭建项目

最新推荐文章于 2024-06-20 20:20:21 发布

丑心疼

最新推荐文章于 2024-06-20 20:20:21 发布

阅读量121

点赞数

文章标签： json javascript ViewUI

原文链接：http://www.cnblogs.com/chenjy1225/p/9935889.html

版权

Build your own AngularJS

nodejs+npm

nodejs+npm安装配置

build project


$ mkdir myproject

$ cd myproject

创建npm配置文件package.json


// 生成默认`package.json`，`npm init`需要手动输入参数
$ npm init -y

package.json :


{
  "name": "myproject",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

grunt安装


// --save-dev 会将安装的添加到`package.json`中
$ npm install grunt --save-dev

手动创建grunt配置文件gruntfile.js


module.exports = function(grunt) {

  grunt.initConfig({
  
     //读取package.json文件
    pkg: grunt.file.readJSON('package.json')
    
  });
 
  grunt.loadNpmTasks('');
  grunt.registerTask('default', ['']);
 
};

安装grunt插件

get more


$ npm install [name] --save-dev

grunt-contrib-concat:合并文件
grunt-contrib-uglify:压缩文件
grunt-contrib-jshint:语法检查
grunt-contrib-watch:监听文件变化

package.json :


{
  "name": "myproject",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "grunt": "^1.0.3",
    "grunt-contrib-concat": "^1.0.1",
    "grunt-contrib-jshint": "^2.0.0",
    "grunt-contrib-uglify": "^4.0.0",
    "grunt-contrib-watch": "^1.1.0"
  }
}

配置gruntfile.js

gruntfile.js:


module.exports = function(grunt) {
 
  grunt.initConfig({
  
     //读取package.json文件
    pkg: grunt.file.readJSON('package.json'),
    
    //concat用来合并js文件
    concat: {
    },
     //uglify用来压缩js文件
    uglify: {
     },
    //jshint用来检查js代码规范
    jshint: { 
    },
    //watch用来监听文件，当文件发生变化时会执行tasks中指定的任务
    watch: {
    } 
  });
 
  grunt.loadNpmTasks('grunt-contrib-concat');
  grunt.loadNpmTasks('grunt-contrib-uglify');
  grunt.loadNpmTasks('grunt-contrib-jshint');
  grunt.loadNpmTasks('grunt-contrib-watch');
  grunt.registerTask('test', ['concat','uglify','jshint','watch']);
 
};

安装bower

bower跟npm在某种意义上相似，它是用来管理常用的js库的依赖的，比如jquery、 angularjs、bootstrap等


$ npm install bower -g

创建bower配置文件bower.json


$ bower init

bower.json :


{
  "name": "myproject",
  "description": "",
  "main": "",
  "license": "MIT",
  "homepage": "",
  "ignore": [
    "**/.*",
    "node_modules",
    "bower_components",
    "test",
    "tests"
  ]
}

创建一个.bowerrc文件


{  
  // 配置下载目标路径
  "directory": "libs"
}

安装requirejs、jquery、angularjs、bootstrap


$ bower install [name] --save

bower.json :


{
  "name": "myproject",
  "description": "",
  "main": "",
  "license": "MIT",
  "homepage": "",
  "ignore": [
    "**/.*",
    "node_modules",
    "bower_components",
    "test",
    "tests"
  ],
  "dependencies": {
    "requirejs": "^2.3.6",
    "angular": "angularjs#^1.7.5",
    "jquery": "^3.3.1",
    "bootstrap": "^4.1.3"
  }
}

创建requirejs配置文件config.js

config.js :

paths中添加我们要申明的模块，shim用来出来没有遵循requirejs规范的js库


requirejs.config({
  baseUrl: '/lib/public',
  paths: {
    app: 'app',
    jquery: 'lib/jquery/jquery',
    angular: 'lib/angularjs/angular'
  },
  shim: {
  }
});
requirejs(['app'], function(app) {
  app.hello();
});

添加app模块对应的app.js

app.js :


define([], function() {
  return {
    hello: function() {
      alert("hello, requirejs");
    }
  }
});

添加示例html

index.html :


<html>
<head>
  <script src="libs/requirejs/require.js" 
          data-main="config.js"></script>
</head>
<body>
  <div>Hello, world!</div>
</body>
</html>

安装live-server

用于搭建临时的服务，修改文件以后浏览器会自动刷新。


$ npm install -g live-server

运行项目


$ live-server

angularJS demo

angularJS并不是按requirejs的模块方式组织代码的，我们需要在config.js shim配置


shim: {
    angular : { exports : 'angular'}
}

使用angularJS,修改index.html和app.js

index.html :


<!DOCTYPE html>
<html ng-app="myApp">
<head>
  <script src="libs/requirejs/require.js" 
          data-main="config.js"></script>
</head>
<body ng-controller="myCtrl">
    my name：<input type="text" ng-model="name"/>
    <div>{{name}}</div>
</body>
</html>

app.js :


//定义名为myApp的模块
define("myApp",["angular"],function(angular){
    var myApp = angular.module("myApp",[]);
    return myApp;
});

config.js :


requirejs.config({
  baseUrl: './',
  paths: {
    myApp:'app',
    jquery: 'libs/jquery/jquery',
    angular: 'libs/angular/angular'
  },
  shim: {
      'angular' : { exports : 'angular'}
  }
});

require(['myApp'], function(myApp) {
  myApp.controller('myCtrl', function ($scope) {
        $scope.name = 'chenjy';
      });
});

AngularJS应用的最佳实践和风格指南

转载于:https://www.cnblogs.com/chenjy1225/p/9935889.html

丑心疼

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
用nodesjs+grunt+bower+angularjs搭建项目

Build your own AngularJSnodejs+npmnodejs+npm安装配置build project创建项目目录$ mkdir myproject$ cd myproject创建npm配置文件package.json// 生成默认`package.json`，`npm init`需要手动输入参数$ npm init -ypackage....
复制链接

扫一扫