1.前言

#angularjs作為現在大火的前端框架很是受歡迎，現在已經發布了2.0版本，我在這裡介紹的是我學習1.2.X以上版本的一些成果，2.0版本LZ也在學習中，等學成歸來再與大家一起交流學習。

2.簡單介紹AngularJs

#AngularJS的官方文件是這樣介紹它的。完全使用JavaScript編寫的客戶端技術。同其他歷史悠久的Web技術（HTML、CSS
和JavaScript）配合使用，讓Web應用開發比以往更簡單、更快速。

AngularJS主要用於建立單一頁面Web應用。它透過增加開發人員和常見網頁應用程式開發任務之間
的抽象級別，使建立互動式的現代網路應用變得更加簡單。詳見 AngularJs權威教學

下面講的內容是針對對AngularJs有一些了解的同學，不了解的同學可以先去看下權威教程。

3.程式設計

先看我們的專案檔案目錄：

3.1 index.html

# index.html作為我們系統的存取入口網站文件，當然他是我們首先要編寫的文件。

<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" href="css/bootstrap.css">
</head>
<body>
<p>
    <p>
        <p ng-include="&#39;views/common/menu.html&#39;"></p>
        <p ui-view></p>
    </p>
</p>
<script src="libs/angular.js"></script>
<script src="libs/angular-ui-router.js"></script>
<script src="app.js"></script>
<script src="module/first/firstController.js"></script>
<script src="module/second/secondController.js"></script>
</body>
</html>

登入後複製

程式碼解釋：

#ng-app表示angularjs作用的範圍，可以寫在html標籤上，例如p，我們通常是寫在html標籤頭上，代表整個html都受我們angularjs的作用。一般一個html只寫一個ng-app就夠了。（想看更多就到PHP中文網AngularJS開發手冊中學習）

ui-view表示路由，代表我url上的路徑對應的頁面都會顯示在這個p下面，p裡面不能寫內容，寫了也是無效的。

3.2 app.js

var app = angular.module('myApp',
    [
        'ui.router',
        'secondModule',
        'firstModule'
    ]);

app.config(function($stateProvider, $urlRouterProvider){
    $stateProvider
        .state('first', {
            url: '/first',
            templateUrl: 'views/first/first.html',
            controller: 'firstController'
        })
        .state('second', {
            url: '/second',
            templateUrl: 'views/second/second.html',
            controller: 'secondController'
        })

    $urlRouterProvider.otherwise('first')
})

登入後複製

首先我們先定義一個模組module，module的名字myApp要與index.html中ng-app的名字保持一致，[ ] 中註入要引用的模組，例如第一個是ui -view的模組名。 ###### ###然後我們開始呼叫config方法開始定義路由，要引用兩個服務提供者$stateProvider、$urlRouterProvider，然後呼叫$stateProvider的state方法定義每一條路由；$urlRouterProvider.otherwise('first')代表當url上出現的位址不是路由中定義過的就跳到first路由對應的頁面。 ############ 這篇文章到這就結束了（想看更多就到PHP中文網###AngularJS使用手冊###中學習），有問題的可以在下方留言提問。 ######

以上是angularJs如何搭建web專案？ angularjs搭建web專案的詳細介紹的詳細內容。更多資訊請關注PHP中文網其他相關文章！