单页应用现在越来越受欢迎。模拟单页应用程序行为的网站都能提供手机/平板电脑应用程序的感觉。Angular可以帮助我们轻松创建此类应用
简单应用
我们打算创建一个简单的应用，涉及主页，关于和联系我们页面。虽然Angular是为创建比这更复杂的应用而生的，但是本教程展示了许多我们在大型项目中需要的概念。
目标
单页应用
无刷新式页面变化
每个页面包含不同数据
虽然使用Javascript和Ajax可以实现上述功能，但是在我们的应用中，Angular可以使我们处理更容易。
文档结构
- script.js <!-- stores all our angular code -->
- index.html <!-- main layout -->
- pages <!-- the pages that will be injected into the main layout -->
----- home.html
----- about.html
----- contact.html
HTML页面
这一部分比较简单。我们使用Bootstrap和Font Awesome。打开你的index.html文件，然后我们利用导航栏，添加一个简单布局。
<!-- index.html --> <!DOCTYPE html> <html> <head> <!-- SCROLLS --> <!-- load bootstrap and fontawesome via CDN --> <link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" /> <link href="https://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="https://www.jb51.net/script.js"></script> </head> <body> <!-- HEADER AND NAVBAR --> <header> <nav> <div> <div> <a href="https://www.jb51.net/">Angular Routing Example</a> </div> <ul> <li><a href="#"><i></i> Home</a></li> <li><a href="#about"><i></i> About</a></li> <li><a href="#contact"><i></i> Contact</a></li> </ul> </div> </nav> </header> <!-- MAIN CONTENT AND INJECTED VIEWS --> <div> <!-- angular templating --> <!-- this is where content will be injected --> </div> <!-- FOOTER --> <footer> View the tutorial on <a href="https://scotch.io/tutorials/angular-routing-and-templating-tutorial">Scotch.io</a> </footer> </body> </html>
在页面超链接中，我们使用"#"。我们不希望浏览器认为我们实际上是链接到about.html和contact.html。
Angular应用
模型和控制器
此时我们准备设置我们的应用。让我们先来创建angular模型和控制器。关于模型和控制器，请查阅文档已获得更多内容。
首先，我们需要用javascript来创建我们的模型和控制器，我们将此操作放到script.js中：
// 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的值。
<!-- index.html --> <!DOCTYPE html> <!-- define angular app --> <html ng-app="scotchApp"> <head> <!-- SCROLLS --> <!-- load bootstrap and fontawesome via CDN --> <link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" /> <link href="https://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="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.10/angular-route.js"></script> <script src="https://www.jb51.net/script.js"></script> </head> <!-- define angular controller --> <body ng-controller="mainController"> ... <!-- MAIN CONTENT AND INJECTED VIEWS --> <div> {{ message }} <!-- angular templating --> <!-- this is where content will be injected --> </div>