Angular a modern web site creation JavaScript framework Angular guide

Started with angularjs understand the logic internals of the framework Angular

At the beginning, like with css or javascript files, Angular need to join to our website:

<script src="//"></script>

Angular You can also join locally, but then you have to download Angular self-drive.

Angular must be informed that it will be used on the website www-through code: ng- or date-ng - a directive HTML tags placed expand and define the action in accordance with the guidelines Angular.


Angular, modern web site creation, JavaScript framework, Angular guide

 Angular a modern web site creation JavaScript framework Angular guide


Interesting Angular vs. html validators:


Angular: ng- or data-ng? Actually there is no difference between records, but some validators HTML5 will generate an error when writing ng-, and will not generate an error with the prefix data-ng-app. Therefore usually safer to use data-ng-app - validation HTML code will be slightly easier.

Example attach (zainkludowania) of Directive Angular:

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

.. end now container will be "addicted" from the angular :).


Let me remind you that the code was fully walidowalny HTML5 code, add the prefix data-.
data-ng-app defines an application angularjs - element is the "manager" application (according to the documentation Angular)


You probably noticed / out in div: data-ng-controller, what does this mean in the world Angular? data-ng-controller defines a controller that is .. slowly, it will become clear later in this guide :). A roughly:

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

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

Angularjs Expressions - EXPRESSIONS Angular

Angular'a expression fits inside double braces: {{your}} expression. Angular'a expressions can be dropped directly to the content HTML tags by placing them as mentioned in double brackets wąsiastych.

Angular expression associated data to HTML in the same way as in the Directive ng-bind, which soon tell. Angular expressions give something always missing in JavieScript me - I write the phrase in code and see them immediately on the page html, of course, if the rest of Angular is properly implemented.

Angular expression expressions are similar to JavaScript: may contain strings, operators, and variables.

Example expressions Angular:

  {{firstName + "" + lastName}} (gives on such. Johnny Doe)


AngularJS Modules – Modules Angular

Angularjs module determines the application.

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

Look below and note that the application mojaApp has one controller module and MojKontoler:

<!DOCTYPE html>
<script src="//"">"></script>

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

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


It is worth noting that the code does not have to be all in the html page. We can move it to file .js:

Module Angular:

var app = angular.module("mojaApp", []);
We move to file: mojaApp.js. Now mojaApp.js file contains the definition of the module.

Controller - MojKontoler, move to a file MojKontoler.js, that file will be saved:

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

data-ng-model - It combines the value of an HTML element, eg .: textarea, input, select - application data,

data-ng-bind - It combines the value of application data to HTML view, fills the so-called innerHTML,

data-ng-init - initializes the application, which for example. set input

data-ng-repeat - loops insert HTML elements to the page code.


framework JavaScript Angular guide

The article "Angular creation of a modern side JavaScript framework guide Angular" is the first part of the tutorial for creating web applications in framework'u Angular. For the next part of the advice on the internals of the framework Angular invite for 2-3 weeks. And as if someone in a hurry can always "rush" the author by sending an email at encouraging: .

The second part of the guide with the service and application internals of the framework Angular: Angular store construction first product visualization Angular guide .. 

Yours: Darek Gołębiowski, author of Advisory: "Angular a modern web site creation JavaScript framework Angular guide"- contact with author: .

See the menu similar article to: Angular a modern web site creation JavaScript framework Angular guide

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