Skip to content

Instantly share code, notes, and snippets.

@laurakathleen
Created September 16, 2016 00:24
Show Gist options
  • Save laurakathleen/85dc82b9dc1339e87deb3a0136235389 to your computer and use it in GitHub Desktop.
Save laurakathleen/85dc82b9dc1339e87deb3a0136235389 to your computer and use it in GitHub Desktop.
A rundown of necessary steps for making an Angular App
##Guide to making an Angular.js app:
###Setup:
- define ng-app on your HTML
- initialize an Angular app in js
- create a controller in js and inject a dependency
- add your objects/functions applicable to your controller within its definition
- define a controller in your HTML with an alias
- add any necessary input fields/buttons, making sure to include ng-model as an attribute if you plan on using such inputs in your requests
- use ng-repeat to display any initial data you want to display
- in your HTML, us {{}} syntax to include any data that needs to be templated in
###GET:
####Getting data from back-end to Angular front-end
- if you haven't already, inject your $http service into your controller
- define your method "GET" and include your url route for receiving data
- follow '.then' with your success/error functions
- in your success function, make sure to use the key from the object you are requesting data from (ex. vm.albums = response.data)
- in your error function, console the error for any necessary debugging
###CREATE:
####Creating data
- in your form tag, add a submit event handler, telling Angular to call a function that's going to create this new piece of data in the controller
- in js, create a new function to create whatever data you are adding
- define your "POST" method, your url, what data you will be creating, and your success/error functions
- your data should represent what kind of data you are creating (ex. vm.newAlbum)
- follow '.then' with your success function, which should push this new data into the array that you wish to add it to (ex. vm.albums.push(response.data);
- in your error function, console the error for any necessary debugging
###DELETE:
####Deleting data
- add a delete button in your HTML
- give the button an ng-repeat directive and use ng-click to attach an event handler to the button, telling Angular to run the function that will delete the selected data
- in js create the function that will delete the desired data
- set up your $http service, your "DELETE" method, your url path for accessing the specific data id that you'll be deleting
- follow '.then' with your success function, which should grab the index of the selected data to be deleted in your array, and splice the array at that index (splice helps)
- in your error function, console the error for any necessary debugging
###UPDATE:
####Updating data and then saving
- in HTML add an edit/update button
- give the button an ng-repeat directive and use ng-click to attach an event handler to the button, telling Angular to run the function that will grab the right data for updating
- use ng-show/ng-hide for showing/hiding appropriate HTML tags when editing is true
- create a button in HTML to save changes
- create a new input field with ng-show="editing" to replace the data as we edit it (do this for all editable inputs)
- in js, define your function to edit your data
- set up your $http service, your "PUT" method, and your url route to the specific data's id that you are editting
- include the data that you'll be editting
- follow '.then' with your success function, which should find the index of the editted data, splice the array at that index, and then replace it with the new data that was inputted
- in your error function, console the error for any necessary debugging
###Getting setup for back-end work for:
- run npm install and install any back-end packages such as mongoose, bower, body-parser, etc
- set up your server.js and controller.js files to handle your routes
- in server.js require the controllers (js) directory,express, body-parser, serve up your static files, and set up your HTML endpoints to send your files
- in server.js set up your routes for GET (ex. /api/albums) with your callbacks (ex. controllers.albums.index)
- make sure your server.js is listening for your port
- in your controller.js file, update your index function to respond with JSON for receiving all of the data
- make sure your controller.js file is exporting the modules
- your data should now be in your server.js and deleted from app.js and should be displayed on localhost
- set up your models files
- set up your schema and models with any attributes and data types needed for defining your schema
- require the model in your index.js and add it to the exports object
- you can move any hard-coded data from the controller (js) file to your seed file
- if you inserted id properties, take them out so mongodb can add its own
- seed your data and make sure that nodemon, mongod, and node seed.js are all running without errors
- delete any hard-coded data in your controllers function
- require the models in your controllers.js file
- adjust your index function to access the database instead of the server (you should now be 'getting' data to display from your database)
- set up the rest of your JSON API endpoints in server.js (app.get, app.post, app.put, app.delete) and define your callback functions
- in your controller.js, adjust your functions for show, create, destroy, and update so that it now accesses your database
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment