全栈老司机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
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
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>>
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
1 var app = angular.module('store', []);
-----------------------------------------------------------
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:
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
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>
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
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 })();
----------------------------------------------------------------
level3
在 gem里面设置canPurchase参数
what if we need to hide the prodocut when it is sold out:
how can we display mutiple
use ng-repeat!
练习代码:
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
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>
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
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 })();
练习np-repeat
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
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>
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
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 })();
----------------------------------------------------------
level 4
|(pipe) send the output of first expression to the second expression
more filters:
display image :
循环,展示图片的练习:
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
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>
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
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 })();
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
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>
通过image array的长度来判断image列表是否存在
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
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>
-------------------------------------------------------------------
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。
练习:
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
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>
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
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 })();
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
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>
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
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 })();