Szkolenia informatyczne: biuro, technologie internetowe, egzaminy technik

CENA - OFERTA: Jesteś zainteresowany/na kursem – zapraszam do kontaktu ze mną, szczegóły: www.poswojsku.pl .

szkolenie technik informatyk programista inf.03 ee.09 inf.04 egzamin przygotowanie

Angular store construction first product visualization Angular guide

Welcome to the second part of the guide on Angular internals of the framework. This time create a basis for the preparation of the store, warehouse Angular using the internals of the framework. I will show you step by step how to make that flashed Angular first product in your store :). Here's what we want to achieve on the website using the internals of the framework Angular:

Take Angular in your hand and to work :)!

Angular store construction first product visualization Angular guide

Prepare two files: .html and .js for angular, with names which we will come up with :). Create the images subdirectory 'images' in the directory where you put your first app Angular. Download our logo in the left upper corner of the portal poswojsku.info to the directory 'images'. After downloading rename the logo 'poswojsku-info-logo.png' .

I assume that you already know how to connect Angular and Bootstrap to a file and how to connect the js file into the html file. If you do not know - take a look to the first part of the guide: https://poswojsku.info/web/Angular-modern-web-site-creation-JavaScript-f... .

Angular store construction first product visualization guide - ANGULAR FRAMEWORK: FILE HTML

Inside the <body> we create a div that will be managed by Angular. At the same time js file create a module: "magazyn".

    <div ng-app="magazyn">
We create Angular controller. One by one we create for Angular the "double bib": name, price and description of the product. Then add the image of the product and the end of the bar to buy that thanks to the directive ng-show and an appropriate setting for "'mogeKupic' .js file will cause the baton will or will not the angular shown. Take a look at the description of the properties of the .js file 'mogeKupic' set for Angular.
    <div ng-controller="MagazynController as magazyn">
    <h1> {{magazyn.product.name}} </h1>
    <h2> ${{magazyn.product.price}} </h2>
    <p> {{magazyn.product.description}} </p>
    <img ng-src="images/poswojsku-info-logo.png" src="//www.poswojsku.info/images/poswojsku-info-logo.png">
    <button ng-show="magazyn.product.mogeKupic"> Add to shopping </button>
    </div>
</div>

Angular store construction first product visualization Angular guide - FRAMEWORK ANGULAR: .js file

In the .js file we create angular module "magazyn" and Angular's controller MagazynKontroler

(function() {
var aplikacja = angular.module('magazyn', [ ]);

aplikacja.controller('MagazynController', function() {
this.product = portal;
});

framework JavaScript Angular guide

We create for Angular'a object - the variable "portal", which at the beginning will contain only one product called "poswojsku.info '. These records are even for people who do not know Angular rather understandable only 'mogeKupic' it requires clarification. When you set to 'true', it will mean that the product is in stock and can be bought. When Angularowi say 'false' - it meant it would be that Angular can not display product.

var portal = {
    name: 'poswojsku.info',
    description: 'managers portal: free advice and training on-line',
    price: 0.00,
   mogeKupic: true,
}
})();