Szkolenia informatyczne: biuro, technologie internetowe, egzaminy technik

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

kurs tworzenie witryn www
szkolenie technik informatyk programista inf.03 ee.09 inf.04 egzamin przygotowanie

 

Angular creation of a modern website JavaScript Angular framework guide

flag language

Angular creation of a modern website JavaScript Angular framework guide

ANGULAR - JavaScript Introduction - Angular Guide

Contrary to what you can read in many places, Angular is not very complicated. I would say that mastering it is much simpler than any programming language. To understand Angular, you need to understand the basics of object oriented programming. You must know what an object is, how it is created, preferably in relation to JavaScript. It would be nice to know JavaScript, but if you don't know it, don't worry. With me you will learn as much JavaScript as is necessary to use Angular.

I mentioned object oriented programming - this is the basis. You must understand and remember that there is one most important object, a super object called .. angular. The whole idea of ​​Angular's action rests on it. By referring to the properties and methods of the angular object, we create applications based on angular.

I will consider the module method:

angular.module () - that is, we call the module method on the angular object, as a result of which the Module Angular object is returned.

I will now create the variable poswojskuApp and assign a dependency to Angular to it

var poswojskuApp = angular.module ("poswojskuApp", []);

Note the empty array at the end of the expression in normal brackets. This array for Angular and for your future application is essential. It shows the dependencies - elements necessary for the functioning of the postwojsko App module. An empty array means that your application does not need any additional modules to function properly. But you can't delete an array, even when it's empty. Why? Because these are the principles of how angular technology works.

 The file in which objects, properties and methods of angular are encoded is angular.js. Therefore, for angular to work, you need to connect it to the html file in the same way as you attach other JavaScript files, i.e.

<script src="//www.poswojsku.info/angular.js"></script>

You can download the angular.js file, e.g. from the Angularjs project website.

In addition to connecting Angular, in order for it to work inside the html file, I need to specify dependencies, i.e. indicate html, what part of it will be managed by the created Angular elements. If all html is managed by the created poswojskuApp module, then at the beginning of the document we indicate this possibility:

<!DOCTYPE html>

<html ng-app = "poswojskuApp">

Write <html ng-app = "poswojskuApp"> - instructs html to listen to the instructions of the poswojskoApp directive.

ANGULAR - getting started with Angular.js understanding of Angular framework logic - Angular guide

 

JavaScript framework in Polish

For starters, just like with css or javascript files, you must include Angular to our website:

<script src="//www.poswojsku.info/http%20%3A//%20ajax.googleapis.com/ajax/libs/angularj...

Angular can also be attached locally, but then you need to download Angular to your own disk.

Angular must be informed that it will be used on the website - through the code: ng- or data-ng - directives placed in HTML tags extend and define the operation in accordance with Angular guidelines.

 

framework JavaScript poswojsku

 

 

Curiosity Angular versus validatory html:

 

Angular: ng- or data-ng? There is virtually no difference between entries, but some HTML5 validators will generate an error when writing ng-, and will not generate an error with the data-ng-app prefix. Therefore, it is usually safer to use data-ng-app - validating HTML will be a little easier.

An example of including (including) the Angular directive:

<div data-ng-app="mojaApp" data-ng-controller="myCtrl"></div>

.. and the container will be "addicted" to Angular :).

 

As a reminder, to make the code fully validated to HTML5 code, add the prefix data-.

data-ng-app defines the AngularJS application   - the element is the "manager" of the application (according to Angular documentation)

 

You probably noticed in the div: data-ng-controller tag, what does this mean in the world of Angular? data-ng-controller defines a controller, i.e. slowly, it will be explained later in this guide :). And roughly:

Controller Angularjs controls the angularjs application data, controllers are regular JavaScript objects.

ng-controller is a JavaScript object created by the constructor of the standard JavaScript object. Simple as all Angular, right?

Angularjs Expressions - ANGULAR EXPRESSIONS

Angular expressions are written inside double straps: {{Your expression}}. Angular expressions can be thrown directly into the content of HTML tags by placing them, as I mentioned in double curly brackets.

The Angular expression binds data to HTML in the same way as in the ng-bind directive, which I will talk about soon. Angular expressions give something that I've always missed in JavieScript - I write the expression in the code and see it immediately on the html page, of course, if all the rest of the angular is correctly implemented.

Angular expressions are similar to JavaScript expressions: they can contain strings, operators, and variables.

Example of Angular expression:

  {{firstName + "" + lastName}} (gives e.g. Jasio Kowalski)

 

Getting started with AngularJS - ANGULAR MODULES - Angular guide

 

AngularJS Modules - Angular Modules

The angularjs module specifies the application .

The Angular module is a container for various parts of the application, the module defines the application. All controllers (drivers) aplikacyji should belong to the module.

Look below and notice that myApp application has one MojKontoler controller and module:

<!DOCTYPE html>
<html>
<script src="//www.poswojsku.info/%3Ca%20href%3D"https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js">h...
<body>

<div ng-app="mojaApp" ng-controller=" MojKontoler ">
{{ firstName + " " + lastName }}
</div>

<script>
var app = angular.module("mojaApp", []);
app.controller("MojKontoler ", function($scope) {
    $scope.firstName = "Darek";
    $scope.lastName = "Gołębiowski";
});
</script>

</body>
</html>

It is worth adding that the code does not have to be all in the html page. We can transfer it to .js files:

Angular module:

var app = angular.module ("myApp", []);
we will transfer to the file: mojaApp.js. Now the file myApp.js contains the module definition.

Controller - MojKontoler, we will transfer to the MojKontoler.js file, i.e. the file   will have:

app.controller (" MojKontoler ", function ($ scope) {
    $ scope.firstName = "Darek";
    $ scope.lastName = "Gołębiowski";
});
Curious about what it is []? Square brackets [] in the module parameters definition can be used to specify related modules. But that's the topic for another Angular story. In this part of the advice from Angular I will mention: data-ng-model, data-ng-bind, data-ng-init, data-ng-repeat

data-ng-model - connects the value of an HTML element, e.g. textarea, input, select - to application data,

data-ng-bind - combines the application data value with an HTML view, fills the so-called innerHTML

data-ng-init - initializes the application, i.e. sets input data

data-ng-repeat - loop inserting HTML elements into the page code.

 

framework JavaScript angular poswojsku

The article "Angular creating a modern website JavaScript Angular framework tutorial" is the first part of the tutorial on creating web applications in the Angular framework. I invite you to the next parts of the Angular framework tips in 2-3 weeks. And if someone is in a hurry, he can always "rush" the author by sending an encouraging email to: marketing@poswojsku.eu . See also the comparison of React and Angular https: //www.poswojsku.info/internet-it/React-Angular-framework-js-porown ...

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

Part two of the guide on the use and application of the Angular framework: Angular store construction first product visualization guide ..

See in the menu similar articles to: Angular creating a modern page JavaScript Angular framework guide

 

Angielski

Tags:

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