angularJs如何搭建web專案？ angularjs搭建web專案的詳細介紹
- 寻∝梦原創
- 2018-09-08 14:38:111994瀏覽
這篇文章主要的介紹了關於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作為我們系統的存取入口網站文件，當然他是我們首先要編寫的文件。
<!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="'views/common/menu.html'"></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中文網其他相關文章！