In my first AngularJS post, I went through a very basic example of what Angular can do. We covered how to loop over an array. This time around, I would like to look at using ng-model to take input, how to create a basic Angular RSS reader (because that’s apparently “my thing“), and how to create modules.
A web application is a boring thing if it isn’t interactive. Let’s look at an example of to use ng-model to take / use input. [View the fiddle]
<div ng-app>
<input type=”text” ng-model=”message” />
<input type=”range” min=”1″ max=”100″ ng-model=”size” />
<hr>
<div style=”font-size:{{size}}em;”>{{message}}</div>
</div>
If you look at the output of the above code, anything that you enter into the text box appears below the <HR>. The slider controls the size of the text.
So, what-else can we do with this? [View the fiddle]
<div ng-app ng-controller=”FeedCtrl”>
<form ng-submit=”ChangeFeed()”>
<input type=”text” ng-model=”InputRssFeed” size=”30″ placeholder=”{{rssFeed}}”>
<input class=”btn-primary” type=”submit” value=”Load Feed”>
</form>
<h1>{{feed.channel.title}} – {{feed.channel.description}}</h1><ul>
<li ng-repeat=”item in feed.channel.item”>
<h2><a href=”{{item.link}}”>{{item.title}}</a></h2><p>{{item.description}}</p>
</li>
</ul>
</div>
// This gets the feed, using YQL as a proxy
function RefreshFeed($scope, $http) {
// Define the JSON feed for fetching the RSS feed
jsonFeed = “https://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20xml%20where%20url%3D'” + $scope.rssFeed + “‘&format=json”;
// Actually fetch the feed
$http.get(jsonFeed).success(function (data) {
$scope.feed = data.query.results.rss;
});
}// The controller
function FeedCtrl($scope, $http) {
// The default feed
$scope.rssFeed = “http://steinbring.net/feed/”;
// Trigger getting of the feed
RefreshFeed($scope, $http);// The function triggered by ‘load feed’
$scope.ChangeFeed = function () {
// Change the RSS feed
$scope.rssFeed = $scope.InputRssFeed;
// Trigger getting of the feed
RefreshFeed($scope, $http);
};
}
If you look at the output of the above code, it is taking the output of an RSS feed and populating a <UL> with it. It is using this site’s RSS feed as the default but you can enter a new one into the text box, and click ‘Load Feed’ to load a new one.
So, AngularJS has a concept of modules. What’s a module? It’s a way of compartmentalizing your code. Let’s look at how we might make a module with the above code. [View the fiddle]
<div ng-app=”FeedReader” ng-controller=”FeedCtrl”>
<form ng-submit=”ChangeFeed()”>
<input type=”text” ng-model=”InputRssFeed” size=”30″ placeholder=”{{rssFeed}}”>
<input class=”btn-primary” type=”submit” value=”Load Feed”>
</form>
<h1>{{feed.channel.title}} – {{feed.channel.description}}</h1><ul>
<li ng-repeat=”item in feed.channel.item”>
<h2><a href=”{{item.link}}”>{{item.title}}</a></h2><p>{{item.description}}</p>
</li>
</ul>
</div>
// This gets the feed, using YQL as a proxy
function RefreshFeed($scope, $http) {
// Define the JSON feed for fetching the RSS feed
jsonFeed = “https://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20xml%20where%20url%3D'” + $scope.rssFeed + “‘&format=json”;
// Actually fetch the feed
$http.get(jsonFeed).success(function (data) {
$scope.feed = data.query.results.rss;
});
}// The module
var FeedReader = angular.module(‘FeedReader’, []);// The controller
FeedReader.controller(‘FeedCtrl’, [‘$scope’, ‘$http’, function ($scope, $http) {
// The default feed
$scope.rssFeed = “http://steinbring.net/feed/”;
// Trigger getting of the feed
RefreshFeed($scope, $http);// The function triggered by ‘load feed’
$scope.ChangeFeed = function () {
// Change the RSS feed
$scope.rssFeed = $scope.InputRssFeed;
// Trigger getting of the feed
RefreshFeed($scope, $http);
};}]);
If you take a look at the output of the above code, it does the same thing as the first version. The feed stuff is all within ‘FeedReader’ except for ‘RefreshFeed()’. Let’s see if we can get all of the functionality into the ‘FeedReader’ module … [View the fiddle]
// The module
var FeedReader = angular.module(‘FeedReader’, []);// The controller
FeedReader.controller(‘FeedCtrl’, [‘$scope’, ‘$http’, function ($scope, $http) {
// The default feed
$scope.rssFeed = “http://steinbring.net/feed/”;
// Define the JSON feed for fetching the RSS feed
jsonFeed = “https://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20xml%20where%20url%3D'” + $scope.rssFeed + “‘&format=json”;
// Actually fetch the feed
$http.get(jsonFeed).success(function (data) {
$scope.feed = data.query.results.rss;
});// The function triggered by ‘load feed’
$scope.ChangeFeed = function () {
// Change the RSS feed
$scope.rssFeed = $scope.InputRssFeed;
// Define the JSON feed for fetching the RSS feed
jsonFeed = “https://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20xml%20where%20url%3D'” + $scope.rssFeed + “‘&format=json”;
// Actually fetch the feed
$http.get(jsonFeed).success(function (data) {
$scope.feed = data.query.results.rss;
});
};}]);
Everything is inside of the module, but there is some duplication of code.
Have a comment, tip, or question? Leave a comment below.