Tuesday, August 2, 2016

Importing other Javascript libraries

Will improve on UI. Want to show how long ago post had been submitted.

can get timestamp from story.created_utc but its a unix timestamp, number of seconds since 1970. Need to convert this raw timestamp to more user friendly. Momentjs does this.

momentjs angular

install using bower - similar to npm but its used for web dependencies, libraries we want to use in application.

Go to terminal

bower -v // to check that its installed already.

Google Search “momentjs angular”
https://github.com/urish/angular-moment

“Installation

You can choose your preferred method of installation:

Through bower: bower install angular-moment --save
Through npm: npm install angular-moment moment --save
…”

bower install angular-moment —-save

// will now have ‘angular-moment’ and ‘moment’ folder under ‘lib’ folder

“Usage

Include both moment.js and angular-moment.js in your application.

<script src="components/moment/moment.js"></script>
<script src="components/angular-moment/angular-moment.js"></script>”

Put below in head tag

<script src=“lib/moment/moment.js"></script>
<script src=“lib/angular-moment/angular-moment.js"></script>”

“Add the module angularMoment as a dependency to your app module:

var myapp = angular.module('myapp', ['angularMoment’]);”

var app = angular.module('myreddit', ['ionic','angularMoment']);

<ion-content>      
  <div class="list">            
    <a class="item item-thumbnail-left" ng-repeat="story in stories" href="{{story.url}" target="_blank">
      <img ng-src="{{story.thumbnail}}" ng-if="story.thumbnail.indexOf('http') === 0">
      <h2 class="story-title">{{story.title}}</h2>
      <p>
        <span am-time-ago="story.created_utc" am-preprocess="unix"></span>     
        -
        {{story.domain}}
      </p>
    </a>          
  </div>
</ion-content>

Summary: how to add 3rd party js library using bower.

No comments:

Post a Comment