Starter Angular project with ui-router, bootstrap & jquery.
A Pen by Gyula Nyirfalvi on CodePen.
Starter Angular project with ui-router, bootstrap & jquery.
A Pen by Gyula Nyirfalvi on CodePen.
<html ng-app="theAppName"> | |
<head> | |
<link data-require="bootstrap-css@3.0.3" data-semver="3.2.0" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" /> | |
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script> | |
<script data-require="jquery@*" data-semver="2.1.1" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> | |
<script data-require="bootstrap@2.3.2" data-semver="2.3.2" src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script> | |
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/2.5.0/ui-bootstrap.min.js"></script> | |
<script src="https://ajax.googleapis.com/ajax/libs/angular-ui-router/1.0.0-rc.1/angular-ui-router.min.js"></script> | |
</head> | |
<body> | |
<p>hello!</p> | |
{{state | json}} | |
<div ui-view="header"></div> | |
<div ui-view="main"></div> | |
<div ui-view="footer"></div> | |
</body> | |
</html> |
angular.module('theAppName', [ | |
'ui.router', | |
'moduleName' | |
]). | |
run([ '$rootScope', '$state', '$stateParams', | |
function ($rootScope, $state, $stateParams) { | |
$rootScope.$state = $state; | |
$rootScope.$stateParams = $stateParams; | |
} | |
]); | |
angular.module('moduleName.controllers', []); | |
angular.module('moduleName.services', []); | |
angular.module('moduleName.directives', []); | |
angular.module('moduleName.filter', []); | |
angular.module('moduleName', ['moduleName.controllers', 'moduleName.services', 'moduleName.directives', 'moduleName.filter']) | |
.config(['$stateProvider', '$urlRouterProvider', | |
function ($stateProvider, $urlRouterProvider) { | |
/*$urlRouterProvider.otherwise('/permission'); | |
$stateProvider.state("base", { | |
// url: "/", | |
abstract: true, | |
controller: function ($scope) { | |
console.log("base url"); | |
}, | |
views: { | |
'header': { | |
templateUrl: 'header.tpl.html' | |
} | |
} | |
}). | |
state("base.permission", { | |
url: "/permission", | |
views: { | |
'main@': { | |
templateUrl: 'contentPermission.tpl.html', | |
controller: 'permissionCtrl' | |
}, | |
'footer@': { | |
templateUrl: 'footerSubmit.tpl.html', | |
controller: 'footerCtrl' | |
} | |
}, | |
}). | |
state("base.summary", { | |
url: "/summary", | |
views: { | |
'headerStatus' : { | |
template: 'Complete' | |
}, | |
'main@': { | |
templateUrl: 'contentSummary.tpl.html', | |
controller: 'summaryCtrl' | |
}, | |
'footer@': { | |
templateUrl: 'footerClose.tpl.html', | |
controller: 'footerCtrl' | |
} | |
}, | |
});*/ | |
} | |
]); | |
// CONTROLLERS | |
angular.module('moduleName.controllers').controller('nameOfTheThingCtrl', [ | |
'$scope', | |
function($scope) { | |
console.log("sampleCtrl"); | |
} | |
]); | |
angular.module('moduleName.controllers').controller('headerCtrl', [ | |
'$scope', | |
function($scope) { | |
// console.log("headerCtrl"); | |
} | |
]); | |
angular.module('moduleName.controllers').controller('footerCtrl', [ | |
'$scope', | |
function($scope) { | |
} | |
]); | |
// SERVICES | |
angular.module('moduleName.services').service('nameOfTheThingSvc', [ | |
'$http', | |
'$q', | |
function ($http, $q){ | |
var object = { | |
// EXTERNAL CALLS | |
// FUNCTIONS | |
}; | |
return object; | |
} | |
]); |
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> |