[Angularjs] 第一步开始一个项目

[Angularjs] 第一步开始一个项目

一、什么是angularjs

angularjs是2009年兴起的，目前由Google维护一个采用mvc模式的js框架，很多时候用来创建单页面应用。我也经常将其和phonegap一起来开发webapp。

二、Angularjs项目结构

通常代码可以这样：index.html

第一个js文件(angular.js)是核心文件，必须有。而其他angular-*.js都是功能文件，如果项目不需要使用到可以不引用的。

app.js文件是对angular应用的定义，本例中代码如下：

1 'use strict';
 2 
3 angular.module('interApp', [
4 'ngCookies',
5 'ngResource',
6 'ngSanitize',
7 'ngRoute'
8 ])
9  .config(function ($routeProvider) {
10  $routeProvider
11  .when('/', {
12  templateUrl: 'views/index.html',
13  controller: 'IndexCtrl'
14  }).when('/report', {
15  templateUrl: 'views/reports.html',
16  controller: 'ReportsCtrl'
17  }).when('/report/:id', {
18  templateUrl: 'views/report_detail.html',
19  controller: 'ReportDetailCtrl'
20  }).otherwise({
21  redirectTo: '/'
22  });
23  });

代码中定义了一个angular应用叫interApp,而且重定向了路由，example.com/index.html#/report 就会调用ReportsCtrl控制器，而对应的视图是views/reports.html。

上例中ReportsCtrl控制器的定义在最先的main.js文件。如下：

1 angular.module('interApp')
2  .controller('IndexCtrl',['$scope',function($scope){
 3 
4  }]).controller('ReportsCtrl',['$scope',function($scope){
5  (function(){//初始化的函数
6  $scope.people = {
7  nickname: 'HuangJacky',
8  img : 'http://localhost:63342/inter/app/images/logo.png',
9  score: 20,
10  website: 'http://huangjacky.com',
11  realname: 'Fiend Huang',
12  address: 'belford street 202,lodon,England',
13  telephone: '+861587083168'
14  }
15  })();
16  }]);

angularjs中各个文件相互的关系大致就是这样的了。

三、快速创建angularjs项目

目前创建一个angularjs项目可以分成手动和自动两种方法。

手动其实就是自己去下这些js文件，然后在html中添加相应的引用，然后创建app.js和控制器定义文件。

而自动创建一个项目的方法，我知道的有两种：

• angular-seed

• yeoman

angular-seed是github上面一个开源的项目，你只需要git clone一下，一个angular项目结构就有了，剩下来的事就是写控制器和视图，挺快捷的。

yeoman是一个工作流的自动化工具，不仅仅针对angularjs。当然使用前必须安装，而且它是基于nodejs的，因此请先安装好，然后在命令行中输入：

接着在命令行中输入yo 或者 yo angular，就会出现如图的效果：

四、参考

Angularjs:http://angularjs.org/

angular wiki:http://zh.wikipedia.org/wiki/AngularJS

angular-seed:https://github.com/angular/angular-seed

yeoman:http://yeoman.io/

angular常用教程：http://angularjs.cn/hots