Category Archives: bootstrap

Angularjs tutorial – Set up Angularjs 2 application

1. Create an application folder
2. Create the tsconfig.json file

{
  "compilerOptions": {
    "target": "es5",
    "module": "system",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "removeComments": false,
    "noImplicitAny": false
  },
  "exclude": [
    "node_modules",
    "typings/main",
    "typings/main.d.ts"
  ]
}

3. Create the package.json file

{
    "name": "Angular 2 Demo",
    "version": "1.0.0",
    "author": "Sandy Zhang",
    "description": "sample application",
    "scripts": {
        "start": "concurrent \"npm run tsc:w\" \"npm run lite\" ",
        "tsc": "tsc",
        "tsc:w": "tsc -w",
        "lite": "lite-server",
        "typings": "typings",
        "postinstall": "typings install"
    },
    "license": "ISC",
    "dependencies": {
        "angular2": "2.0.0-beta.9",
        "systemjs": "0.19.24",
        "es6-promise": "^3.0.2",
        "es6-shim": "^0.35.0",
        "reflect-metadata": "0.1.2",
        "rxjs": "5.0.0-beta.2",
        "zone.js": "0.5.15",
        "bootstrap": "^3.3.6"
    },
    "devDependencies": {
        "concurrently": "^2.0.0",
        "lite-server": "^2.1.0",
        "typescript": "^1.8.9",
        "typings": "^0.7.9"
    },
    "repository": {}
}

4. Create the typings.json file

{
  "ambientDependencies": {
"es6-shim": "github:DefinitelyTyped/DefinitelyTyped/es6-shim/es6-shim.d.ts#7de6c3dd94feaeb21f20054b9f30d5dabc5efabd"  }
}

5. Install the libraries and typings

 npm install

6. Create the host Web page (index.html)

angularjs2_index

7. Create the main.ts file (bootstrapper)

import { bootstrap } from 'angular2/platform/browser';

// Our main component
import { AppComponent } from './app.component';

bootstrap(AppComponent);

8. here is the AppComponent

import { Component } from 'angular2/core';
@Component({
    selector: 'sz-app',
    template: `

hello world!

` }) export class AppComponent { pageTitle: string = 'Hello world'; }
angularjs2_01
angularjs2_01

build one page app by using bootstrap working with angular.js from begginng–Part2

Since sombody is intrested in this topic, I am going to finish it now.

here it is the structure of your folder

spa_01

Her it is the index.html page:

<!DOCTYPE html>
<html lang=”en” ng-app=”CsbApp”>
<head>
<meta charset=”utf-8″>
<meta http-equiv=”X-UA-Compatible” content=”IE=edge”>
<meta name=”viewport” content=”width=device-width, initial-scale=1″>
<title>AngularJS Tutorial CSB Test App</title>

<!– Bootstrap –>
<link href=”css/bootstrap.css” rel=”stylesheet”>
<link href=”css/site.css” rel=”stylesheet”>

<!– HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries –>
<!– WARNING: Respond.js doesn’t work if you view the page via file:// –>
<!–[if lt IE 9]>
<script src=”https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js”></script&gt;
<script src=”https://oss.maxcdn.com/respond/1.4.2/respond.min.js”></script&gt;
<![endif]–>
<script src=”http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js”></script&gt;
<script src=”https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.26/angular-route.min.js”></script&gt;
<script src=”js/app.js”></script>
</head>
<body>
<div class=”container”>
<div ng-view></div>
</div>

<!– jQuery (necessary for Bootstrap’s JavaScript plugins) –>
<script src=”https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js”></script&gt;
<!– Include all compiled plugins (below), or include individual files as needed –>
<script src=”js/bootstrap.js”></script>
</body>
</html>

then the list.html page is the patrial page will dynamic generate into the ng-view div holder:

<div class=”col-sm-6 col-md-6″ ng-repeat=”item in items” id=”{{item._id}}”>
<div class=”row”>
<div class=”col-sm-3 col-md-3″><img src=”{{item.logo.path_to_file}}” alt=”{{item.display_name}}” class=”img-responsive”></div>
<div class=”col-sm-9 col-md-9″>
<blockquote>
<p><i class=”glyphicon glyphicon-home iconstyle”></i> {{item.address.address1}}, {{item.address.suburb}}, {{item.address.postcode}}, {{item.address.state.name}}, {{item.address.country.name}}</p>
<p><i class=”glyphicon glyphicon-envelope iconstyle”></i> {{item.email}}</p>
<p><i class=”glyphicon glyphicon-phone iconstyle”></i> {{item.phone}}</p>
<p><i ng-show=”item.status==’active'” class=”glyphicon glyphicon-ok iconstyle”></i><i ng-show=”item.status!=’active'” class=”glyphicon glyphicon-remove iconstyle”></i> {{item.status}}</p>
</blockquote>
</div>
</div>
</div>

Last part is you module

var module = angular.module(“CsbApp”, [“ngRoute”]);

