Skip to content

Instantly share code, notes, and snippets.

@SamDarbonne
Last active September 16, 2016 22:30
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save SamDarbonne/459ccd6a760d1bcea86a99c54c9b66e5 to your computer and use it in GitHub Desktop.
Save SamDarbonne/459ccd6a760d1bcea86a99c54c9b66e5 to your computer and use it in GitHub Desktop.

#Creating an Angular.js app from scratch #don't read this it's probably bad advice

The first and most important thing to do when creating an angular app is to initialize your HTML page as an angular app, otherwise nothing else we do will have any meaningful effect. To do this we simply add ng-app to the base HTML element that we want to be our app. Generally this will be the html tag.

once our page is initialized as an angular app, it's time to actually do some work on the angular app. first we need to create a controller. It's a good idea to keep things modular by building the controller in a separate file. We'll call this exampleController.js. This means that our main javascript file will need to require our controller. Angular wants us to import our controller as a new name since we will be using a view model instead of $scope. General practice is to call "exampleController as exampleCtrl". Now we can hook the controller up to our HTMl document. Angular does this with the ng-controller html attribute. The controller can be attatched to any html tag, but is usually attatched to a div that contains all the components we want to control.

within the tree of the element holding our controller, we can use double curly brackets '{{}}' to let angular know we want it to interpret the contents of the bracket as a javascript expression. using curly brackets we can have anything from simple mathematical equations (like 2 + 2) to complex function calls. The data used can refer to any properties of the view model we build in the controller.

Within the controller we can define variables or methods that apply to the instance of the controller on the html page. The newer recommended way to do this is to set within the controller constructor this=vm. then we can call any information in the instance with vm.propertyName. we can call any methods defined within the constructor using vm.methodName().

Updated List for Books App (Front End Only)

#Index.html

  1. ng-app
  2. ng-view
  3. script and route module in header

#View Templates

  1. template for all books
  2. template for book by id
  3. template for update form (show/hide)
  4. they go inside views/templates

#Appjs

  1. config controller
  2. .when all books
  3. .when one book

#JS Controllers

  1. delete controller for each book
  2. edit controller for each book
  3. they go in controllers dir inside public/scripts

#Things to check

  1. npm install
  2. bower install
  3. run python server
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment