angular js

setup your full stack web application seed with loopback and angular

 

Angular 1 Setup:

One day i had a situation to develop a web application from scratch. The next thing every one of us search for will be a  seed file or a standard scaffolding. I started searching for yomen angular generator and got it. Well, I installed the yomen generator and generated the scaffolding. I got angular2 scaffolding but i need angular 1.4. I tried the old angular yomen generators available ingithub. But some many are unmaintained and have some issues with installation. So i gave up searching for generators and started searching for seeds. Seeds are like scaffoldings, which can be used on the fly. I mean we can just download it and run some commands (like npm install and   bower install) to use it immediately. Many  seeds are available with jade templating(without htmls in angular views). I prefer  htmls and js in front end. Then i searched for angular with gulp seed and got a very good repo. Here is the repo  angular-gulp-seed . Download the repo and setup your front end with angular. start running your angular app with gulp serve 

Note: please note that these are issues with only angular1 but not with angular2. Angular2 came with powerful angular-cli. Which completely automates your development work flow. Please google for the cli documentation 🙂

Loopback 2 Setup:

Loopback is an opensource nodejs APIs development framework built on express. Here is the documentation about it. Please go through this link for loopback 2 installation. Loopback provides a strong scaffolding tool slc. We can generate APIs on the fly with loopback. Use slc commands to generate loopback(server side) scaffolding, which contains models and properties. Now your loopback(server side) app is ready.Once your setup is ready start your loopback application withnode . which immediately kicks npm start to start your app.  That’s it, your full stack application is up and running .

Loopback’s extrordinary features:

The great feature provided by loopback framework is Angular loopback sdks. Which are angular http services for all loopback models/endpoints. Means that we need not write our http services for each and every end point. That saves a hell lot of time.Here is the link for angular loopback SDK documentation. One more best feature is the inbuilt sexy swaggerUI provided by loopback. Which is amazing and provides Swagger views for all your endpoints. Loopback provides a database independent query system. Using which database migrations are matter of seconds. Yes, you heard me right!. Loopback model queries are database independent and we can change our database connectors at any time. You can read about loopback db connectors here. Threre are lot more features in loopback like inbuilt authtoken provider and $resource for angular sdks etc. Its okay, time to start our application. Point your angular app to loopback app and start running both the apps.
I am not promoting loopback or angular. I am a frequent user and developer uses these frameworks. I wrote this post to just share my knowledge and to share my love for both angular and loopback.
Happy coding friends 🙂

Bower installation for yeoman angular app

When we are behind proxy some times bower install gives error as :

retry Request to https://bower.herokuapp.com/packages/angular failed with ECONNRESET, retrying in 1.2s

Then we have to update .bowerrc file(which is in root direcory)with below proxy configuration:

{
  "directory": "app/bower_components",
  "registry": "http://bower.herokuapp.com",
  "proxy":"http://proxy-name:port-number/",
  "https-proxy":"http:/proxy-name:port-number/",
  "strict-ssl": false
}

Dont miss the https-proxy.I missed it once and i was unable to download some dependent repos of bower.After this you can happily go with your bower install

How i implemented drag and drop in my Angular App

Hi,

Here i am using angular accordion list and codeformer’s angular-drag drop to demonstrate the drag and drop feature.Please have a look at  angular-dragdrop and accordion before reading this post.I am using accordion list items as draggable items. I drag the each list item  and drop  into a square shaped droppable area.Here i am posting a screenshot.

DragandDrop

Here is the fiddle i have created for demo. I explain the fiddle’s code in this post.First i go with the draggable list.Here is the code:

<div accordion="" ng-repeat="friend in friends">
          <div accordion-group="" class="accord" heading="{{friend.name}}" data-drag="true" data-jqyoui-options="{revert: 'invalid',helper:cloneHandler}" ng-model="friends" jqyoui-draggable="{index: {{$index}},placeholder:'keep',animate:true, onStart:onDragSuccessok(friend, $index)}"></div>
        </div>

Here we have two divs one holds the accordion directive and the other have accordion-group directive.They are to generate the accordion list view. In either of these divs we can place our angular-drag drop directive.

1.the data-drag=”true” makes the div element draggable.
2.In jqyoui-options revert:’invalid’ decides Whether the element should revert to its start position when dragging stops..
3.The helper option is to customize the clone.So whats the clone?
When we drag the draggable item, the clone of the draggable item will be extracted and moved.For that we have to explicitly specify the helper:’clone’ option.If we want to customize the clone, we can write our own clone handler like this helper:cloneHandler. The cloneHandler is a function that returns a html template.We can see that in fiddle.
4.In jqyoui-draggable the placeholder option: If true, the place will be occupied even though a dragggable element is moved/dropped somewhere else. If ‘keep’ is supplied, the original item won’t be removed from the draggable.

In progress…..:P

ng-init function works in directive’s controller than in link function

I came across this when i am writing custom directives for my app.I am trying to fire a function using ng-init in the following way in directive template.

<div ng-init = “myfunc()”></div>

I wrote  myfunc()  in link function, it did not work.But it worked in controller.Since the controller runs before/at time of  compilation and link runs after compilation of directive.Its good to use link function for dom manipulations like binding events to directive elements and adding/removing html data. Controller is good at handling scope related things like accessing functions and isolated scope variables of directive.