AngularJS Development

  • Maintained by Google and community of corporations and individuals, AngularJS is an open-source web application framework.
  • It helps addressing various complex challenges encountered while developing the single-page application.
  • AngularJS aims both development and testing of the application via MVC- Model View Controller and MVVM – Model View View Model architectures.
  • The intention of the blog post is to touch-up the high level gigs of AngularJS.
  • Please comment on this post about the technical part you might want us to write about.

AngularJS Development helps addressing various complex challenges encountered while developing the single-page application.
Continue reading “AngularJS Development”

Learning AngularJS Basics

  • Its job is to define the application and serve as a container for all the controllers of that application.To create a module, let’s look at the following code:scriptvar app = angular.module(“appModule”, []);/scriptThis is the syntax to create an AngularJS module.
  • To achieve this, let’s enclose our HTML application in the appModule parameter by using the following code:scriptvar app = angular.module(“appModule”, []);/scriptbody ng-app=”appModule” …/bodyAs you can see, I’ve used the ng-app directive to enclose the body/body of my HTML with the myModule that we created earlier in our script/script tag.Our Module is now ready to use!
  • Let’s start creating a controller by understanding the following code:scriptvar app = angular.module(“appModule”, function($scope) { // Code inside the controller };/scriptLet’s understand the above syntax.The code app.controller means that our controller belongs to the app module that we created earlier.
  • That can be done using the ng-controller directive.scriptvar app = angular.module(“appModule”, function($scope) { // Code inside the controller };/scriptbody ng-app=”appModule” ng-controller=”appController” …/bodyOur controller is now controlling this body … /body tag.Example | AngularJS Module and ControllerProblem statement: We have to create a Module named appModule.
  • Don’t worry, I’ve explained this exact example in the next lesson.Solution: Here’s the solution to this problem statement, I encourage you to try it yourself before looking at the solution:scriptvar app = angular.module(“appModule”, function($scope) { $scope.name = “Fahad A. Chaudhry”; };/scriptbody ng-app=”appModule” ng-controller=”appController” {{ name }}/bodyConclusionIn this article, we tried to cover the following areas:AngularJS ModuleAngularJS ControllerIn the next ArticleIn the next article, we’ll try to understand the following topics:AngularJS Scopes

In out previous lesson we discussed how to add AngularJS in to your HTML page, what are some basic AngularJS attributes, what are Directives, Expressions and what’s the difference between them. A…
Continue reading “Learning AngularJS Basics”

Learning AngularJS Basics

Learning AngularJS Basics | Part 2  #javascript

  • Its job is to define the application and serve as a container for all the controllers of that application.To create a module, let’s look at the following code:scriptvar app = angular.module(“appModule”, []);/scriptThis is the syntax to create an AngularJS module.
  • To achieve this, let’s enclose our HTML application in the appModule parameter by using the following code:scriptvar app = angular.module(“appModule”, []);/scriptbody ng-app=”appModule” …/bodyAs you can see, I’ve used the ng-app directive to enclose the body/body of my HTML with the myModule that we created earlier in our script/script tag.Our Module is now ready to use!
  • Let’s start creating a controller by understanding the following code:scriptvar app = angular.module(“appModule”, function($scope) { // Code inside the controller };/scriptLet’s understand the above syntax.The code app.controller means that our controller belongs to the app module that we created earlier.
  • That can be done using the ng-controller directive.scriptvar app = angular.module(“appModule”, function($scope) { // Code inside the controller };/scriptbody ng-app=”appModule” ng-controller=”appController” …/bodyOur controller is now controlling this body … /body tag.Example | AngularJS Module and ControllerProblem statement: We have to create a Module named appModule.
  • We’ll discuss $scope in following lessons.Solution: Here’s the solution to this problem statement, I encourage you to try it yourself before looking at the solution:scriptvar app = angular.module(“appModule”, function($scope) { $scope.name = “Fahad A. Chaudhry”; };/scriptbody ng-app=”appModule” ng-controller=”appController” {{ name }}/bodyConclusionIn this article, we tried to cover the following areas:AngularJS ModuleAngularJS ControllerIn the next ArticleIn the next article, we’ll try to understand the following topics:AngularJS Scopes

In out previous lesson we discussed how to add AngularJS in to your HTML page, what are some basic AngularJS attributes, what are Directives, Expressions and what’s the difference between them. A…
Continue reading “Learning AngularJS Basics”

Using Promises in AngularJS Views

  • This admittedly contrived service’s ‘getMessages’ function takes a callback, then waits two seconds (using Angular’s $timeout service) before passing an array of messages to the callback function.
  • In both the callback and promise versions of our controller, we end up with a ‘messages’ property on the scope.
  • AngularJS allows us to streamline our controller logic by placing a promise directly on the scope, rather than manually handing the resolved value in a success callback.
  • Our original controller logic for handling the promise was relatively verbose, considering how simple the operation is:

    To simplify this, we can place the promise returned by ‘getMessages’ on the scope:

    When Angular encounters a promise inside the view, it automatically sets up a success callback and substitutes the promise for the resulting value once it has been resolved.

  • Using promises directly on the view is a feature of AngularJS that many people are unaware of, but it opens up a lot of opportunities for making our controllers as lean as possible.

One of the lesser known yet more surprisingly powerful features of AngularJS is the way in which it allows promises to be used directly inside views …
Continue reading “Using Promises in AngularJS Views”

3 Things to watch out for when AB testing an AngularJS app

3 Things to watch out for when AB testing an AngularJS app  #abtesting

  • setInterval({ /* VWO Code */ }, 100)
    VWO’s support team was very helpful when it came to understanding how to work around Angular’s DOM injection replacing our VWO test code.
  • Basically, VWO fires it’s code, then AngularJS was injecting it’s DOM causing us to see conflicting results on different routes.
  • See this code snippet as an example:

    If you are wondering where you should be adding this code, then check out this screenshot below:
    How to add custom code to VWO test.

  • ng-if vs. ng-show
    The last tip isn’t focused specifically on VWO, but instead highlights a potential issue with using ng-if on an element you are testing.
  • A better alternative is to use ng-show, so VWO can replace the elements in the DOM without AngularJS overwriting any of that.

Creating A/B tests is a lot of fun, and the excitement is compounded by the value your company can get out of a successful testing program. Our team gets to work on a lot of A/B tests across multiple tools and multiple web stacks. Which means that we’ve seen a few cases where things can go sideways…
Continue reading “3 Things to watch out for when AB testing an AngularJS app”

Exchange Data Between Directive and Controller in AngularJS

  • The project required me to write a directive for a canvas, get the Base64 image data when a user draws on it, and make it available to the controller of the page which contains the directive.
  • This boils down to the fact that you need to access the scope of a Directive from a page Controller and access the scope of a page Controller from a Directive.
  • Now let’s say we have the following controller:

    And the following template:

    The problem: we would like to bind the count variable of myCtrl to the internalCount variable of the counter directive.

  • This can easily be solved by binding a variable from the controller to the scope of the directive.
  • Your directive should now look like this:

    And your template like this:

    You will find a working fiddle here with all the code to this quick tutorial on how to exchange data between a directive and controller in AngularJS.

In this Quick Tutorial we will look at How to Exchange Data Between Directive and Controller in AngularJS and bind the scopes to each other.
Continue reading “Exchange Data Between Directive and Controller in AngularJS”

AngularJS Fundamentals

AngularJS Fundamentals course by @simpulton #angularjs

  • In this series, you will learn how to build a non-trivial AngularJS application from the ground up through a series of small, digestible lessons.
  • As we build out our sample application, Eggly, you will quickly start to identify useful techniques that you can apply to your own projects.
  • In this first series, we are going to focus on the absolute essentials for getting an AngularJS application up and running.
  • We will start with a static HTML page and learn how to bootstrap an AngularJS application and add in functionality using AngularJS views and controllers.
  • When we complete this section, you will have a functioning Eggly application where you can create, update and delete bookmarks and filter them based on the selected bookmark category.

AngularJS is an incredibly powerful framework but sometimes it can be confusing and frustrating trying to figure out how all of these amazing features actually fit together. In this series, you will learn how to build a non-trivial AngularJS application from the ground up through a series of small, digestible lessons.

As we build out our sample application, Eggly, you will quickly start to identify useful techniques that you can apply to your own projects. The videos series is broken out into three series so that you can start at whatever level is most appropriate for you.

### Getting Started

In this first series, we are going to focus on the absolute essentials for getting an AngularJS application up and running. We will start with a static HTML page and learn how to bootstrap an AngularJS application and add in functionality using AngularJS views and controllers. When we complete this section, you will have a functioning Eggly application where you can create, update and delete bookmarks and filter them based on the selected bookmark category.

Don’t miss **[Part 2: Application Architecture](https://egghead.io/series/angularjs-application-architecture)**!

Continue reading “AngularJS Fundamentals”