全栈老司机roadmap笔记--------angular js(1)

  Angular Js

level 1:

Directives, used to bind the behavior

 

 Modules: container for all the angular application  

 

creat a module

treat this html as part of angular application, run this module when the html document loads.

 

Expressions

 1 <!DOCTYEP html>
 2 <!DOCTYPE html>
 3 <html ng-app = "store">
 4 <head>
 5     <title>day 1</title>
 6     <link rel = "stylesheet" type = "text/css" href="bootstrap.min.css"/>
 7     <script type = "text/javascript" src = "angular.min.js"></script>
 8     <script type = "text/javascript" src = "app.js"></script>
 9 </head>
10 <body>
11 
12 <p>
13     {{"hello" + "you"}}
14 </p>
15 </body>
16 </html>>
main.html
1 var app = angular.module('store', []);
app.js

－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－

 

level 2

How to get data by controller!

 

Controller 的具体概念是什么 还没太搞清楚！！！

定义app的行为，存放function和values 

 

 set gem as propority of our controller.

把数据放进controller里面 作为properity

 

attach controller to this element of our html

把controller 附加在html的一个object里面，比如这个是div

　

change corresponding part in html. Use expressions with cooresponding variables

通过controller－> product->properity  controller里面放置了product， 通过product拿到其的attribute

 

the scope of the controller is only in the dom(div) element

练习code：

 1 <!DOCTYPE html>
 2 <html ng-app="gemStore">
 3   <head>
 4     <link rel="stylesheet" type="text/css" href="bootstrap.min.css" />
 5     <script type="text/javascript" src="angular.min.js"></script>
 6     <script type="text/javascript" src="app.js"></script>
 7   </head>
 8   <body ng-controller = "StoreController as store">
 9     <div class="product row">
10     <h3> {{store.product.name}}        
11         <em class="pull-right"> {{store.product.price}} </em>
12       </h3>
13     </div>
14   </body>
15 </html>
index.html
1 (function(){
2   var gem = { name: 'Azurite', price: 2.95 };
3   var app = angular.module('gemStore', []);
4   app.controller("StoreController", function(){
5     this.product = gem;
6   });
7 })();
app.js

－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－

level3

在 gem里面设置canPurchase参数

what if we need to hide the prodocut when it is sold out:

 

 

how can we display mutiple 

use ng-repeat!

 

 

练习代码：

 1 <!DOCTYPE html>
 2 <html ng-app="gemStore">
 3   <head>
 4     <link rel="stylesheet" type="text/css" href="bootstrap.min.css" />
 5     <script type="text/javascript" src="angular.min.js"></script>
 6     <script type="text/javascript" src="app.js"></script>
 7   </head>
 8   <body class="container" ng-controller="StoreController as store">
 9     <div class="product row" ng-show = "store.product.canPurchase" ng-hide ="store.product.soldOut">
10       <h3>
11         {{store.product.name}}
12         <em class="pull-right">${{store.product.price}}</em>
13       </h3>
14       <button>Add to Cart</button>
15     </div>
16   </body>
17 </html>
index.html
 1 (function() {
 2   var app = angular.module('gemStore', []);
 3 
 4   app.controller('StoreController', function(){
 5     this.product = gem;
 6   });
 7 
 8   var gem = {
 9     name: 'Azurite',
10     price: 110.50,
11     canPurchase: false,
12     soldOut: true
13   };
14 })();
app.js

练习np－repeat

 1 <!DOCTYPE html>
 2 <html ng-app="gemStore">
 3   <head>
 4     <link rel="stylesheet" type="text/css" href="bootstrap.min.css" />
 5     <script type="text/javascript" src="angular.min.js"></script>
 6     <script type="text/javascript" src="app.js"></script>
 7   </head>
 8   <body class="container" ng-controller="StoreController as store">
 9     <div class="product row" ng-repeat = "product in store.products">
10       <h3>
11         {{product.name}}
12         <em class="pull-right">${{product.price}}</em>
13       </h3>
14     </div>
15   </body>
16 </html>
index.html
 1 (function() {
 2   var app = angular.module('gemStore', []);
 3 
 4   app.controller('StoreController', function(){
 5     this.products = gems;
 6   });
 7 
 8   var gems = [
 9     { name: 'Azurite', price: 2.95 },
10     { name: 'Bloodstone', price: 5.95 },
11     { name: 'Zircon', price: 3.95 }
12   ];
13 })();
app.js

 

 

