Dynamic data binding using angularjs | 2my4edge

11 November 2014

Dynamic data binding using angularjs

After a long time i am posting this topic about angular js concept. AngularJS is a JavaScript framework that makes it easier to implement web applications. its created by google. Now a days google is implementing angular js for its own sites. So follow my updates you can learn easily angular js.

dynamic-data-angularjs

DOWNLOAD                   LIVE DEMO

This post i am explain about how get dynamic data (Database data) using angular js. instead of fetching array from the database we are encoding that data as json to pass the function and bind the data to angular js.

DATABASE
Create sample database table usernames
CREATE TABLE IF NOT EXISTS `usernames` (
`id` int(11) NOT NULL AUTO_INCREMENT,
`username` text NOT NULL,
PRIMARY KEY (`id`)
)

BASIC.PHP
Set config in your PDO basic function file in php
$DBVARS=array(
    'username'=>'root',
    'password'=>'',
    'hostname'=>'localhost',
    'db_name'=>'2my4edge'
);


HTML
That highlighted js is most need in angular js. ng-repeat code angular control structure act as for loop. that basic file is PDO file. that is very important one. For PDO Details Click here.
<html>
    <head>
        <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js">
        </script>
    </head>
        <?php
            include_once('basic.php');
            $user_db="SELECT * FROM usernames";
            $names=dbAll($user_db);  
        ?>
    <body>
        <div ng-app="" ng-controller="usernames"> 
            <ul>
                <li ng-repeat="user in names">  {{ user.username }} </li>
            </ul>
        </div>
        <script>
            function usernames($scope,$http) {
                $scope.names =  <?php echo json_encode($names); ?>  }
        </script>
    </body>
</html>

This the one the part of example in angularjs here after we will post this kind of advance current trend web development related topics. i hope this post very helpful for you next post i will explain angularjs basic functions.

if you have any suggestion or query about this topic comment on below.

Topic is Posted by Karthick Muthu. ( Mostlikers ). Thanks.


RELATED POSTS :







4 comments:

  1. This is exactly what I was searching for. Awesome post. Thanks a bunch. Helped me in taking the class for my students. Wish to follow your posts, keep writing! God Bless!

    Selenium Training in HRBR Layout
    Selenium Training in Kalyan Nagar Bangalore

    ReplyDelete
  2. Thank you for sharing the article. The data that you provided in the blog is informative and effective. Best Devops Training Institute

    ReplyDelete
  3. Naresh IT is the best Online software Training Institute for Java, AngularJS, C#.NET, ASP.NET, Oracle, Selenium, Android, C Language, C++, Hadoop, RPA, DevOps, Salesforce, IoT, AWS, Data Science Training Chennai, India which provides online and classroom training classes.

    ReplyDelete

^