Angular UI Codemirror 开源项目教程
1. 项目的目录结构及介绍
ui-codemirror/
├── README.md
├── bower.json
├── demo/
│ ├── index.html
│ └── main.js
├── dist/
│ ├── ui-codemirror.js
│ └── ui-codemirror.min.js
├──Gruntfile.js
├── package.json
└── src/
├── ui-codemirror.js
└── ui-codemirror.spec.js
- README.md: 项目说明文档。
- bower.json: Bower 包管理配置文件。
- demo/: 示例代码目录,包含
index.html
和main.js
。 - dist/: 编译后的文件目录,包含
ui-codemirror.js
和ui-codemirror.min.js
。 - Gruntfile.js: Grunt 任务配置文件。
- package.json: npm 包管理配置文件。
- src/: 源代码目录,包含
ui-codemirror.js
和测试文件ui-codemirror.spec.js
。
2. 项目的启动文件介绍
项目的启动文件位于 demo/index.html
。这个文件包含了 AngularJS 和 CodeMirror 的依赖,并引入了 main.js
文件来初始化 Angular 应用和 CodeMirror 实例。
<!doctype html>
<html ng-app="demo">
<head>
<title>ui-codemirror demo</title>
<link rel="stylesheet" href="http://codemirror.net/lib/codemirror.css">
<script src="http://codemirror.net/lib/codemirror.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.js"></script>
<script src="../dist/ui-codemirror.js"></script>
<script src="main.js"></script>
</head>
<body>
<div ng-controller="MainCtrl">
<textarea ui-codemirror ng-model="code" ui-codemirror-opts="editorOptions"></textarea>
</div>
</body>
</html>
3. 项目的配置文件介绍
- Gruntfile.js: 这个文件定义了项目的构建任务,包括代码压缩、测试等。
module.exports = function(grunt) {
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
uglify: {
options: {
banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n'
},
build: {
src: 'src/<%= pkg.name %>.js',
dest: 'dist/<%= pkg.name %>.min.js'
}
}
});
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.registerTask('default', ['uglify']);
};
- package.json: 这个文件包含了项目的元数据和依赖项。
{
"name": "ui-codemirror",
"version": "0.3.0",
"description": "AngularJS directive for CodeMirror",
"main": "dist/ui-codemirror.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"repository": {
"type": "git",
"url": "git+https://github.com/angular-ui/ui-codemirror.git"
},
"keywords": [
"angularjs",
"codemirror"
],
"author": "https://github.com/angular-ui/ui-codemirror/graphs/contributors",
"license": "MIT",
"bugs": {
"url": "https://github.com/angular-ui/ui-codemirror/issues"
},
"homepage": "https://github.com/angular-ui/ui-codemirror#read