Understanding AngularJS: My Notes

As stated before, I had mixed feelings about Angular. I was instantly smitten but confused by the actual application of it all at the same time. So I thought I would just share a collection of notes I've taken over the course of building my app in case you were struggling too. I'll also insert snippets of code from my app for demonstration purposes, where applicable.

I am by no means an expert, but I am a pretty good note-taker. Please correct me if I'm wrong with anything you see here via the comments so I can update this post (and learn) accordingly. By the way, if you are in the San Diego area, Girl Develop It will be giving an Angular JS class on May 2nd, which I'm really looking forward to! Perhaps afterwards I'll come back and update this post with more notes, so expect this particular post to change quite a bit from its original post. 

What is Angular JS?

It's a front end JavaScript framework that allows you to create responsive, dynamic websites. You should know HTML, CSS and JavaScript to use it. Typically, Angular will communicate with a backend application that parses its data into JSON for use. So instead of a website refreshing the entire page and assets, Angular allows it to only refresh the parts with the new data/information, allowing your page to react super fast! 

Helpful Bits and Bobs to know:

  • Modules - Where we write our code, and how we encapsulate our code for maintainability purposes. It's also where we define any dependencies we may need for our app. In the example above, I defined my Angular app by name ("app"), then listed (aka "injected) its dependencies ("['ui.router', 'ngResource', 'templates']").
  • Directives - We can add behaviors and bind javascript code to our HTML via Angular's "directives".  There are several built in already, but you can also create your own. In my example, I am telling the HTML to use my module named "app", via a built-in Angular directive "ng-app". When this document loads, it will run my "app" module. Any HTML following this directive will be treated as part of the Angular app. My personal fav built-in directive is "ng-repeat", exemplified below. "Ng-show" is pretty helpful too because I could allow a button to be visible if a condition is true, for example. "Ng-submit" is another worth mentioning. The example below says "When this form is submitted, call my editReview function (which is a custom built function that posts to my Rails API, saving the Angular data submitted via this form)". Get to know directives; they're all very useful. 
  • Expressions - How we insert dynamic values into the HTML. They will be in between double curly braces, such as "<h1>{{"hello" + "world"}}</h1>". When the page renders, you'll see "Hello World" as the h1 header, interpolated from the expression. It will also evaluate other data types, such as {{ 1 + 2 }}.
Screen Shot 2016-04-20 at 12.53.37 PM.png
  • Controllers - Help us get data onto a page and it's where we will define our functions and values. Note that its name must be Capitalized and it must contain the word "controller" as well. In the example above, I've created a "MeetupsController" to capture meetup.com API's "results", in a variable called "events". For this example's sake, I then use an expression in my HTML, such as "{{event.name}}" to print the name of the event, which evaluated from the data represented in JSON, below.

In combination with a "filter" (which I haven't explained yet), and a built-in directive called "ng-repeat", when the controller is called I am able to print selected information of the "events", as shown below. You can also give controllers aliases directly in the HTML or when defining the controller itself (which I've done below on line 43, but let me not get ahead of myself and complicate things). However something important to note is that the "scope" of the controller only exists where you define it. So had I called "ng-controller="MeetupsController as meetups" on a div element within the HTML directly instead, I could only access {{meetups.event.name}} from inside of that div alone. 

 app.js file

app.js file

  • Filter - is a type of service. The above example is encapsulated inside of another div where "ng-model="ctrl.search" is defined within an input element. I call my custom "ctrl.search" filter (matching the name of the model) in ng-repeat so that when I type in the search box (aka the input field) Angular will display only the events that match my search! But Angular also comes with built-in filters, such as formatting dates which you can see detailed in the "date" code of the example above.
  • Services - Gives your controller additional functionalities, such as accessing and retrieving JSON data from an API via injecting a $http service. The built-in services all start with a "$". They return promise objects, such as .success() or .error(). 
  • Dependency Injection
  • Scope
  • Two-way Data Binding - I love this feature. This allows you to type in a form (for example), and see a live preview of what you're typing. It's pretty exciting to see demonstrated
  • Validations - 

This post is not finished! I'll continue to update this post in the upcoming weeks!