AngularJS——先导识(1)

学参考原文: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>

 AngularJS 1

 (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                 {{book.name}} written by {{book.author}}
15             </li>
16         </ul>
17     </div>
18     <script type="text/javascript" src="bower_components/angular/angular.min.js"></script>
19 </body>
20 </html>

  AngularJS 2

(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                 {{book.name}} written by {{book.author | uppercase}}
15             </li>
16         </ul>
17     </div>
18     <script type="text/javascript" src="bower_components/angular/angular.min.js"></script>
19 </body>
20 </html>

AngularJS,  AngularJS 3

(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                 {{book.name}} written by {{book.author | uppercase}}
16             </li>
17         </ul>
18     </div>
19     <script type="text/javascript" src="bower_components/angular/angular.min.js"></script>
20 </body>
21 </html>

  AngularJS 4

(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                 {{book.name}} written by {{book.author | uppercase}}
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'},
]
}])

 

 

相关文章