First Taste of Angular

Published: Nov. 18, 2016, 7:53 p.m. Back

Author: rachell

Because I won a scholarship with Toptal, I've also won a mentorship with someon in-network to help me reach my goal of becoming a fullstack web developer. It took some delay to get started, but they found me a mentor. I was told he had some backend but mostly was highly experience in front-end development.  I was a bit hesitant at first but was pleasantly suprised after talking with him. We are set up to chat once a week for an hour and inbetween chats I'll do some homework and get tips on parts I'm stuck on. We started in mdi-October, so now that it's been a month I wanted to record some progress so I can remember everything we've done but also to share. I'll 

My mentor is Sergio. You can check out all his credentials on the link.

Day 1:

Ideally, on the first chat in this kind of situation is that you get to know eachother and set a list of goals and project ideas. Because I was applying for jobs and doing coding challenges and projects I put him right to work with some help on a project I was doing. He was able to give me some tips to get me started and actually got a job offer because of some of the work on that project. It was setting up a server, use an API and manipulate an API, work with a mongodb and run tests to see if your code passes. 

Day 2:

 The second chat we had was the typical get to know eachother and set goals. He recommended choosing a project and gave me some ideas that other people had done. I'll go back about a month to when I first got an idea for something I wanted to make. I was at a meeting for my city's refugee council, a council that meets regularly to try to set up better services and organize the community to help with the influx of refugees. One thing that the organization struggles with is that they have no place to store donations. One person at the meeting mentioned that he wanted to make a database that people could list their donation and when someone else visits the site they can list what they need and if the items match their contact info could be shared. There are some concerns over who could be a user and who could donate/request donations. 

The person who recomennded this was going to use PHP but I thought this would be a good idea for my toptal project, and if it works out they could use it. So I decided I wanted to make that for my project.

Day 3: 

Starting with Angular: 

Since I have never touched angular before, we set up a simple hello world app and the user inputs their name. I was amazed at how perfectly the output came right on the page without a refresh. I sound like I've never touched a computer before, but after working with python, django and basic front end (html/css/bootstrap), where if we want to see updated info we have to refresh, I was pleasantly surprised at this new tool I'm adding to my toolbelt. Day three was mostly getting a feel for Angular. 

My homework this day was to set up the basic backend for my app. I decided to use django because that's what I know, but also it will be useful when it's passed to a refugee-affiliated organization because any non-programmer will be able to easiliy manage site via django-admin page.

Day 4:

I had my basic django models set up but wasn't sure how to connect them to angular.

So the refugee donate app has(will probably change a lot but this was the main idea):

  • Users:
    • login/logout
  • Profile:
    • username(foreign key from users)
    • organization(if applicable) 
  • Contact Method
    • user(foreign key from userprofiles)
    • phone number
    • email
    • prefered contact method(choice)
  • Donations that have fields of : 
    • items
    • details
    • condition(choices)
    • location
    • published date
    • user(foreign key)
    • category(foreign key)
    • subcategory(foreign key)
  • Requests
    • item
    • location
    • published date
    • details
    • contact method(foreign key from profile)
    • user(foreign key)
    • category(foreign key)
    • subcategory(foreign key)
  • Category
    • order
    • title
  • Subcategory
    • order
    • title
    • link
    • category(foreign key to category)

So for day 4 we incorporated our previously made 'hello world' app into my new django 'donate' app. We got it working so that users will enter their name and email and it will return this info on the page. We also added some donate objects onto the page, with the fields 'items' and 'details'. 

We also realized we will need to use tastypie to help with handling api. So my homework was to read up and incorporate tastypie into my django app. 

 

Day 5:

I didn't do my homework, so we spent day 5 working to set up Tastypie correctly.

I also: 

  • set up resource.py for DonateResource
  • got the json object via the api
  • created three html pages: people.html, donate.html, index.html, instead of having it all on one index page because it was getting crowded. 
    • <nav>
      <a href="#/landing">Landing</a>
      <a href="#/people">People</a>
      <a href="#/donate">Donate</a>
      </nav>
      <div ng-view="">
      </div>

Homework: 

  • Since we set up 'item' and 'details' under donateController.js, my homework was to add the other fields. 

Day 6: 

I did some of my homework, but because the other fields involved selecting from a list and foreign keys(category, subcategory) I got a bit stuck. 

What we did today: 

  • Created 3 new js files:
    • peopleController.js
    • donateController.js
    • index.js
  • Added build schema in resources.py in DonateResource per: http://stackoverflow.com/questions/12611038/in-django-tastypie-can-choices-be-displayed-in-schema
    • def build_schema(self):
      base_schema = super(DonateResource, self).build_schema()
      for f in self._meta.object_class._meta.fields:
      if f.name in base_schema['fields'] and f.choices:
      base_schema['fields'][f.name].update({'choices': f.choices,})
      return base_schema
  •  Moved api get/post to to apiservice for reusability
    • create apiService.js
    • replace <$http .... > with apiSvc
 

Homework:

 You can check my status here. Or clone it and play with the app yourself. 

New Comment