Tuesday 20 January 2015

Using ng-init directive in AngularJS

angularjs

Hey as I am new to angularjs but still I am loving it, it's a really wonderful technology by google. The main thing I find interesting in it is it's single page website concept, it's really awesome. You don't need to reload the page, everything is within a single page. Anyway I am not going into that details, which actually requires ng-view to be explained. So here I am with a small program to show that you can work with angularjs directive without even writing a single line of javascript code. All you need is to tell the browser that you will be using angularjs by declaring ng-app, initialize you data in an array using ng-init, and display data using ng-repeat. So here is a small attempt with such an example which is script less, the only script required is the angular api.

<html ng-app>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.8/angular.min.js"></script>
</head>
<!-Data is initiallized into myData  within the body tag using ng-init-->
<body ng-init="myData=['Shane Watson','Bret Lee','Glen Mcgrath','Shane Warne','Ricky Ponting','Adam Gilchrist']"> 
 <!-Data is repeated within p tag using ng-repeat  and data diplayed within {{}}-->
<p ng-repeat="data in myData">{{data}}</p>
</body>
</html>

No comments: