学习参考原文：https://segmentfault.com/a/1190000000350125
1. 使用bower安装angular和bootstrap（具体bower的使用参考上一篇 http://www.cnblogs.com/LinSL/p/7119773.html）
$ bower install angular $ bower install bootstrap
2. 在项目文件下创建index.html，应用angular，具体实例如下：
（1）
1 <!-- 以字符串数组的形式使用数据 -->
2 <!DOCTYPE html>
3 <html ng-app>
4 <head>
5 <title>Bookshop</title>
6 <meta charset="utf-8">
7 <link rel="stylesheet" type="text/css" href="bower_components/bootstrap/dist/css/bootstrap.mim.css">
8 </head>
9 <body>
10 <div class="container" ng-init="books=[‘Effective Java‘,‘Year without Pants‘,‘Confessions of public speaker‘,‘JavaScript Good Parts‘]">
11 <h2>Your online Bookshop</h2>
12 <ul class="unstyled">
13 <li ng-repeat="book in books">
14 {{book}}
15 </li>
16 </ul>
17 </div>
18 <script type="text/javascript" src="bower_components/angular/angular.min.js"></script>
19 </body>
20 </html>
(2)
1 <!-- 以存储对象的方式使用数据 -->
2 <!DOCTYPE html>
3 <html ng-app>
4 <head>
5 <title>Bookshop</title>
6 <meta charset="utf-8">
7 <link rel="stylesheet" type="text/css" href="bower_components/bootstrap/dist/css/bootstrap.mim.css">
8 </head>
9 <body>
10 <div class="container" ng-init="books=[{‘name‘:‘book1‘,‘author‘:‘linshuling‘},{‘name‘:‘book2‘,‘author‘:‘linshuling‘},{‘name‘:‘book3‘,‘author‘:‘linshuling‘},{‘name‘:‘book4‘,‘author‘:‘linshuling‘}]">
11 <h2>Your online Bookshop</h2>
12 <ul class="unstyled">
13 <li ng-repeat="book in books">
14 <span>{{book.name}} written by {{book.author}}</span>
15 </li>
16 </ul>
17 </div>
18 <script type="text/javascript" src="bower_components/angular/angular.min.js"></script>
19 </body>
20 </html>
（3）
1 <!-- 使用过滤器，利用过滤器来大写作者姓名和按书名来排序-->
2 <!DOCTYPE html>
3 <html ng-app>
4 <head>
5 <title>Bookshop</title>
6 <meta charset="utf-8">
7 <link rel="stylesheet" type="text/css" href="bower_components/bootstrap/dist/css/bootstrap.mim.css">
8 </head>
9 <body>
10 <div class="container" ng-init="books=[{‘name‘:‘book1‘,‘author‘:‘linshuling‘},{‘name‘:‘book3‘,‘author‘:‘linshuling‘},{‘name‘:‘book4‘,‘author‘:‘linshuling‘},{‘name‘:‘book2‘,‘author‘:‘linshuling‘}]">
11 <h2>Your online Bookshop</h2>
12 <ul class="unstyled">
13 <li ng-repeat="book in books | orderBy:‘name‘">
14 <span>{{book.name}} written by {{book.author | uppercase}}</span>
15 </li>
16 </ul>
17 </div>
18 <script type="text/javascript" src="bower_components/angular/angular.min.js"></script>
19 </body>
20 </html>
（4）
1 <!-- 添加搜索过滤器，添加搜索输入的文本框，然后使用一个过滤器以限制搜索结果，如下： -->
2 <!DOCTYPE html>
3 <html ng-app>
4 <head>
5 <title>Bookshop</title>
6 <meta charset="utf-8">
7 <link rel="stylesheet" type="text/css" href="bower_components/bootstrap/dist/css/bootstrap.mim.css">
8 </head>
9 <body>
10 <div class="container" ng-init="books=[{‘name‘:‘book1‘,‘author‘:‘linshuling‘},{‘name‘:‘book3‘,‘author‘:‘linshuling‘},{‘name‘:‘book4‘,‘author‘:‘linshuling‘},{‘name‘:‘book2‘,‘author‘:‘linshuling‘}]">
11 <h2>Your online Bookshop</h2>
12 <input type="search" ng-model="criteria">
13 <ul class="unstyled">
14 <li ng-repeat="book in books | filter:criteria | orderBy:‘name‘">
15 <span>{{book.name}} written by {{book.author | uppercase}}</span>
16 </li>
17 </ul>
18 </div>
19 <script type="text/javascript" src="bower_components/angular/angular.min.js"></script>
20 </body>
21 </html>
（5）
1 <!-- 使用控制器 -->
2 <!DOCTYPE html>
3 <html ng-app="bookshop">
4 <head>
5 <title>Bookshop</title>
6 <meta charset="utf-8">
7 <link rel="stylesheet" type="text/css" href="bower_components/bootstrap/dist/css/bootstrap.mim.css">
8 </head>
9 <body>
10 <div class="container" ng-controller="BookCtrl">
11 <h2>Your online Bookshop</h2>
12 <input type="search" ng-model="criteria">
13 <ul class="unstyled">
14 <li ng-repeat="book in books | filter:criteria | orderBy:‘name‘">
15 <span>{{book.name}} written by {{book.author | uppercase}}</span>
16 </li>
17 </ul>
18 </div>
19 <script type="text/javascript" src="bower_components/angular/angular.min.js"></script>
20 <script type="text/javascript" src="app.js"></script>
21 </body>
22 </html>
app.js
angular.module(‘bookshop‘,[]).controller(‘BookCtrl‘,[‘$scope‘, function($scope){
$scope.books = [
{‘name‘:‘book4‘,‘author‘:‘linshuling‘},
{‘name‘:‘book3‘,‘author‘:‘linshuling‘},
{‘name‘:‘book2‘,‘author‘:‘linshuling‘},
{‘name‘:‘book1‘,‘author‘:‘linshuling‘},
]
}])
时间： 2024-10-08 23:09:16