Angular Recipe: Avoid empty option in HTML select element

HTML select in Angular JS

HTML select element is often used to create a drop-down list.
You could use either ng-repeat or ng-options directive to fulfill it with options.

Note that the value of a select directive used without ngOptions is always a string.

That's why i prefer to use ng-options directive rather than ng-repeat one.

Note: if ng-model value is undefined, has a wrong type or is not contained among the options set, than selected element into your drop-down would be empty.

---

Note: It also might happen when ng-model variable is distinct into the child-scope from the one that u've defined in JS.

If you are working with objects that have an identifier property, you should track by the identifier instead of the whole object.

Should you reload your data later, ngRepeat will not have to rebuild the DOM elements for items it has already rendered, even if the JavaScript objects in the collection have been substituted for new ones. For large collections, this significantly improves rendering performance. If you don't have a unique identifier, track by $index can also provide a performance boost.

According to (Prototypical inheritance) your directive might create a child-scope, which could distinct your ng-model="fooBar" variable and no longer refer up to the parent’s $scope.fooBar variable.

To not storing the data directly on the scope helps in this case.

Angular Recipe: Manipulate Dom

Angular JS

Manipulating the DOM from your directive is fairly simple.
You just have to use link function instead of controller into your directive.

Inside directives, it is best practice to use controller only when you want to share functions with other directives. All other times you should use link.

Ketnote: AngularJS Filters

Angular JS

The Filters become handy first of all for the output formatting. Here are some regular angular filers:

• lowercase/upercase {{ uppercase_expression | uppercase}}
  
  

  {{'london' | upercase}}   > LONDON



• currency (Adds currency symbol)
  {{ currency_expression | currency : symbol : fractionSize}}
  
  

  {{amount | currency:"USD$"}}  > USD$350



• number (Formats a number as text)
  {{ number_expression | number : fractionSize}}
  
  

  {{ 97.523 | number:2}}  > 97.52



• date (Formats date by template)
  {{ date_expression | date : format : timezone}}
  
  

  {{'1288323623006' | date:"MM/dd/yyyy 'at' h:mma"}} 
   > 10/29/2010 at 6:40AM

  {{note.created | date:"'Created on a' EEEE 'in' MMMM"}} 
   > Created on a Friday in October
  



• json (Converts a JavaScript object into JSON string)
  {{ json_expression | json : spacing}}
  
  

  {{ {'name':'value'} | json }}  > {"name": "value"}

Keynote: AngularJS Services

Angular JS

To share the reusable logic & prevent duplication we've to use services:

• Value (Used Often) - simplest recipes, that shares value through the app repeatedly.


• Factory (Most Commonly Used) - shares methods and objects.


• Service (Rarely Used) - shares instances of methods and objects.


• Provider (Commonly Used like Configurable Factory) - shares methods & objects but allows configuration.


• Constant (Commonly Used) - shares the constant values within app configuration.

Angular Recipe: Passing data into your Directive

Angular JS

It's often needed to pass some data into your directive from outside.

By default, directives are restricted to attribute 'A' type and are therefore restrict: 'A' is redundant.

Inside directives, it is best practice to use controller only when you want to share functions with other directives. All other times you should use link.

If a directive is only returning the link function you can write it as just return anonymous function: return function(scope, element, attr) {/*...*/};

Angular Recipe: Insert html string from js into html (solve Error: [$sce:unsafe])

Angular JS

Keynote: AngularJS Less Backend

Angular JS

Take a look on the previous article to refresh your memory

• Angular JS Basics shornotes.
• Angular JS Do the regular things.
• Angular JS Do the custom things.
• Angular JS Routing.

## Mock the Backend Responses With using an Angular module called `ngMockE2E` u can mock the Back-end responses data, so u can develop without real BE ready. * When you sent some requests via `$http` service the responses with the locally mocked data would be returned by `$httpBackend`. * You can use it for the Unit Testing as well.

Keynote: AngularJS Routing

Angular JS

Take a look on the previous article to refresh your memory

• Angular JS Basics shornotes.
• Angular JS Do the regular things.
• Angular JS Do the custom things.

## Routing With using an Angular module called `ngRoute` u can to create a layout template and to have multiple views by adding routing. * So, when you now navigate to `app/`, you are redirected to `app/index.html/#/users` and the users list appears in the browser. * Or, when u click add note the url changes to `app/index.html#notes/new` so template for adding the new note is displayed. ---- ## Add the application routing To use routing u've to declare your module with `ngRoute` dependency. *app.js* angular.module('MyApp', ['ngRoute']) .config(['$routeProvider', function($routeProvider) { $routeProvider .when('/notes', { templateUrl: 'templates/pages/notes/index.html' }) .when('/users', { templateUrl: 'templates/pages/users/index.html' }) .when('/notes/new', { templateUrl: 'templates/pages/notes/edit.html' }) .when('/', { redirectTo: '/users' }) .otherwise({redirectTo: '/notes'}); }]);

Keynote: AngularJS do the custom things

Angular JS

Take a look on the previous article to refresh your memory

• Angular JS Basics shornotes.
• Angular JS Do the regular things.

## Directives Directive it's just html annotation in some div that triggers corresponding js behavior. <!-- directive ---- controller name -- alias to controller--> <div ng-controller="StoreController as store"> *Note: the alias is only visible only whithin this div.* **Include directive** * **ng-include** - allows to include the specified file into your elements. `<div ng-show="tab.isSet(1)" ng-include="'product-description.html'">` *Note: pass the name directly as a string using the single quotes `('...')`* ---- ## Custom directive Instead of using `ng-include` e.g. `<h3 ng-include="'product-title.html'"></h3>` you can create a custom directive e.g. `<product-title></product-title>`. The main benefit of the using the custom directives is that those allows you to write HTML that expresses the behaviour of your application. Directives can also be used for: * Expressiong the Complex UI * Calling events and registering event handlers * Reusing common components

Keynote: AngularJS do the regular things.

Angular JS

Take a look on the previous article to refresh your memory
Angular JS Basics shornotes. ## Angular Entities Overview DMCE are base AngularEntities to work with: * **Directives** – HTML annotations that trigger Javascript behaviors. * **Modules** – Where our application components live. * **Controllers** – Where we add application behavior. * **Expressions** – How values get displayed within the page.

Keynote: AngularJS Basic Short Notes

Angular JS

Superheroic JavaScript MVW Google Framework.
Google framework popular for Single Page Applications building.
Angular is used worldwide especially as enterprise way of building powerful web apps.
The new 2.0 version of Angular is focused on ECMAScript 6 and probably won't be compatible with the 1.4
Angular is used by: youtube, lynda.com, netflix, etc.