QNimate

  • CoursesVideos
  • WP PremiumPlugins
  • DemosLab
  • Home
  • QIdea
  • QTrack
Home Carbon Ads AngularJS Example APP Project

AngularJS Example APP Project

AngularJS is suitable for creating AJAX based dynamic applications and applications which require a lot of DOM content manipulations. For example: AngularJS is the best way for creating single app websites. AngularJS helps you to build such kinds apps with less code and more flexibility.

Example

Here is an AngularJS example app which covers almost all the basics of AngularJS.

View Demo

<!doctype html>
<html>
    <head>
        <title>AngularJS Tutorial</title>
        <script type="text/javascript" src="angular.min.js"></script>
    </head>
    <body>
        <div ng-app="qnimate">
            <div ng-controller="ctrlOne">
                <h3>Title is: {{title}}</h3>
                <span>Article Meta: Author is {{meta[0].name}} and was published on {{meta[1]}}</span><br>
                <input type="text" ng-model="comment"><br>
                <span>Type Your Comment: {{comment}}</span><br>
                <p>
                    Other Comments:
                    <ul>
                        <li ng-repeat="singleComment in comments">
                            {{ singleComment.name + ', ' + singleComment.comment }}
                            <br>
                        </li>
                    </ul>
                </p>
                <p>
                    Related Articles
                    <ul ng-hide="hsVar">
                        <li ng-repeat="article in articles | orderBy:'comments'">
                            {{ (article.title + ', ' + article.comments) | uppercase }}
                            <br>
                        </li>
                    </ul>
                </p>


                <button ng-click="hsVar = !hsVar">Hide/Show Related Articles</button>
                <button ng-click="alert();">Display Alert Box</button>
            </div>
           
            <div ng-controller="ctrlTwo">
            </div>
        </div>

        <script>
            var qnimate = angular.module('qnimate', []);

            qnimate.controller('ctrlOne', function($scope, $http) {
                $scope.title= "AngularJS Tutorial";
                $scope.meta = [{"name": "Narayan Prusty"}, "26 Nov"];
                $http.get("http://localhost/data.php").success(function(response){
                    $scope.comments = response.comments;
                });
                $scope.articles = [{"title": "Title 1", "comments": "Comments 3"}, {"title": "title 2", "comments": "Comments 1"}];
                $scope.alert = function(){
                    alert("Hello");
                }
            });
        </script>
    </body>
</html>

Here is the content of data.php file

<?php

header('Content-Type: application/json');

?>

{
    "comments" : [{"name": "Name 2", "comment": "Comment 1"}, {"name": "Name 1", "comment": "Comment 2"}]
}

Code Explanation

AngularJS follows MVC(Model-View-Controller) pattern of programming. Models are JavaScript variables or HTML input elements. View is the HTML markup(i.e., Angular directives) and AngularJS expressions which displays the models. Controller is used to group models and views together i.e., creates scopes(aka connects models and views) so that using JavaScript we can modify models dynamically. All the controllers are placed inside a AngularJS app.

AngularJS apps are written using directives(i.e., ng-* attributes) and expressions. When a directive is applied to an HTML element, the directive callback is executed by passing a reference to that HTML element. The callback decides what to do with it. For example: directives are used to defines models & controllers, they are used to manipulate DOM based on model value, filter models and also trigger events on the controller. You can also create your own directives and add them via AngularJS extensions. All the AngularJS directives except ng-app, ng-controller and ng-model are part of the view.

AngularJS also provides model validation. Every Model can be turned into true or false value using its $error property’s specific validation function. Every model is given an error property by AngularJS.

Apr 20, 2015Narayan Prusty
AJAX Request ExampleWordPress Visual Editor Generated Classes
Comments: 1
  1. rakesh
    5 years ago

    Hello this is testing of angularJS.

    Tanks:
    Rakesh Kushwah
    Iflair.com

    ReplyCancel

Leave a Reply to rakesh Cancel reply

To create code blocks or other preformatted text, indent by four spaces:

    This will be displayed in a monospaced font. The first four
    spaces will be stripped off, but all other whitespace
    will be preserved.
    
    Markdown is turned off in code blocks:
     [This is not a link](http://example.com)

To create not a block, but an inline code span, use backticks:

Here is some inline `code`.

For more help see http://daringfireball.net/projects/markdown/syntax

Narayan Prusty

I am a software engineer specialising in Blockchain, DevOps and Go/JavaScript. This is my personal blog where I write about things that I learn and feel interesting to share.

7 years ago 1 Comment Web Development
Share this
0
GooglePlus
0
Facebook
0
Twitter
0
Linkedin
  • Example
  • Title is: {{title}}
  • Code Explanation
Related Articles
  • requestAnimationFrame Tutorial
  • Intel XDK App using WordPress Backend
  • Playing Audio Using JavaScript – Web Audio API
  • Integrating Youtube in Intel XDK APPs
  • Twitter Cards Meta Tags Tutorial
Our Sponsor
My Books

2014 - 2015 © QNimate
All tutorials MIT license