angularJs如何搭建web專案？ angularjs搭建web專案的詳細介紹

這篇文章主要的介紹了關於angularjs的一步一步的搭建web專案的情況，我們要想用angularjs搭建web專案就必須慢慢來，先看這篇文章吧

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作為我們系統的存取入口網站文件，當然他是我們首先要編寫的文件。

nbsp;html>


    <meta>
    <title></title>
    <link>


<p>
    </p><p>
        </p><p></p>
        <p></p>
    

<script></script>
<script></script>
<script></script>
<script></script>
<script></script>

程式碼解釋：

#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中文網其他相關文章！