AngularJS——初步认识
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了AngularJS——初步认识相关的知识，希望对你有一定的参考价值。
学习参考原文：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‘}, ] }])
以上是关于AngularJS——初步认识的主要内容，如果未能解决你的问题，请参考以下文章