Get Ionic framework working behind proxy

I have the error to create a new ionic project when running the command in windows 7
ionic start myproject

The solution is to set up the MAGIC environment variable in the computer settings, then it works.

http_proxy=http://username:password@hostname:port;

Error to download bower package in Visual studio 2015 RC when you are in corporate proxy

1. add a .bowerrc file in project,
{
"proxy": "http://192.168.11.22:8080",
"https-proxy":"http://192.168.11.22:8080"
}

2. Install Git seperately

3. go to command prompt and run the following cmd
git config --global http.proxy http://proxyuser:proxypwd@proxy.server.com:8080
git config --global https.proxy https://proxyuser:proxypwd@proxy.server.com:8080

Error to download npm package in Visual studio 2015 when you are in corporate proxy

This is the command to run to set up the proxy,

npm config set proxy http://proxy.company.com:8080
npm config set https-proxy http://proxy.company.com:8080

But where to run this command, the npm.cmd is in,
C:\Program Files (x86)\Microsoft Visual Studio 14.0\Common7\IDE\Extensions\Microsoft\Web Tools\External

Open a command prompt as administrator and run the npm config ...
Then it worked.

Custom asp.net identity 2.1 tables and primary keys

This is the codes that I use to set up the identity tables to use int as primary key.

public class User : IdentityUser<int, UserLogin, UserRole, UserClaim>



{
  public async Task<ClaimsIdentity> GenerateUserIdentityAsync(UserManager<User, int> manager)



{
  // Note the authenticationType must match the one defined in CookieAuthenticationOptions.AuthenticationType

var userIdentity = await manager.CreateIdentityAsync(this, DefaultAuthenticationTypes.ApplicationCookie);

// Add custom user claims here

return userIdentity;



}
  public string FirstName { get; set; }

public string LastName { get; set; }

public byte Level { get; set; }

public DateTime JoinDate { get; set; }




}
  public class UserRole : IdentityUserRole<int> { }

public class UserLogin : IdentityUserLogin<int> { }

public class UserClaim : IdentityUserClaim<int> { }

public class Role : IdentityRole<int, UserRole>



{
  public Role() { }

public Role(string name) { Name = name; }



}
  public class MyUserStore : UserStore<User, Role, int, UserLogin, UserRole, UserClaim>



{
  public MyUserStore(MyPortalContext context)

: base(context) { }



}
  public class MyRoleStore : RoleStore<Role, int, UserRole>



{
  public MyRoleStore(MyPortalContext context)

: base(context) { }



}

/////////////////////////////////////////////////////////

And they are customized to use different table names in MyPortalContext

protected override void OnModelCreating(DbModelBuilder modelBuilder)



{
  base.OnModelCreating(modelBuilder);

modelBuilder.Entity<User>().ToTable("Users");

modelBuilder.Entity<Role>().ToTable("Roles");

modelBuilder.Entity<UserLogin>().ToTable("UserLogins");

modelBuilder.Entity<UserClaim>().ToTable("UserClaims");

modelBuilder.Entity<UserRole>().ToTable("UserRoles");
}

Angular ng-repeat scope

Need to know that angular ng-repeat directive actually create child scope for each element.
so if you want reference the parent $scope value need to use $parent

<span ng-show="item.name == currentDbName"><input type="text" name="newDbValue" ng-model="$parent.newDbValue" />{{$parent.newDbValue}}</span>

Or else if you want to update the repeating item value, you need to use $index

<div ng-repeat="name in dbnames track by $index">
        <input type="text" ng-model="dbnames[$index]" />
</div>

the "track by $index" is new since Angular1.2 to make sure the text box won't lose focus for each key stroke

Angular test primer in Jasmine

To test angular controller in Jasmine, need to use the angular mocks to inject module and controller
Then in the controllerSpec test js file, we can inject the controller and scope

describe('expense controller', function () {

var $controllerTestConstructor;
var scope;

beforeEach(module('app'));

beforeEach(inject(function($controller, $rootScope){



$controllerTestConstructor = $controller;

scope = $rootScope;

}));
  it('should have three expense item', function () {
var ctrl = $controllerTestConstructor('expenseController', { $scope: scope });

expect(ctrl.expenseItems.length).toBe(3);

});

}); 

Angular module dependency injection

Angular provides the module functions to do the service injection. In this way, we can build our own service functions and inject into the controller to load it.

We can set up the module first, then call the app.js to set up the both module together, this is the example shows in the angular tutorial site.
https://docs.angularjs.org/tutorial/step_11

Here is the example for this way, there is a controller and it depends on the dataService to load the data. Each angular.module call is in its own js file.

angular.module('app', ['services', 'controllers']);

angular.module('services', [])
        .factory('expenseDataService', ['$http', expenseDataService]);

angular.module('controllers', [])
        .controller('expenseController', ['expenseDataService', expenseController]);

Also there is a simplified version. But you need to put app.js at first in the html page. In this way, all the dependency are created in the app module directly.
angular.module('app', []);

angular.module('app')
        .factory('expenseDataService', ['$http', expenseDataService]);

angular.module('app')
        .controller('expenseController', ['expenseDataService', expenseController]);

The full file is attached as a zip file.expense_app.zip

How to install / use bower in Visual studio 2013 with proxy settings

Bower is very popular to manage client script package, here is the steps to set it up to use it in visual studio 2013.

1. Open package management console and search bower (not bower.js), install it.
    After it is installed, you should be able to open a command prompt and go to your visual studio project folder, then run "bower install <package>" from there.

2. By default, Bower installed the package into a folder called bower_components under the project folder. Usually we want to manage the packages better and put them under scripts/lib folder.

To do this, create a file named the .bowerrc and add the line,
{

"Directory":"Scripts/lib",
 
}
This will install all the packages into the scripts/lib folder. By default, windows doesn't allow you create a file starts with period (.), then you can create any temp text file and rename it in the command window.

3. If the visual studio runs internally behind a firewall, you need to set up the proxy for both Bower and Node.
   
    In the .bowerrc file, add the line,
"https-proxy": "http://<domain>%5C<user>:<passsword>@<proxy_server>:<proxy_port>/"
    Edit the node.cmd under .bin folder to add the lines,
SET HTTP_PROXY=http://1:1@192.168.11.22:8080
SET HTTPS_PROXY=http://1:1@192.168.11.22:8080

In MVC5, How to merge the IdentityDbContext into custom db context

Here is the code as an example,

1. Add the custom user login and user role configurations

    public class IdentityUserLoginConfiguration : EntityTypeConfiguration<IdentityUserLogin>
    {
        public IdentityUserLoginConfiguration()
        {
            HasKey(iul => iul.UserId);
        }
    }
    public class IdentityUserRoleConfiguration : EntityTypeConfiguration<IdentityUserRole>
    {
        public IdentityUserRoleConfiguration()
        {
            HasKey(iur => iur.RoleId);
        }
    }

2. Inherit your custom dbcontext from IdentityDbContext,

    public class CustomDbContext : IdentityDbContext<ApplicationUser>
    { public CustomDbContext() : base("DefaultConnection")
        {
        }
        public DbSet<CustomEntity> Entities { get; set; }
        protected override void OnModelCreating(DbModelBuilder modelBuilder)
        {
            modelBuilder.Conventions.Remove<PluralizingTableNameConvention>();
            modelBuilder.Configurations.Add(new IdentityUserLoginConfiguration());
            modelBuilder.Configurations.Add(new IdentityUserRoleConfiguration());
        }
    }