－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－

level 4

｜（pipe） send the output of first expression to the second expression

 

more filters:

 

display image :

 循环，展示图片的练习：

 1 <!DOCTYPE html>
 2 <html ng-app="gemStore">
 3   <head>
 4     <link rel="stylesheet" type="text/css" href="bootstrap.min.css" />
 5     <script type="text/javascript" src="angular.min.js"></script>
 6     <script type="text/javascript" src="app.js"></script>
 7   </head>
 8   <body ng-controller="StoreController as store">
 9     <!--  Products Container  -->
10     <div class="list-group">
11       <!--  Product Container  -->
12       <div class="list-group-item" ng-repeat="product in store.products">
13         <h3>
14           {{product.name}}
15           <em class="pull-right">{{product.price | currency}}</em>
16         </h3>
17         <!-- Image Gallery  -->
18         <div class="gallery">
19           <img ng-src = "{{product.images[0]}}"/>
20             </div>
21         </div>
22       </div>
23     </div>
24   </body>
25 </html>
index.html
 1 (function() {
 2   var app = angular.module('gemStore', []);
 3 
 4   app.controller('StoreController', function(){
 5     this.products = gems;
 6   });
 7 
 8   var gems = [{
 9       name: 'Azurite',
10       description: "Some gems have hidden qualities beyond their luster, beyond their shine... Azurite is one of those gems.",
11       shine: 8,
12       price: 110.50,
13       rarity: 7,
14       color: '#CCC',
15       faces: 14,
16       images: [
17         "images/gem-02.gif",
18         "images/gem-05.gif",
19         "images/gem-09.gif"
20       ],
21       reviews: [{
22         stars: 5,
23         body: "I love this gem!",
24         author: "joe@example.org",
25         createdOn: 1397490980837
26       }, {
27         stars: 1,
28         body: "This gem sucks.",
29         author: "tim@example.org",
30         createdOn: 1397490980837
31       }]
32     }, {
33       name: 'Bloodstone',
34       description: "Origin of the Bloodstone is unknown, hence its low value. It has a very high shine and 12 sides, however.",
35       shine: 9,
36       price: 22.90,
37       rarity: 6,
38       color: '#EEE',
39       faces: 12,
40       images: [
41         "images/gem-01.gif",
42         "images/gem-03.gif",
43         "images/gem-04.gif"
44       ],
45       reviews: [{
46         stars: 3,
47         body: "I think this gem was just OK, could honestly use more shine, IMO.",
48         author: "JimmyDean@example.org",
49         createdOn: 1397490980837
50       }, {
51         stars: 4,
52         body: "Any gem with 12 faces is for me!",
53         author: "gemsRock@example.org",
54         createdOn: 1397490980837
55       }]
56     }, {
57       name: 'Zircon',
58       description: "Zircon is our most coveted and sought after gem. You will pay much to be the proud owner of this gorgeous and high shine gem.",
59       shine: 70,
60       price: 1100,
61       rarity: 2,
62       color: '#000',
63       faces: 6,
64       images: [
65         "images/gem-06.gif",
66         "images/gem-07.gif",
67         "images/gem-10.gif"
68       ],
69       reviews: [{
70         stars: 1,
71         body: "This gem is WAY too expensive for its rarity value.",
72         author: "turtleguyy@example.org",
73         createdOn: 1397490980837
74       }, {
75         stars: 1,
76         body: "BBW: High Shine != High Quality.",
77         author: "LouisW407@example.org",
78         createdOn: 1397490980837
79       }, {
80         stars: 1,
81         body: "Don't waste your rubles!",
82         author: "nat@example.org",
83         createdOn: 1397490980837
84       }]
85     }];
86 })();
app.js
 1 <!DOCTYPE html>
 2 <html ng-app="gemStore">
 3   <head>
 4     <link rel="stylesheet" type="text/css" href="bootstrap.min.css" />
 5     <script type="text/javascript" src="angular.min.js"></script>
 6     <script type="text/javascript" src="app.js"></script>
 7   </head>
 8   <body class="list-group" ng-controller="StoreController as store">
 9     <!--  Product Container  -->
