Saturday, 9 April 2016

Getting Started With AngularJS

I've only done a couple of projects with AngularJS, but the hardest part of using Angular each time has been just getting up and running. After that it's been pretty plain sailing. So here is a starting point to get me (and you?) hitting the ground running next time.

The project uses ngRoute and ngResource to create a single page app to call a REST web service (http://jsonplaceholder.typicode.com).

All the JavaScript dependencies are hosted on CloudFlair so there is nothing extra to download.

To turn this into a real project, you're going to ant to refactor the code a little, pull controllers and and services into their own files etc, but like I said, the code is just a starting point that works.

angularjs-demo.html

<!DOCTYPE html>
<html>
  <head>
    <title>Angular JS Demo</title>

    <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.css" rel="stylesheet">

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.3/jquery.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/js/bootstrap.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.3/angular.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.3/angular-route.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-resource/1.5.3/angular-resource.js"></script>

    <script src="angularjs-demo.js"></script>
  </head>

  <body ng-app="angularjs-demo">
    <div class="collapse navbar-collapse" role="navigation">
      <ul class="nav navbar-nav">
        <li><a href="#/posts">Posts</a></li>
      </ul>
    </div>

    <div class="container">
      <div class="panel panel-default">
        <div class="panel-body">
          <div ng-view></div>
        </div>
      </div>
    </div>
  </body>
</html>

posts.html

<!DOCTYPE html>
<html>
  <head>
    <title>Angular JS Demo - Posts</title>
  </head>
  <body>
    <div>
      <h4>Get Post by ID</h4>
      Post ID: <input type="text" ng-model="id" />
      <button ng-click="query(id)" type="button">Get Post</button>
    </div>
    <div>
      <h4>Post JSON</h4>
      <pre>{{postsResponse| json}}</pre>
    </div>
  </body>
</html>

angularjs-demo.js

angular
  .module('angularjs-demo', [
    'ngRoute',
    'ngResource'
  ])
  .config(function ($routeProvider) {
    $routeProvider
      .when('/posts', {
        templateUrl: 'posts.html',
        controller: 'PostsCtrl'
      })
      .otherwise({
        redirectTo: '/posts'
      });
  })
  .factory('Posts', function ($resource) {

    var POSTS_URL = 'http://jsonplaceholder.typicode.com/posts/:id';

    return $resource(POSTS_URL, {},
      {get: {method: 'GET'}}
    );
  })
  .controller('PostsCtrl', function ($scope, $log, Posts) {

    function query(id) {
      return Posts.get({id: id},
      function (data) {
        return data;
      }, function (err) {
        $log.error(JSON.stringify(err));
      });
    }

    $scope.query = function (id) {
      $log.info("id = " + id);
      $scope.postsResponse = query(id);
    };
  });

Source Code

Posted by at