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; […]
Category Archives: Angular.js
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 } […]
angular.js filters
Creating one: .filter(‘truncate’, function(){ return function(input, limit){ return (input.length > limit) ? input.substr(0, limit)+’…’ : input; }; }) The first argument in the returning function is the input data we are filtering on, we can add any number of arguments after that. See it in action here
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 […]
Angularjs with Ruby On Rails app from scratch
# Assuming node is already installed, install the stuff needed to bootstrap the app: npm install -g yo npm install -g generator-angular # create your app (the name of the folder will be the name of your app): mkdir myapp; cd myapp; yo angular # in the series of questions, pick bootstrap (to make it easier […]
Angular.js: the basics
$scope $scope is what connects views and controllers. Most logic goes in the controllers. Controllers shouldn’t know what view they are operating on, their job is to produce a $scope (to keep dependencies light) The $scope can be considered a “quasi model”, it is the pure data variables and data objects that binds both the […]