10     <div class="list-group-item" ng-repeat="product in store.products">
11       <h3>{{product.name}} <em class="pull-right">{{product.price | currency}}</em></h3>
12 
13       <!-- Image Gallery  -->
14       <div class="gallery">
15         <div class="img-wrap">
16           <img ng-src="{{product.images[0]}}" />
17         </div>
18         <ul class="img-thumbnails clearfix">
19           <li class="small-image pull-left thumbnail" 
20               ng-repeat = "image in product.images"  >
21             <img ng-src="{{image}}" />
22           </li>
23         </ul>
24       </div>
25     </div>
26   </body>
27 </html>
index.html

通过image array的长度来判断image列表是否存在

 1 <!DOCTYPE html>
 2 <html ng-app="gemStore">
 3   <head>
 4     <link rel="stylesheet" type="text/css" href="bootstrap.min.css" />
 5     <script type="text/javascript" src="angular.min.js"></script>
 6     <script type="text/javascript" src="app.js"></script>
 7   </head>
 8   <body ng-controller="StoreController as store">
 9     <!--  Products Container  -->
10     <div class="list-group">
11       <!--  Product Container  -->
12       <div class="list-group-item" ng-repeat="product in store.products">
13         <h3>
14           {{product.name}}
15           <em class="pull-right">{{product.price | currency}}</em>
16         </h3>
17 
18         <!-- Image Gallery  -->
19         <div class="gallery" ng-show = "product.images.length">
20           <img class="img img-circle img-thumbnail center-block" ng-src="{{product.images[0]}}" />
21           <ul class="clearfix">
22             <li class="small-image pull-left thumbnail" ng-repeat="image in product.images"> <img ng-src="{{image}}" /> </li>
23           </ul>
24         </div>
25       </div>
26     </div>
27   </body>
28 </html>
check image is empty or not

 

 

－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－

crate tab with bootstrap 

　　2 way data binding!!!

当点击对应的button时候，相应的panel show

有个问题，在刷新页面了以后，没有panel 出现，因为没有设置初始值！

　　如何把当前选定的tab高亮显示，用bootstrap的active class，做一个判断，当被选定时候，把class赋给相应的tab

如何把当前这些控制的逻辑从html页面里面分离出来呢，那么我们需要一个controller。

实际上 initializtion应该放在cintroller里面，check 和 set应该分别用一个function来表示。修改后的代码，简洁多了。

click的时候用selectTab funtion 把当前的panel number传进controller的tab value。 然后pannel的isSelect function来控制是否show。

练习：

 1 <!DOCTYPE html>
 2 <html ng-app="gemStore">
 3   <head>
 4     <link rel="stylesheet" type="text/css" href="bootstrap.min.css" />
 5     <script type="text/javascript" src="angular.min.js"></script>
 6     <script type="text/javascript" src="app.js"></script>
 7   </head>
 8   <body class="list-group" ng-controller="StoreController as store">
 9     <header>
