Angularjs1.0环境搭建

参考文档链接，如果觉得月笙之说的不清楚，请直接看以下链接：

http://www.angularjs.cn/A08q

https://sanwen8.cn/p/2443KV1.html

http://www.2cto.com/kf/201607/523822.html

第一步：安装Node.js，开发工具采用WebStorm或者sublime

从 http://nodejs.org/download/ 为你的 操作系统 下载一个 Node.js  安装器。

通过下面的命令检查下你安装的Node.js的版本：

node --version

第二步：下载seed-master骨架，AngularJS Seed-master的地址：https://github.com/glitchtank/angular-seed-master

第三步：将其下载到本地后解压缩，然后运行如下命令：

node scripts/web-server.js

可以通过以下方式访问应用程序：

这个应用程序虽然简单，但它涵盖了AngularJS开发过程中会使用的各个功能，例如service、detective、filter等。

需要重点查看的是app/js目录：

app.js的内容如下：

'use strict';

// Declare app level module which depends on filters, and services

angular.module('myApp', ['myApp.filters', 'myApp.services', 'myApp.directives']).

  config(['$routeProvider', function($routeProvider) {

    $routeProvider.when('/view1', {templateUrl: 'partials/partial1.html', controller: MyCtrl1});

    $routeProvider.when('/view2', {templateUrl: 'partials/partial2.html', controller: MyCtrl2});

    $routeProvider.otherwise({redirectTo: '/view1'});

  }]);

我们可以看到，myApp模块依赖myApp.filter、myApp.services和myApp.directives。并且通过routeProvider对访问路由进行了配置。

controllers.js的内容如下：

'use strict';

function MyCtrl1() {}

MyCtrl1.$inject = [];

function MyCtrl2() {

}

MyCtrl2.$inject = [];

driectives.js的内容如下：

'use strict';

angular.module('myApp.directives', []).

  directive('appVersion', ['version', function(version) {

    return function(scope, elm, attrs) {

      elm.text(version);

    };

  }]);

filters.js的内容如下：

'use strict';

angular.module('myApp.filters', []).

  filter('interpolate', ['version', function(version) {

    return function(text) {

      return String(text).replace(/\%VERSION\%/mg, version);

    }

  }]);

sevices.js的内容如下：

'use strict';

// Demonstrate how to register services

// In this case it is a simple value service.

angular.module('myApp.services', []).

  value('version', '0.1');

附相关可以了解的知识：

AngularJS Seed提供了一个典型的AngularJS应用程序的骨架，我们可以在它的基础上进行开发。其实很多项目组的开发都会采用 angular-seed或者 angular- phonecat骨架。

AngularJS Seed 可以快速启动你的 AngularJS webapp 项目和这些项目的开发环境。AngularJS Seed 包括一个示例 AngularJS 应用，预配置安装 Angular 框架，为满足即时 Web 开发提供一些开发和测试工具。Seed 应用只是展示如何连接两个控制器和视图。

AngularJS Seed-master的地址：https://github.com/glitchtank/angular-seed-master

AngularJS Seed的地址:   https://github.com/angular/angular-seed

github上的几个project，有好奇心和专研心的亲们可以看看，它们分别是：

• https://github.com/angular/angular-seed
• https://github.com/zhangdiwaa/angular-coffee-AMD-seed
• https://github.com/elsom25/angular-requirejs-html5boilerplate-seed
• https://github.com/mz121star/NJBlog （一个使用Mongodb+Nodejs+express+angularjs写的博客程序）
• https://github.com/zhangdiwaa/ng-grid（一个基于angularjs写的grid插件）

有的人按照功能模块重组了一下，我个人更倾向于把功能模块的js和html放到同一个文件夹，如下，

按照功能模块去组织文件夹。最终，我的目录是这么排列的：

• build/(工程目录)
  • css/
  • img/
  • js/
    • appAdmin/ (独立模块，以app名字开头，各app模块内容近似)
      • controller/ (相关的子模板的controller.js存放在这里)
      • directives/ (相关的directive.js存放在这里)
      • admin_app.js (app模型定义和路由配置文件)
      • admin_main.js (requirejs的入口和配置文件)
      • admin_services.js (app的相关服务配置文件)
    • appCustomer/
    • appHelpdesk/
    • appRepairer/
    • appLogin/
    • common/ (通用模块库)
      • angular_filter/ (一些通用的过滤器)
      • common_plugin.js (一些非基于angular的但比较重要组件，例如console plugin)
    • utils/ (其他组件)
  • lib/ (包含所有第三方类库)
  • templete/ (子模板文件夹，其内容按模块类型分类)
    • common/
    • tplAdmin/
    • tplCustomer/
    • tplHelpdesk/
    • tplRepairer/
  • 404.html
  • admin.html (admin模块的入口html)
  • customer.html (customer模块的入口html)
  • helpdesk.html (helpdesk模块的入口html)
  • login.html (login模块的入口html)
  • index.html (程序的总入口点，用以根据配置跳转到各个模块入口)
  • repairer.html (repairer模块的入口html)
• node_modules/ (grunt)
• src/ (未经grunt处理的源文件)
• test/ (端到端测试)
• gruntfile.js (grunt)
• human.txt
• package.json (grunt)
• README.md