Angular JS – Base Commands

https://angularjs.org

Angular is a framework with many features to create dynamic web apps. It can handle the MVC pattern in a very simple way with a very efficient binding mechanism from JS models to HTML views. In respect with other frameworks (such as Knockout) is much more powerful and easy to use, but the real difference is that it’s not just an MVC framework. It also includes many features for which, in a real application, it would be necessary to use different frameworks together, such as the SPA routing. Except for JQuery and the testing frameworks (such as Jasmine and Mocha) it covers a good part of what is needed to create a modern web app.

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Angular JS</title>
</head>
<body>
 
    <!--
        The container with the "data-ng-app"
        directive is the root of an angular application
        -->
    <div data-ng-app="" data-ng-init="name='John'; surname='Smith';
        article={name:'laptop',price:750,quantity:10}; values=[1,2,3,5,8,13]">
 
        <!--
            I can calculate expressions by putting them between {{}}
            -->
        <h3>Expressions</h3>
        <p>My first expression: {{ 5 + 5 }}</p>
        <hr />
 
        <!--
            I can define an hardcoded model inside the "data-ng-init"
            directive of the container and bind it to the elements'
            content with the "data-ng-bind" directive
            -->
        <h3>Binding</h3>
        <p>The name is: <span data-ng-bind="name"></span></p>
        <p>The surname is: <span data-ng-bind="surname"></span></p>
        <p>The article is: <span data-ng-bind="article.name"></span></p>
        <p>The 4rd value is: <span data-ng-bind="values[3]"></span></p>
        <hr />
 
        <!--
            I can use model elements inside expressions
            -->
        <h3>Expressions with model</h3>
        <p>The articles total price is: {{ article.price * article.quantity }}</p>
        <p>The full name is: {{ name + ' ' + surname }}</p>
        <hr />
 
        <!--
            I can directely bind expressions to the elements' content
            -->
        <h3>Binding expressions</h3>
        <p>The articles total price is: <span data-ng-bind="article.price * article.quantity"></span></p>
        <p>The full name is: <span data-ng-bind="name + ' ' + surname"></span></p>
        <hr />
 
        <!--
            I can bind a model element to an input
            element with the "data-ng-model" directive
            -->
        <h3>Binding input</h3>
        <p>
            The name is:
            <input type="text" data-ng-model="name" />
        </p>
        <p>
            The article price is:
            <input type="text" data-ng-model="article.price" />
        </p>
        <p>
            <!--
                I can refer to a not existent model
                element. It will be created on the fly
                -->
            The implicitly created value is:
            <input type="text" data-ng-model="implicitlyCreatedValue" />
        </p>
        <p>The name is: {{ name }}</p>
        <p>The article price is: {{ article.price }}</p>
        <p>The implicitly created value is: {{ implicitlyCreatedValue }}</p>
        <hr />
 
        <!--
            I can repeat an element for each element of
            an array with the "data-ng-repeat" directive
            -->
        <h3>Looping through an array</h3>
        <ul>
            <li data-ng-repeat="value in values">
                <p>The value is: {{ value }}</p>
            </li>
        </ul>
    </div>
 
    <!--
        Including jQuery before angular is not mandatory, but if I do
        then angular will start to use jQuery for DOM manipulation 😉
        -->
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.min.js"></script>
</body>
</html>

I can bind the content of each attribute also without a specific binding directive, but just using the {{}}. For example I can bind a method that return a CSS style rule in this way:

style="{{ myMethod(myScopeObject) }}"
Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s