Angular.js Patterns you should follow

Angular.js Patterns you should follow

All over javascript we are filled with patterns. JAvascirpt patterns, Jquery patterns, And now angular patterns. So I found that these angular patterns will help me get into less trouble using angular down the road... Scope Pattern //Don't do this app.controller('MyCtrl', function($scope){ $scope.doStuff = function(){ //Really long function body }; }); //Do this instead var MyCtrl = function($scope){ var _this = this; $scope.doStuff = function(){ _this.doStuff(); }; }; MyCtrl.prototype.doStuff = function(){ //Really long function body }; MyCtrl.$inject = ['$scope']; app.controller('MyCtrl', MyCtrl); Skinny Controller pattern //Don't do this // ng-click='getDetail()' $scope.getDetail = function(){ $http.get('/api/item/detail/'…Read more …

Angular.js: Your Applications Configuration

If you come from a traditional backend language like C# or any backend language and use a MVC framework then your half way into understanding the logic of Angular.js. When building traditional (C#, RUBY) MVC applications you always have a config file. In C# ASP.net MVC you have a WebConfig file for exmaple. When building applications using Angular.js there is also a config section or file. Here is an example of the configuration for an angular.js application. You first define you application then using your applications variable you declare the config function and…Read more …

Angular.js change ng-include template using jquery and $compile

Html: <div ng-include="template.like"> </div> Controller.js controllers.controller("Blog", function($scope, $http, $compile ){ // we change the template in the html $($event.target).parent().attr("ng-include", "template.like") // we then compile the html so angular can update the template var $container = $($event.target).parent(); $compile($container)($scope); });Read more …

Angular.js Basics

Angular is based on Directives which are expressed as html tags, attributes and even css classes! Everything in angular is based on modules¬† or better yet we should base everything on modules when using angular. The best way to look at it is In angular a module is a scope of html code that you will start working on. So when you declare ng-app="AppName"¬† in the html of a page your declaring that this is your scope to work on. Then we add scopes on top of that. For example, Controllers in angular.js…Read more …