Angular.js Basics
I have been working with Angular lately to figure out how to use it. I thought I would have to learn a lot to get it up and running but it was actually not to bad. Here are some basics that will help you get a site up and running with Angular.js.
ui-router
A friend recommended that I use ui-router, instead of the Angular.js way of handling routes. This is because ui-router handles MVC in terms of state. This does help organize your app and views by specifying the route in the configuration. We will see some examples later, but be sure to include this file and add it as a module, like so:
In the layout.html:
In the app.js: var routerApp = angular.module('fbombcode', ['ui.router']);
Here we have some scripts that import angular and ui router from a CDN. Then in the app.js, which is your client side code, you have a line that registers the UI router.
Create a page and template
In order to get angular going, you should add more logic to your layout.html to get it working.
In the layout.html:
In the app.js: var routerApp = angular.module('fbombcode', ['ui.router']); routerApp.config(function($stateProvider, $urlRouterProvider) { $urlRouterProvider.otherwise('/home'); $stateProvider .state('home', { url : '/home', views : { 'content': { templateUrl: '/partials/angular/home.html', controller: 'homeContentController' }, 'sidebar': { templateUrl: '/partials/angular/sidebar.html', controller: 'sidebarController' } } }); });
The first thing we do is create an html page that has ng-app, and a ui-view. In our example, we have Content and Sidebar. When we visit the home url, which is our starting url, we need to provide 2 templates, one for Content and one for Sidebar. To specify the template and logic it executes, like MVC, you should provide a templateUrl and controller. So far so good.
Put it together
Next let’s add a template and controller logic. Notice that for each ui-view, we have a template and a controller for the logic to create. Here is how it looks:
In home.html: In sidebar.html:
routerApp .controller('sidebarController', function($scope, $http) { $http.get("/api/categories").success(function (data, status, headers, config) { $scope.categories = data.\_embedded["fbomb:categories"].filter(function (el) { return el.CategoryName != 'AboutMe' && el.CategoryName != 'Project'; }); }).error(function (data, status, headers, config) { $scope.categories = [{'CategoryType':'Loading...'}]; }); $http.get("/api/events?current=true").success(function (data, status, headers, config) { $scope.events = data.\_embedded["fbomb:events"]; }).error(function (data, status, headers, config) { $scope.events = [{'EventName':'Loading...'}]; }); }) .controller('homeContentController', function($scope, $stateParams, $http) { var category = $stateParams.categoryName; var url = "/api/articles"; $scope.PageTitle = "test"; if(category !== null && category !== '' && category !== undefined) { url += "?category="+ category; } $http.get(url).success(function (data, status, headers, config) { $scope.articles = data._embedded["fbomb:articles"]; $scope.$root.PageTitle = 'Dropping f bombs on code!'; $scope.$root.PageDescription = 'This is links to several articles. You can also search and filter on the side to the right. Lastly, if you are looking at what is going on locally in Detroit, check out the event section.'; $scope.$root.PageKeywords = ''; }).error(function (data, status, headers, config) { $scope.articles = []; }); })
The examples are showing how I created my home blog page again in Angular. While the html templating is pretty standard, the controllers are the more interesting part. I am making calls with $http to get data from the web services I have. Then I parse the response and populate the template and boom, everything works.
Future thoughts
While it has been cool to use Angular, there are a few issues with it regarding SEO. I think for my site, I will leave it the way it is, but if you have a simple SPA page requirement that does not need SEO, then use Angular. You can get examples of the angular I wrote on the github page: https://github.com/supermitsuba/node.blog. Also, if you want to see it work, I think I will post the angular version at: /ng.