Posts

Showing posts with the label AngularJS

Angular 1.X Filter by Properties

Filtering By Nest Property $scope.list = [ { 'Name': 'A', 'Manager': { 'Name': 'X' } }, { 'Name': 'B', 'Manager': { 'Name': 'X' } }, { 'Name': 'C', 'Manager': { 'Name': 'Y' } }]; <ul> <li ng-repeat="e in list | filter: {Manager: {Name: filter.key}}"> {{e.Name}} (Manager: {{e.Manager.Name}}) </li> </ul> F ilter not equals <li class = "list-group-item" ng-repeat = "question in Questions | filter:{ Id: '!-1'}" > <div href = "#" editable-text = "question.Text" > {{question.Text}} </div> </li> How to get key of the object?   (not in the view) The first parameter to the iterator in  forEach  is the value and second is the key ...
Read more

A Dependency of Dependency Inject

Image
    I have voiced my opinion in the past on dependency injection, and even got myself in some stupid conversations with other developers who are little obsessed with this topic. I was first caught off guard because I questioned for my support for angular which I'll come back to in a minute. My first rule for using any tool or technology is to using it for its greatest strength and really use it or not at all. Which is creating tests around my code and creating versions of those dependencies."we need dependency injection for unit testing/scalability".  Neither of these reasons are wrong and I agree them but if you build blindly follow them without reason you miss the point. I one point used Ninject, and was actually stumped on the explanation given. This was because up to that point dependency injection was something I understood how to use but not its method. However I moved pass that point and started making my opinion clear. Show me the tests! The reason I given was sc...
Read more

Angular: Custom Value Checkbox

Sometimes the dba won't change a field's datatype in the database which why handle all my databases now days. Just some quick notes for handling custom values to send back to the database for a form post. Using angular 1.5... <input type = "checkbox" ng-model = "item.selected" ng-true-value = "'TRUE'" ng-false-value = "'FALSE'" />  - " add quotations because it's an angularjs expression and it also needs to be a constant"  Resources http://plnkr.co/edit/ehXObXaXicC1BvKyQtmI?p=preview Angular view not updating when checkbox clicked Passing dynamic value with single quote as a ng-true-value expression fails
Read more

Material Angular Time Picker

Image
    Continuing off my article on android's material timepickers I wanted to include this feature in the web based version of mypatco. I don't think it will be officially included in the material angular project but just something I could have as my own and if anyone comes across it to use it just as any other component. The key difference with timepickers vs. datepicker just picking time, since time is a more necessary feature for cases like notifications or alerts/alarms. Missing Cancel/Ok Buttons First and foremost I recommend checking out the project which I forked to personalize and strip out any code related to datepicker. Since the datepicker is already implemented in material angular, instead I'm just going to focus on time pickers.   The rest of my notes are in the repo's issue tracking . You may see the results on mypatco.org for an example.
Read more

Intuitive Third Party Packages

   In relevance  to my package npm "flavorstrap" this is a little of a working progress for me and a few of my github projects I hopes it helps others. I've based this heavily on what I've seen others do  and what I think looks helpful to others. In that there enough context provided for others to go off from github package. I I face this problem with sometimes but I love to code so I spend the extra time to read someone else's code using a project as well. It helps if the documentation isn't there or if the code shows something the developer didn't think of.  Now this is just in my opinion and not so much a complain but advice for myself. I would definitely say I have used my share of third party libraries more often than actually written any but I do appreciate the ones well written. For example bootstrap and android's documentation pretty good and they even include some examples. However there are a couple of things I would suggest. For starters d...
Read more

Dynamic Development to Static Deploy

   I believe this is an approach beneficial to any application for performance reason. If an application needs to be scalable but can remove the dynamic references there is a opportunity for improvement. With task runner or build process like gulp, grunt and asp.net mvc's bundle for example this is the same solution. What I'm point to is the things I want to create in javascript but don't necessarily need to be dynamic. For example Angular's template property with directives or component's and even routes. While I do like to use templateUrl in development for performances reason I want to include it in the statement as a template. If I'm trying to make the most of my code I need to inject directly but for validation or organizational reasons I want to point it dynamically.    This isn't a new problem in the computer science field but I think a lot of web developers will agree to injecting regardless if its development. It makes the code a little less mana...