10       <h1 class="text-center">Flatlander Crafted Gems</h1>
11       <h2 class="text-center">– an Angular store –</h2>
12     </header>
13     <div class="list-group-item" ng-repeat="product in store.products">
14       <h3>
15         {{product.name}}
16         <em class="pull-right">{{product.price | currency}}</em>
17       </h3>
18       <section ng-show="product.images.length">
19         <img ng-src="{{product.images[0]}}" />
20         <ul class="list-inline thumbs">
21           <li class="thumbnail" ng-repeat="image in product.images">
22             <img ng-src="{{image}}" />
23           </li>
24         </ul>
25       </section>
26 
27       <section class="tab" ng-controller = "TabController as tabcon">
28         <ul class="nav nav-pills">
29           <li ng-class = "{active : tabcon.isSet(1) }">
30             <a href ng-click = tabcon.setTab(1) >Description</a></li>
31           <li ng-class = "{active : tabcon.isSet(2) }">
32             <a href ng-click = tabcon.setTab(2)>Specs</a></li>
33           <li ng-class = "{active :tabcon.isSet(3)} ">
34             <a href ng-click = tabcon.setTab(3)>Reviews</a></li>
35         </ul>
36         <div ng-show = tabcon.isSet(1)>
37           <h4>Description</h4>
38           <blockquote>{{product.description}}</blockquote>
39         </div>
40         <div ng-show = tabcon.isSet(2)>
41           <h4>Specs</h4>
42           <blockquote>Shine:{{product}} </blockquote>
43         </div>
44         <div ng-show = tabcon.isSet(3)>
45           <h4>Reviews</h4>
46           <blockquote></blockquote>
47         </div>
48       </section>
49     </div>
50   </body>
51 </html>
index html
  1 (function() {
  2   var app = angular.module('gemStore', []);
  3 
  4   app.controller('StoreController', function(){
  5     this.products = gems;
  6   });
  7 
  8   app.controller('TabController', function(){
  9     this.tab = 1;
 10 
 11     this.setTab = function(newValue){
 12       this.tab = newValue;
 13     };
 14 
 15     this.isSet = function(tabName){
 16       return this.tab === tabName;
 17     };
 18   });
 19 
 20   var gems = [
 21     {
 22       name: 'Azurite',
 23       description: "Some gems have hidden qualities beyond their luster, beyond their shine... Azurite is one of those gems.",
 24       shine: 8,
 25       price: 110.50,
 26       rarity: 7,
 27       color: '#CCC',
 28       faces: 14,
 29       images: [
 30         "images/gem-02.gif",
 31         "images/gem-05.gif",
 32         "images/gem-09.gif"
 33       ],
 34       reviews: [{
 35         stars: 5,
 36         body: "I love this gem!",
 37         author: "joe@example.org",
 38         createdOn: 1397490980837
 39       }, {
 40         stars: 1,
 41         body: "This gem sucks.",
 42         author: "tim@example.org",
 43         createdOn: 1397490980837
 44       }]
 45     },
 46     {
 47       name: 'Bloodstone',
 48       description: "Origin of the Bloodstone is unknown, hence its low value. It has a very high shine and 12 sides, however.",
 49       shine: 9,
 50       price: 22.90,
 51       rarity: 6,
 52       color: '#EEE',
 53       faces: 12,
 54       images: [
 55         "images/gem-01.gif",
 56         "images/gem-03.gif",
 57         "images/gem-04.gif",
 58       ],
 59       reviews: [{
 60         stars: 3,
 61         body: "I think this gem was just OK, could honestly use more shine, IMO.",
 62         author: "JimmyDean@example.org",
 63         createdOn: 1397490980837
 64       }, {
 65         stars: 4,
 66         body: "Any gem with 12 faces is for me!",
 67         author: "gemsRock@example.org",
 68         createdOn: 1397490980837
 69       }]
 70     },
 71     {
 72       name: 'Zircon',
 73       description: "Zircon is our most coveted and sought after gem. You will pay much to be the proud owner of this gorgeous and high shine gem.",
 74       shine: 70,
 75       price: 1100,
 76       rarity: 2,
 77       color: '#000',
 78       faces: 6,
 79       images: [
 80         "images/gem-06.gif",
 81         "images/gem-07.gif",
 82         "images/gem-09.gif"
 83       ],
 84       reviews: [{
 85         stars: 1,
 86         body: "This gem is WAY too expensive for its rarity value.",
 87         author: "turtleguyy@example.org",
 88         createdOn: 1397490980837
 89       }, {
 90         stars: 1,
 91         body: "BBW: High Shine != High Quality.",
 92         author: "LouisW407@example.org",
 93         createdOn: 1397490980837
 94       }, {
 95         stars: 1,
 96         body: "Don't waste your rubles!",
 97         author: "nat@example.org",
 98         createdOn: 1397490980837
 99       }]
100     }
101   ];
102 })();
app.js
 1 <!DOCTYPE html>
 2 <html ng-app="gemStore">
 3   <head>
 4     <link rel="stylesheet" type="text/css" href="bootstrap.min.css" />
 5     <script type="text/javascript" src="angular.min.js"></script>
 6     <script type="text/javascript" src="app.js"></script>
 7   </head>
 8   <body class="list-group" ng-controller="StoreController as store">
 9     <header>
