萬盛學電腦網 >> 腳本專題 >> javascript >> 使用AngularJS創建單頁應用的編程指引
使用AngularJS創建單頁應用的編程指引
這篇文章主要介紹了使用AngularJS創建單頁應用的編程指引,AngularJS是一款高人氣的JavaScript庫,需要的朋友可以參考下
概述
單頁應用現在越來越受歡迎。模擬單頁應用程序行為的網站都能提供手機/平板電腦應用程序的感覺。Angular可以幫助我們輕松創建此類應用
簡單應用
我們打算創建一個簡單的應用，涉及主頁，關於和聯系我們頁面。雖然Angular是為創建比這更復雜的應用而生的，但是本教程展示了許多我們在大型項目中需要的概念。
目標
單頁應用
無刷新式頁面變化
每個頁面包含不同數據
雖然使用Javascript和Ajax可以實現上述功能，但是在我們的應用中，Angular可以使我們處理更容易。
文檔結構
- script.js
- index.html
- pages
----- home.html
----- about.html
----- contact.html
HTML頁面
這一部分比較簡單。我們使用Bootstrap和Font Awesome。打開你的index.html文件，然後我們利用導航欄，添加一個簡單布局。
?
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 <!-- index.html --> <!DOCTYPE html> <html> <head> <!-- SCROLLS --> <!-- load bootstrap and fontawesome via CDN --> <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" /> <link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.0.0/css/font-awesome.css" /> <!-- SPELLS --> <!-- load angular via CDN --> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js"></script> <script src="script.js"></script> </head> <body> <!-- HEADER AND NAVBAR --> <header> <nav class="navbar navbar-default"> <div class="container"> <div class="navbar-header"> <a class="navbar-brand" href="/">Angular Routing Example</a> </div> <ul class="nav navbar-nav navbar-right"> <li><a href="#"><i class="fa fa-home"></i> Home</a></li> <li><a href="#about"><i class="fa fa-shield"></i> About</a></li> <li><a href="#contact"><i class="fa fa-comment"></i> Contact</a></li> </ul> </div> </nav> </header> <!-- MAIN CONTENT AND INJECTED VIEWS --> <div id="main"> <!-- angular templating --> <!-- this is where content will be injected --> </div> <!-- FOOTER --> <footer class="text-center"> View the tutorial on <a href="http://scotch.io/tutorials/angular-routing-and-templating-tutorial">Scotch.io</a> </footer> </body> </html>在頁面超鏈接中，我們使用"#"。我們不希望浏覽器認為我們實際上是鏈接到about.html和contact.html。
Angular應用
模型和控制器
此時我們准備設置我們的應用。讓我們先來創建angular模型和控制器。關於模型和控制器，請查閱文檔已獲得更多內容。
首先，我們需要用javascript來創建我們的模型和控制器，我們將此操作放到script.js中：
?
1 2 3 4 5 6 7 8 9 10 11 // script.js // create the module and name it scotchApp var scotchApp = angular.module('scotchApp', []); // create the controller and inject Angular's $scope scotchApp.controller('mainController', function($scope) { // create a message to display in our view $scope.message = 'Everyone come and see how good I look!'; });接下來讓我們把模型和控制器添加到我們的HTML頁面中，這樣Angular可以知道如何引導我們的應用。為了測試功能有效，我們也會展示一個我們創建的變量$scope.message的值。
?
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 <!-- index.html --> <!DOCTYPE html> <!-- define angular app --> <html ng-app="scotchApp"> <head> <!-- SCROLLS --> <!-- load bootstrap and fontawesome via CDN --> <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" /> <link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.0.0/css/font-awesome.css" /> <!-- SPELLS --> <!-- load angular via CDN --> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.10/angular.min.js"></script> <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.10/angular-route.js"></script> <script src="script.js"></script> </head> <!-- define angular controller --> <body ng-controller="mainController"> ... <!-- MAIN CONTENT AND INJECTED VIEWS --> <div id="main"> {{ message }} <!-- angular templating --> <!-- this is where content will be injected --> </div>
