basic SPA (single page app) boilerplate for fast prototyping in angular

Creating this inside a Vagrant image (meaning there are extra steps to install the needed basic packages): Creating the Vagrant workspace: vagrant init ubuntu/trusty64; vagrant up; vagrant ssh; vi Vangrant # and then port forward 8080 to 8080 on the host Creating the boilerplate: mkdir myapp; cd myapp; sudo apt-get update; sudo apt-get install git; […]

Angularjs: template to setup just the UI part

Setting this up with Vagrant (therefore the extra steps / packages downloaded): $ mkdir src; vagrant init ubuntu/trusty64 $ vi Vagrantfile // modify the following lines: from:  # config.vm.network “forwarded_port”, guest: 80, host: 8080 to:   config.vm.network :”forwarded_port”, guest: 3000, host: 3000 from: # config.vm.synced_folder “../data”, “/vagrant_data” to:  config.vm.synced_folder “./src”, “/home/vagrant/[your project name]” $ vagrant ssh Once you are […]

angular.js: CRUD operations via $http

These are the basic operations you can do with $http: $http.get(): Accepts aURL and optional config object. Performs an HTTP GETrequest. $http.head(): Accepts a URL and optional config object. Performs an HTTP HEADrequest. $http.post(): Accepts a URL, data object, and optional config object. Performs an HTTP POST request. $http.put(): Accepts a URL, data object, and […]

angular.js: directives

Basic structure: myModule.directive(‘directiveName’, function(){ return { restrict: ‘AE’, replace: true, template: ‘<div class=”{{class}}”>some html, this could also be a reference to an external template. In which case, you can use templateUrl</div>’, link: function(scope, elem, attrs){ // elem is the HTML element the directive was applied to, and attrs are the attributes of the same } […]

boostrapping a MEAN app (angular.js, express, node.js, mongodb)

Complete code example here – in the folder you are creating your app, place a manifest file called package.json, example: { “name”: “yourappnamehere” } – install express and other dependencies: $ sudo apt-get update $ sudo apt-get install npm $ sudo apt-get install nodejs Note: copying and pasting these commands sometimes will give you the following error message: […]

bootstapping an angular.js app on top of rails

Complete example here – The following will skip jquery and turbolinks: rails new [your-app-name-here] –skip-javascript – But now you need to manually create the following file: app/assets/javascripts/application.js – And include the following in the file contents: //= require_tree . – put all your angular app files inside app/assets/javascripts, and include the following in your app/views/layouts/application.html.erb template: <%= javascript_include_tag […]