Read more

UI-Bootstrap Collapsible Sticky Footer

    I could have done this a lot of ways and ultimately I made it work with javascript modifying the class names. I also had to create multiple class names which I didn't like to much, I might come back and improve this but for now this is was I got. Also I call bootstrap+angularjs = ui-bootstrap, not sure if that's common sense but thought I should include it somewhere in my notes. Working Example: http://plnkr.co/edit/2N9ENlbw3bSvg1W9n0ch?p=preview This little css was key to prevent any kind of animation on the collapse, which would result in a scrollbar appearing on the body. A scrollbar can appear when the content's too long but not on the sticky foot duh! .no-animate { transition-duration: 0.0125s; } Research Angular-UI Bootstrap Collapse without animation - Stack Overflow http://jsfiddle.net/paulalexandru/Z2Lu5/  - Was looking at this to see if I could reuse it but I ended but just doing my own thing. Another way which I've seen Using a sticky...
Read more

AngularJS: Single Page App Notes

    This is article long overdue and I just wanted to talk about a few things I think others should know before starting. My first piece of advise is use use ui-route rather than ng-router. Really get to know ui-router because of its awesomeness. Using Parameters     I've come to really enjoy using parameters in all my apps and if you work with them well enough you can find some really cool ways to simplify your code. Example using the value of a parameter to set up detailed information in a child view saves time building out the whole app because with the url you can save the state. Just a small way to change your app rather than always looking up a global list. So that in mind for tracking information. Also when possible make "beautiful routes" or readable routes it helps other people following the structure. Backward Compatible     I have been able to get ui-router to work with ie8 using es5-shim, if you don't need to control the browser history y...
Read more

My Career at Coriell Institute and Personal Achievements

Image
     The time  has come where I need a change in my career and sadly that requires me to leave my current position at Coriell Institute . So just like what I did way  back in 2013 with Northern Safety , I thought I would wrap things up in an article and look back on my achievements.  Achievements (Order of Completion) The ones with asterisks are ones I built in groups.  Atlas Project - Storage Module -   Provided an interface to store unique data sets in multi-forms . Coriell Bio-Repository Catalog *  Atlas Project - Manager Module -  Provided managers to control other user to access data. Blits Project - Modules   Issues & Repairs* - Reported equipment  that were broken or had problems. Inspections* - Collected equipment w/ schedules for inspections.  Maintenance - Collected equipment  for  regular maintenance and  setup schedules.  Dashboard* - G raphical dashboard ...
Read more

AngularJS: ng-model cannot be assigned to functions

Image
    This was one of the errors I faced when I started out with Angularjs, and the problem comes from thinking like Jquery developer still. I still use Jquery heavly in a few of my personal projects but have been avoiding this issue complete since. Common error : nonassign Non-Assignable Expression Feedback from users about pics in my blog. Solutions     One approach is to use directives to solve the issue and another is to use ng-init from what I've seen but I prefer using directives instead.  http://jsfiddle.net/z5z9s / - an example using ng-init (n ot by me) . Resources AngularJS - ngModel cannot be assigned to function - Stack Overflow http://stackoverflow.com/a/17793772/1265036
Read more

UI-grid: Bootstrap Styled and Dynamic Height for Pagination

Image
     If you've looked at my catalog-demo , you might have noticed that I used UI-grid instead of Ng-grid. I still work on a few ng-grids but I've started to really use ui-grids. Code : $scope.gridOptions.onRegisterApi = function(gridApi){ gridApi.pagination.on.paginationChanged($scope, function (pageNumber, pageSize) { var newHeight = (pageSize * 30) + 68; angular.element(document.getElementsByClassName('grid')[0]).css('height', newHeight + 'px'); console.log('get pageSize - ', pageSize); }); }; Solution:  https://fassetar.github.io/blog-examples/uigrid-responsiveheight/   Notes     To get the grid's height multiple the grid by 30px and the page size. Then add 68 to prevent the scroll-wheel moving the grid ever so slightly. Set the default for you're page size in css as well. The css I created to make the grid look like a bootstrap ...
Read more

UI-grid: Bootstrap Styled and Dynamic Height for Pagination