module.config(function ($routeProvider) {
$routeProvider.when(“/”, {
controller: “listsController”,
templateUrl: “list.html”
});

$routeProvider.otherwise({ redirectTo: “/” });
});

var listsController = [“$scope”, “$http”, function ($scope, $http) {
var self = this;
$http.defaults.headers.get={“x-device-longitude”:0,”x-device-latitude”:0};

var request = {
method:”GET”,
url:”http://api.muulla.com/app/merchant/all/10/1&#8243;
};

$http(request).success(function(response){
$scope.items=response.data;
}).error(function(errorMessage) {
console.log(errorMessage);
})

}];

build one page app by using bootstrap working with angular.js from begginng–to be continue

If you are an front end developer working with a team, the back code developer already build the api arrow you to access the data and give your the specify header required and then you could quickly build a page by using bootstrap to make the layout looking mobile friendly and angular.js can access api server very easy.

If there is not backend code involved then using subline could achieve that.

Could see below links:

http://sandywebdesigner.com/csb

here is the looking on desktop
angular01

looking in mobile:

angular02

Time for home, will continue tomarrow, write the code how to build using angular.js and bootstrap to quickly build an app for retrieve customize header request.

Using bower to add client side recource into your specify folder–Build a node.js website–part4

Now it is time to add clents size recource file into your specify folders, in my project I create a public folder to hold all the css and js,

In node.js there are a plug called bower will install the client packages for you.

1) In the root director create a file named .bowerrc and put an object inside the file:{“directory” : “public/lib”} this is to tell bower where you like to put your client sie resource

2) before to run bower, need change the .bowerrc file encoding , go to file advace save options,choose Western European(windows)-Codepage 1252

nodejsWebsite11

3) run bower install <packages name your want to install>

Tip:

1)make sure you have bower installed, if not run npm install bower -g (g meaning globle level)

2)the bower need git working with it, make sure your git install at globle level.

3)what I mean globle level, just need have path in your system, if you didn’t install git in globle level, you could manually add you path to it. if you don’t know how to add path just simply uninstall git and reinstall it , when install it this time make sure you select it install in globle level.

gitInstall

 

Since bootstrap is commonly used in a lot website and I am also very confident withe working with bootstrap. now it’s time using bower to install bootstrap

nodejsWebsite12

After that then just put the css and js file into the layout.vash

nodejsWebsite13

 

 

Create marquee news in front page and the news is read from the database with expired data,also included management page to insert news

My boss just saw other company website has a marquee new on the front page, so she asked me if I could make one and arrow her to insert news and the news will dispear at the expired data.

For achieve that task, first I create a table in my database table, here is my table:

breadNewTable

then I write a store proceedure, a little tip for fresh guy, alway use store preceedure to insert data for security reasons.

breadNewStoreProceedure

Now, We could start the front end job. I create a user control:marquee.ascx(so you could put it in anyway you like), to display the new, here is my html code:

frontUCmarquee

here is the backcod, I used ado.net to open the database and qurery what I need, and bind it to my BulledtedList:

databasereadertomarquee

See the code this if(!IsPostBack) is not neccessary, but I use web froms so it wil inherit maintain state so I don’t need retrieve database everytime postback.

here I am also happy to share the css file for style this unorder list to display inline:

MarqueeCssStyle

A tip for fresh guy, put this in the page your use control will stand it.

Now, you just need drag the usercontrol to any page you want it with this css style in top of the header it. You coud see it.

Then We could start create a page to arrow my boss to insert the bread news, I used boostrap format so it save my time to write css. here is the front page look like:

addNews

here is the html code:

htmlCodeAddnews

The form use jQury Validate, the jquery-ui.js, is for my boss click then will pop up the jQuery calender to arrow her to put the expired date. So simple isn’t, I am love JQure very much, save a lot of time. It remind me when I first time write javascript over 10 years ago, for every simply function I need write a lot codes.

Finally I just need write a event could be fired by this button.

storeIntodatabase

Ok, That’s all. Have fun!

Using c# code to force bootstrap modal stay open after page postback

Recently I write a small function into my asp.net application.To enable the driver to input the time the submit the pick up client and drop off the client time.
My boss like the pick up time and drop off time should been populate by just click.so I write a code on the back of page to retrive the time every time the driver click the button.
But the dropoff button driver me to nuts,Because When the dropoff button click I pop out the bootstrap modal.But the problems came out this button need make page postback to retrive the current time and after postback my modal need stay open.
It take me a while to fix out this.
Here is my solution.
first, I need write javascript like this is for to open the modal: #dropoffModal is my hidden modal.

 function openModal() {
$('#dropoffModal').modal({ show: true });
}
 

Second I have the the button is like this(See the button click will fire a event named:”Button_DropOff_Click” behind it):

 button_click_event_fire_javascript

Finally, just write your event on the page behind file:


protected void Button_DropOff_Click(object sender, EventArgs e)
{
ScriptManager.RegisterStartupScript(this, this.GetType(), "Pop", "openModal();", true);
}

here just a solution. by the way, You could use ScriptManager.RegisterStartupScript() this command call another function in your frond page javascript.