//pratice angular version
//show what can angular do , and how
//require: underscore, angular, angular-route
// you can see the demo from below link
http://jsfiddle.net/34XS9/
//datas
var posts = [
{
id: 1,
title: "first post",
comments: [
{
content: "comment 1-1"
},
{
content: "comment 1-2"
}
]
},
{
id: 2,
title: "second post",
comments: [
{
content: "comment 2-1"
},
{
content: "comment 2-2"
}
]
},
{
id: 3,
title: "third post",
comments: [
{
content: "comment 3-1"
},
{
content: "comment 3-2"
}
]
}
];
var topNews = [
{
title: "My life for aiur"
},
{
title: "Show me the money"
}
];
var messages = [
{
text:"message1"
},
{
text:"message2"
}
];
//app & controller & route
//here use ng-template tag for templateUrl
var praticeApp = angular.module('praticeApp', [
'ngRoute'
]);
praticeApp.config(['$routeProvider',
function($routeProvider) {
$routeProvider.
when('/', {
templateUrl: 'site-index',
controller: 'siteIndexCtrl'
}).
when('/posts', {
templateUrl: 'post-index',
controller: 'postIndexCtrl'
}).
when('/post/:post_id', {
templateUrl: 'post-view',
controller: 'postViewCtrl'
}).
otherwise({
redirectTo: '/'
});
}]);
praticeApp.controller('baseCtrl', function ($scope, $rootScope) {
$scope.search = "test search";
$rootScope.formatted = function(title){
return title + " formatted";
};
});
praticeApp.controller('siteIndexCtrl', function ($scope) {
$scope.helloworld = "Hello World!";
$scope.messages = messages;
});
praticeApp.controller('postIndexCtrl', function ($scope) {
$scope.posts = posts;
$scope.topNews = topNews;
$scope.addNewsTitle = "";
$scope.addNews = function(){
$scope.topNews.push({
title : $scope.addNewsTitle
});
$scope.addNewsTitle = "";
};
$scope.removeNews = function($index){
$scope.topNews.splice($index,1);
};
});
praticeApp.controller('postViewCtrl', function ($scope, $routeParams) {
$scope.showComment = false;
$scope.post = _.findWhere(posts, {id: parseInt($routeParams.post_id, 10)});
$scope.toggleComment = function(){
$scope.showComment = !$scope.showComment;
};
});
<!--layout & templates-->
<body ng-app="praticeApp" style="margin: 50px;">
<div ng-controller="baseCtrl">
<input type="search" placeholder="search text" /> <span>show the main layout</span>
</div>
<div ng-view ></div>
<script type="text/ng-template" id="post-index">
<div class="post-index">
<p>
<a ng-href="#/">back</a>
</p>
<ul>
<li ng-repeat="post in posts">
<a ng-href="#/post/{{post.id}}">{{post.title}}</a>
</li>
</ul>
<ul>
<li ng-repeat="post in posts">
<a ng-href="#/post/{{post.id}}">{{formatted(post.title)}}</a>
</li>
</ul>
<ul>
<li ng-repeat="topNew in topNews">
{{topNew.title}}
<button ng-click="removeNews($index)">remove</button>
</li>
</ul>
<input type="text" ng-model="addNewsTitle"/>
<button ng-click="addNews()">addnews</button>
</div>
</script>
<script type="text/ng-template" id="site-index">
<div class="site-index">
<h1>{{helloworld}}</h1>
<input type="text" ng-model="helloworld" /> try edit it!
<ul>
<li ng-repeat="message in messages">
{{message.text}}
</li>
</ul>
<p>
<a ng-href="#/posts">link to posts</a>
</p>
</div>
</script>
<script type="text/ng-template" id="post-view">
<div class="post-view">
<h2>{{post.title}}</h2>
<p>
<a ng-href="#/posts">back</a>
</p>
<button ng-click="toggleComment()">
<span ng-if="showComment">hide comment</span>
<span ng-if="!showComment">show comment</span>
</button>
<ul ng-if="showComment">
<li ng-repeat="comment in post.comments">
{{comment.content}}
</li>
</ul>
</div>
</script>
</body>
1 comment:
thanks for sharing information,nice article
Angularjs Training In Hyderabad
Post a Comment