Підключення AngularJS
<script src=”scripts/angular.min.js"></script>

  • ng-app директива вказує зону дії додатку
  • ng-init ініціалізує змінну JavaScript
  • ng-model пов'язує введені дані зі зміною середовища
  • ng-repeat перебирає елементи колекції, використовуючи шаблон для кожного елемента

Директиви

<!-- AngularJS -->
	<script src="vendor/angular/angular.min.js"></script>
<html lang="en" ng-app>
ng-init="
    book = {
      name : 'The Lord of the Rings',
      image : 'img/books/TheLordOfTheRings.jpg',
      category : 'Books',
      label : 'Best Seller',
      price : '29.50',
      description : 'In ancient times the Rings of Power were crafted by the Elven-smiths, and Sauron, the Dark Lord, forged the One Ring, filling it with his own power so that he could rule all others. But the One Ring was taken from him, and though he sought it throughout Middle-earth, it remained lost to him. After many ages it fell by chance into the hands of the hobbit Bilbo Baggins.'
      comment : ''
    }
"
<div class="col-lg-12 col-md-12">
    <div class="media">
        <div class="media-left media-top">
            <a href="#">
		<img class="media-object img-thumbnail" ng-src={{book.image}} alt="book" />
	    </a>
        </div>
        <div class="media-body">
            <h2 class="media-heading">{{book.name}}
                <span class="label label-danger label-xs">{{book.label}}
    	        </span>
                <span class="badge">{{book.price | currency}}
    	        </span>
            </h2>
            <p>{{book.description}}</p>
        </div>
    </div>
</div>
<p> Comment : {{ book.comment }} </p>
<p>
    <i class="fa fa-2x fa-comment-o text-primary sr-icons"></i>
    Type your comment:
    <input type="text" ng-model="book.comment" />
</p>
books = [
    {
      name: 'The Lord of the Rings',
      image: 'img/books/TheLordOfTheRings.jpg',
      category: 'Books',
      label: 'Best Seller',
      price: '45.50',
      description: 'In ancient times the Rings of Power were crafted by the Elven-smiths, and Sauron, the Dark Lord, forged the One Ring, filling it with his own power so that he could rule all others. But the One Ring was taken from him, and though he sought it throughout Middle-earth, it remained lost to him. After many ages it fell by chance into the hands of the hobbit Bilbo Baggins.',
      comment : ''
    },
    {
      name: 'The Hobbit',
      image: 'img/books/TheHobbit.jpg',
      category: 'Books',
      label: 'In Stock',
      price: '11.24',
      description: 'Bilbo Baggins is a hobbit who enjoys a comfortable, unambitious life, rarely traveling any farther than his pantry or cellar. But his contentment is disturbed when the wizard Gandalf and a company of dwarves arrive on his doorstep one day to whisk him away on an adventure. They have launched a plot to raid the treasure hoard guarded by Smaug the Magnificent, a large and very dangerous dragon. Bilbo reluctantly joins their quest, unaware that on his journey to the Lonely Mountain he will encounter both a magic ring and a frightening creature known as Gollum.',
      comment : ''
    },
    {
      name: 'The Silmarillion',
      image: 'img/books/TheSilmarillion.jpg',
      category: 'Books',
      label: 'FREE Shipping',
      price: '18.09',
      description: 'The story of the creation of the world and of the First Age, this is the ancient drama to which the characters in The Lord of the Rings look back and in whose events some of them, such as Elrond and Galadriel, took part. The three Silmarils were jewels created by Feanor, most gifted of the Elves. Within them was imprisoned the Light of the Two Trees of Valinor before the Trees themselves were destroyed by Morgoth, the first Dark Lord. Thereafter, the unsullied Light of Valinor lived on only in the Silmarils, but they were seized by Morgoth and set in his crown, which was guarded in the impenetrable fortress of Angband in the north of Middle-earth. The Silmarillion is the history of the rebellion of Feanor and his kindred against the gods, their exile from Valinor and return to Middle-earth, and their war, hopeless despite all their heroism, against the great Enemy.',
      comment : ''
    },
    {
       name: 'Unfinished Tales of Numenor and Middle-earth',
       image: 'img/books/UnfinishedTales.jpg',
       category: 'Books',
       label: 'In Stock',
       price: '17.74',
       description: 'Unfinished Tales of Numenor and Middle-earth concentrates on the lands of Middle-earth and comprises Gandalf\'s lively account of how he came to send the Dwarves to the celebrated party at Bag-End, the story of the emergence of the sea god Ulmo before the eyes of Tuor on the coast of Beleriand, and an exact description of the military organization of the Riders of Rohan and the journey of the Black Riders during the hunt for the Ring. It also contains the only surviving story about the long ages of Numenor before its downfall, and all that is known about the Five Wizards sent to Middle-earth as emissaries of the Valar, about the Seeing Stones known as palantiri, and about the legend of Amroth.'
    }
    
  ]

Angular Modules

Angular Module це колекція:

  • Контролерів
  • Директив
  • Фільтрів
  • Сервісів
  • Конфігураційна інформація

 

<html ngApp=“tolkienApp”>
    . . .
    <body>
    . . .
    <script>
          var app = angular.module(‘tolkienApp’,[]);
    </script>
</body>
</html>

Angular Controller

<div class="row" ng-controller="booksController as booksCtrl">
</div>
<script>
   var app = angular.module('tolkienApp',[]);
   
   app.controller('booksController', function() {
  
   });
</script>

<script>
   var app = angular.module('tolkienApp',[]);
   
   app.controller('booksController', function() {
  
   });
</script>

Angular Built-in Filters

  • uppercase / lowercase : перетворює текст
  • currency: форматує число, як валюту
  • date: форматує дату відповідно до вказаного формуту
  • filter: обирає підмасив даних, що відповідає критерію
  • orderBy: сортує масив відповідно до критерію
<div class="navbar-collapse">
	<ul class="list-inline">
		<li>
		    <h4>
		        <a>All</a>
		    </h4>
		</li>
		<li>
		    <h4>
			<a>Best Seller</a>
		    </h4>
		</li>
		<li>
		    <h4>
			<a>In Stock</a>
		    </h4>
		</li>
		<li>
		    <h4>
			<a>FREE Shipping</a>
		    </h4>
		</li>
	</ul>
</div>
ng-click="booksCtrl.filter('')"
| filter:booksCtrl.filterText
this.filterText = '';
			
this.filter = function(text) {
	this.filterText  = text;
}
ng-class="{'label label-default':booksCtrl.isSelected('')}"
this.isSelected = function(text) {
	return (this.filterText === text);
}

AngularJS: Directives. MVC. Filters.

By Ievgen Liubarshchuk

Made with Slides.com

AngularJS: Directives. MVC. Filters.

AngularJS: Directives. MVC. Filters.

  • 1,898

More from Ievgen Liubarshchuk