Angular store construction first visualization product - Angular.js guide

flag language

Welcome to the second part of the Angular framework guide. This time we will create the basis for the preparation of the store, warehouse using the Angular framework. I will show you step by step how to cause Angular to display the first product in your store :).

Angular store construction first visualization product - Angular.js guide

Here's what we want to achieve on the website using the Angular framework:

framework JavaScript poswojsku

Angular to hand :) and to work!

polish elearning trainings poswojsku.info
 

 

Angular store construction first product visualization guide

Prepare two files: .html and .js for Angular, with names you can think of :). Create an 'images' subdirectory for images in the directory where you will place your first Angular application. Download our logo from the upper left corner of the poswojsku.info portal to the 'images' catalog. After downloading, change the logo name to: 'poswojsku-info-logo.png'.

I assume that you already know how to connect Angular and Bootstrap to a file and how to connect a .js file to an html file. If you do not know - take a look to the first part of the guide: https: //poswojsku.info/internet-it/Angular-tworzenie-nowoczesnej-strony -... .

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

Inside the <body> tag, we create a div that will be managed by Angular. At the same time, we create the "magazine" module in the .js file.

    <div ng-app = "storage">
We're creating an Angular controller. In turn, we create for Angular in "double straps": name, price and product description. Then we add a picture of the product and finally a shopping bar, which, thanks to the ng-show directive and appropriate settings for "'mogeKupic' in the .js file, will cause the bar to be or not be shown by Angular. Look in the description of the .js file on the properties' mogeKupic 'set for Angular.
    <div ng-controller = "MagazynController as warehouse">
    <h1> {{ warehouse.product.name }} </h1>
    <h2> $ {{warehouse.product.price}} </ h2 >
    <p> {{warehouse.product.description}} </p>
    <img ng-src = "images / poswojsku-info-logo.png"
    <button ng-show = "warehouse.product.mogeKupic"> Add to shopping </button>
    </div>
 </div>

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

 In the .js file, we create the "warehouse" angular module and the Angular MagazynKontroler controller

(function () {
  var app = angular.module ('magazine', []);

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

free tutorials website development JavaScript framework postwojsko

 

We create for Angular an object - a variable "portal", which at the beginning will contain only one product called "poswojsku.info '. The following entries are even understandable for people who do not know Angular, only' mogeKupic 'requires explanation. When set to 'true' means that the product is in stock and can be purchased. When we say 'false' to Angular - it means that Angular cannot display the product.

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

Angular store construction first product visualization guide

End of work with Angular. And what is Angular framework difficult?

 Regards: Darek Gołębiowski, Author of the guide: "Angular creation of a modern website JavaScript Angular framework guide" marketing@poswojsku.eu .

See in the menu similar items to: Angular store construction first product visualization guide

szkolenia bezpłatne kolejne lekcje
kursy, porady, artykuły znajdziesz w Menu Tematycznym