10       <h1 class="text-center">Flatlander Crafted Gems</h1>
11       <h2 class="text-center">– an Angular store –</h2>
12     </header>
13     <div class="list-group-item" ng-repeat="product in store.products">
14       <h3>
15         {{product.name}}
16         <em class="pull-right">{{product.price | currency}}</em>
17       </h3>
18 
19       <!-- Image Gallery  -->
20       <div class='gallery' ng-controller="GalleryController as gallery" ng-show="product.images.length">
21         <img ng-src="{{product.images[gallery.current]}}" />
22         <ul class="list-inline thumbs">
23           <li class="thumbnail" ng-repeat="image in product.images">
24             <img ng-src="{{image}}" />
25           </li>
26         </ul>
27       </div>
28 
29       <section class="tab" ng-controller="TabController as tab">
30         <ul class="nav nav-pills">
31           <li ng-class="{ active: tab.isSet(1) }">
32             <a href ng-click="tab.setTab(1)">Description</a></li>
33           <li ng-class="{ active: tab.isSet(2) }">
34             <a href ng-click="tab.setTab(2)">Specs</a></li>
35           <li ng-class="{ active: tab.isSet(3) }">
36             <a href ng-click="tab.setTab(3)">Reviews</a></li>
37         </ul>
38         <div ng-show="tab.isSet(1)">
39           <h4>Description</h4>
40           <blockquote>{{product.description}}</blockquote>
41         </div>
42         <div ng-show="tab.isSet(2)">
43           <h4>Specs</h4>
44           <blockquote>Shine: {{product.shine}}</blockquote>
45         </div>
46         <div ng-show="tab.isSet(3)">
47           <h4>Reviews</h4>
48         </div>
49       </section>
50     </div>
51   </body>
52 </html>
View Code
  1 (function() {
  2   var app = angular.module('gemStore', []);
  3 
  4   app.controller('StoreController', function(){
  5     this.products = gems;
  6   });
  7 
  8   app.controller('TabController', function(){
  9     this.tab = 1;
 10 
 11     this.setTab = function(newValue){
 12       this.tab = newValue;
 13     };
 14 
 15     this.isSet = function(tabName){
 16       return this.tab === tabName;
 17     };
 18   });
 19 
 20   app.controller('GalleryController', function(){
 21     this.current = 0;
 22     this.setCurrent = function(newGallery){
 23       this.current = newGallery || 0;
 24     };
 25   });
 26 
 27   var gems = [
 28     {
 29       name: 'Azurite',
 30       description: "Some gems have hidden qualities beyond their luster, beyond their shine... Azurite is one of those gems.",
 31       shine: 8,
 32       price: 110.50,
 33       rarity: 7,
 34       color: '#CCC',
 35       faces: 14,
 36       images: [
 37         "images/gem-02.gif",
 38         "images/gem-05.gif",
 39         "images/gem-09.gif"
 40       ],
 41       reviews: [{
 42         stars: 5,
 43         body: "I love this gem!",
 44         author: "joe@example.org",
 45         createdOn: 1397490980837
 46       }, {
 47         stars: 1,
 48         body: "This gem sucks.",
 49         author: "tim@example.org",
 50         createdOn: 1397490980837
 51       }]
 52     },
 53     {
 54       name: 'Bloodstone',
 55       description: "Origin of the Bloodstone is unknown, hence its low value. It has a very high shine and 12 sides, however.",
 56       shine: 9,
 57       price: 22.90,
 58       rarity: 6,
 59       color: '#EEE',
 60       faces: 12,
 61       images: [
 62         "images/gem-01.gif",
 63         "images/gem-03.gif",
 64         "images/gem-04.gif",
 65       ],
 66       reviews: [{
 67         stars: 3,
 68         body: "I think this gem was just OK, could honestly use more shine, IMO.",
 69         author: "JimmyDean@example.org",
 70         createdOn: 1397490980837
 71       }, {
 72         stars: 4,
 73         body: "Any gem with 12 faces is for me!",
 74         author: "gemsRock@example.org",
 75         createdOn: 1397490980837
 76       }]
 77     },
 78     {
 79       name: 'Zircon',
 80       description: "Zircon is our most coveted and sought after gem. You will pay much to be the proud owner of this gorgeous and high shine gem.",
 81       shine: 70,
 82       price: 1100,
 83       rarity: 2,
 84       color: '#000',
 85       faces: 6,
 86       images: [
 87         "images/gem-06.gif",
 88         "images/gem-07.gif",
 89         "images/gem-09.gif"
 90       ],
 91       reviews: [{
 92         stars: 1,
 93         body: "This gem is WAY too expensive for its rarity value.",
 94         author: "turtleguyy@example.org",
 95         createdOn: 1397490980837
 96       }, {
 97         stars: 1,
 98         body: "BBW: High Shine != High Quality.",
 99         author: "LouisW407@example.org",
100         createdOn: 1397490980837
101       }, {
102         stars: 1,
103         body: "Don't waste your rubles!",
104         author: "nat@example.org",
105         createdOn: 1397490980837
106       }]
107     }
108   ];
109 })();
app.js

 

posted @ 2016-09-22 13:03  毛线刷题笔记  阅读(406)  评论(0)  编辑  收藏  举报