[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  }]);