[Angularjs] 第一步開始一個專案

HuangJacky發表於2014-03-23
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





相關文章