[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