Image
     If you've looked at my catalog-demo , you might have noticed that I used UI-grid instead of Ng-grid. I still work on a few ng-grids but I've started to really use ui-grids. Code : $scope.gridOptions.onRegisterApi = function(gridApi){ gridApi.pagination.on.paginationChanged($scope, function (pageNumber, pageSize) { var newHeight = (pageSize * 30) + 68; angular.element(document.getElementsByClassName('grid')[0]).css('height', newHeight + 'px'); console.log('get pageSize - ', pageSize); }); }; Solution: Notes     To get the grid's height multiple the grid by 30px and the page size. Then add 68 to prevent the scroll-wheel moving the grid ever so slightly. Set the default for you're page size in css as well. The css I created to make the grid look like a bootstrap table is very basic and probably could use a lot more styling. Like...
Read more

Angularjs + Asp.net MVC Routes with Partial Views

Image
     Recently I've had the great opportunity to create something pretty awesome and I think it helped me seperate or clear up any confusion I had on project where I used two MVC frameworks on top of each other. Those two frameworks are usually AngularJs and Asp.net MVC. It can be a little hairy especially if you're new to Angularjs but when you use them right web developing is be a snap. Client Side $routeProvider.when('/', { templateUrl: 'home/_home', controller: 'AppCtrl' }).when('/product/:id', { templateUrl: function(params) { return 'home/_product/' + params.id; }, controller: 'AppCtrl' }).otherwise({ redirectTo: '/' });   What's really important here is the route for product and the parameter (look where it takes id). The id can hookup to any middle tier and from there it can handed to a model bound partial view. You can even mix in angular html attributes since the page wil...
Read more

The Three Types of Material Design Libraries Available

Image
     There are a tons Material Design projects out there but I choose these three because of their popularity and for the fact I just found these projects interesting for a few of own projects. I work in a variety of environments so each gave me certain advantages over the other. This article is just how I broke them down and what projects I plan use them for.                  Angular-UI Team | Materialize | Material Design for Bootstrap https://material.angularjs.org/ Useful for when you are using angularjs. missing some stuff or just not shown in the documents. Great for my single page example. http://fezvrasta.github.io/bootstrap-material-design/ Useful for bootstrap project and updating them to material design themes. Wish they used Sauce labs Tests like bootstrap. Great for updating my bootstrap sites and my blog. https://github.com/Dogfalo/materialize Uses Jquery, and simple to get up and run just li...
Read more

AngularJS: Not Working on Plunker

Image
    Plunker is my goto cloud based IDE for quick setup and demo purposes. It's all about what you prefer really and there a tons of choices out there. This is two common problems that I faced but haven't since I'm aware of them, they're not really a problem anymore. I just wanted to keep notes on this incase I forget in the future. Plunker First: " The plunker has  ng-app  instead of  ng-app='directive'  in the  index.html " Resource:  Why this angularjs example doesn't work on plunker? Second:  " use   angular . bootstrap ( $ ( '#your_div_loaded_in_ajax' ),  "myApp" , "other_module" ]);" Resource:   AngularJs ReferenceError: angular is not defined Notes     Also for the angular file don't use async or defer. This always goes without saying your custom script should come after the angular file even if its in the index.html file itself; just for good measure. 
Read more

AngularJS: Facets in a Search Grid

    Sometime back I really needed this code however it came a little too late and unfortunately didn't make it into the final product. However I have since then built a complete explain showing how to hand facets with little javascript code and with a whole lot of functionality! Requirements Load appropriate facets, make a search. Update the UI, reload page if necessary but scale up for a single page application. Make things bookmarkable but don't lose that awesomeness from SPA's. Example http://jsfiddle.net/t7kr8/211/  - I forget where I found this but its probably buried somewhere in my resources. My Example https://fassetar.github.io/blog-examples/catalog-facets/ Javascript code var myApp = angular.module('myApp', []); myApp.controller('mainController', function($scope) { $scope.items = [{ item:"apples", flag: true }, { item:"oranges", flag: true }, { it...
Read more

AngularJS: Select All Checkboxes

    There were very few examples I found on this idea however most of them were not complete or depended on libraries were not included in my projects. I could simply include them and call it a day but that would be too easy. So I took the best example I could find and rewrote it in just AngularJS. Code: $ scope.items = [ {item: 1 , flag: true }, {item: 2 , flag: true }, {item: 3 , flag: true }]; $scope . allNeedsClicked = function () { var newValue = ! $ scope.allNeedsMet(); for ( var i = 0 ; i < $ scope.items. length ; i ++ ) { $ scope.items[i].flag = newValue; } }; $scope . allNeedsMet = function () { var needsMet = []; for ( var i = 0 ; i < $ scope.items. length ; i ++ ) { if ( $ scope.items[i].flag === true ) needsMet. push ( true ); } console .log ( $ scope.items. length , needsMet. length ); return (needsMet. length === $ scope.items. length ); }; Solution:  https:/...
Read more

Bootstrap: Navbar Header

    I don't see too many examples in bootstrap with something like this but what it is incase you don't know is a banner of some kind above the navbar. In fact I don't see too many sites with this kind of structure lately and from my experience I can understand why not. If you're going for responsiveness it's difficult to create since you are always checking to see if you have enough space on both sides for whatever it is your trying to display in between. From the sites that I have seen that do have this can really pull it off and use something similar to bootstrap's affix feature.     When I first started using bootstrap which was sometime around 3.0, I was using the navbar-brand to hook into the styles already written for me. However since  bootstrap 3.1    navbar-brand   has now been given a height where before I was using the image's auto or attributes to adjust the height. I was able to give my header an even amount of padding around my he...
Read more

Popular posts from this blog

Aspetcore: NLog with Postgresql

This Article is base ASP.Net Core 2 and the latest version of Nlog. 1. Install NLog and the Postgresql Package Using NuGet to install the package into your ASP.NET Core project: PM > Install-Package NLog.Web.AspNetCore PM > Install-Package Npgsql 3. Register NLog Add in your Startup.cs  public void Configure ( IApplicationBuilder app, IHostingEnvironment env, ILoggerFactory loggerFactory ) { ... env.ConfigureNLog( "nlog.config" ); ... // make sure Chinese chars don't fk up Encoding.RegisterProvider(CodePagesEncodingProvider.Instance); //add NLog to ASP.NET Core loggerFactory.AddNLog(); //add NLog.Web app.AddNLogWeb(); } 4. Add to Your Controller Add a logger object to your Controller. private readonly ILogger<YourController> _logger; Modify the constructor to use it public YourController ( ILogger<YourController> logger = null ) { if ( null != logger) { _logger = logger; ...
Read more

Mongodb Cheatsheet

This cheat sheet is based on the latest version of mongodb, which initial had setup and didn't encounter any problems. However that all changed when I was working remote and forgot I disabled the port no my network, rather than with the server. So I went pointing around where I didn't need to and ended up messing things up. The Best tutorial out there is of course on digital ocean for my setup on ubuntu 16.04 , this articles isn't so much about getting setup. I just wanted to include it because I found myself looking back at it to see if I missed a step. Bugs/Problems Now comes all the messed up things I found and had to deal with. firewall - Port seems to be open, but connection refused try using 0.0.0.0 in the bin_ip for the /etc/mongo.conf try sudo ufw disable and check to see if it works without the firewall (probably still wont but worth a shot), then just sudo ufw enable. Make sure port 27017 is open. Then check this  linux - Connection refused to MongoDB e...
Read more

Installing Windows on Acer chromebook 15 cb3-532

Much of my notes are just small problems I faced (what's new!) haha. Either way this was a really fun project to do for a friend and I got excited once I research all the information. You can find instruction videos but what helped me the most was the coolstar website. Sadly they don't have parameters in the url so I can link the machine I used in this article. -  https://coolstar.org/chromebook/windows-install.html Scared of messing with the bios? Don't be!    So you need to first remove the screw to put a legacy bios on the machine. Its easy to backup the chrome os one and with the same steps to change it. You can go back in and revert to the chrome version bios. Its that last part that had me worried and its very easy to do.  Problems getting into Developer Mode?   Follow the instructions to the letter, during the step to disable the OS verification, press Ctrl-D to boot into os. If you hear two beeps I would go back to set one. I got in a loo...
Read more