How to resolve for angular ui-route - angularjs

Here is my angularjs code. I have created different routes but i am unable to resolve my contract.dashboard route. If i remove the route object, it works fine but when i tried to reslove something from my service, it dose not work.
(function() {
'use strict';
angular
.module('app.contracts')
.run(appRun);
var _base = {
// Contract Base Contractor
contract: {
controllerAs: 'c',
controller: ['$scope', '$state', 'ContractModel', function($scope, $state, ContractModel){
'ngInject';
var that = this;
$scope.$watch(function(){ return $state.current.data.mode; }, function() { that.mode = $state.current.data.mode; });
that.contract = new ContractModel();
}]
}
};
/* #ngInject */
function appRun(routerHelper) {
routerHelper.configureStates(getStates());
}
function getStates() {
return [
{
state: 'contract',
config: angular.extend({
abstract: true,
template: '<contract-manager><ui-view/></<contract-manager>',
url: '/contract'
}, _base.contract)
},
{
state: 'contract.new',
config: angular.extend({
url: '/new',
template: '<contract-editor mode="c.mode" contract="c.contract"></<contract-editor>',
title: 'Contract Editor',
data: {
mode: 'new'
}
}, _base.contract)
},
{
state: 'contract.dashboard',
config: angular.extend({
url: '',
template: '<contract-dashboard></contract-dashboard>',
title: 'Contract Dashboard',
data: {
mode:'dashboard'
},
resolve: {
stubs: function(stubs){
return stubs.service.registerGetCustomers();
}
}
}, _base.contract)
}
];
}
})();

Related

Load resources in angular with oclazyload and webpack

I have a modular app who have multiple vendor plugins and I need to load only necessary in every view.
This is my routes:
(function() {
'use strict';
angular.module('app.empresas').config(config);
function config($stateProvider, $ocLazyLoadProvider) {
$stateProvider
.state('app.empresas', {
url: '/empresas?Filter',
views: {
'main#': {
template: require('./empresas/empresas.html'),
controller: "AppController as App"
}
},
Params: {
title: 'Empresas',
bodyClass: '',
requiredLogin: true
}
})
.state('app.empresas.view', {
url: '/empresas/:ItemId',
views: {
'main#': {
template: require('./empresas.view/empresas.view.html'),
controller: "AppController as App"
}
},
Params: {
title: 'Empresa',
bodyClass: '',
requiredLogin: true
}
})
}
})();
I know how to include oclazyload resources without webpack, but now I need to include specific resources for every view. ¿How can do this?
I solved it using this snippet:
This is a sample of a state
.state('app.empresas.view', {
url: '/empresas/:ItemId',
views: {
'main#': {
templateUrl: '/app/main/apps/empresas/empresas.view/empresas.view.html',
controller: "AppController as App"
}
},
Params: {
title: 'Empresa',
bodyClass: '',
requiredLogin: true
},
resolve: ['$q', '$ocLazyLoad', function ($q, $ocLazyLoad) {
var deferred = $q.defer();
var mod = importAll(require.context('./empresas.view/', true, /\.*$/));
$ocLazyLoad.load({
name: 'app.empresas.view'
});
deferred.resolve(mod);
return deferred.promise;
}]
})
I use this function with require to load entire folder with oclazyload and compile with webpack in a bundle separate file:
function importAll (r) {r.keys().forEach(r);}
I can load css, html, js files in one view without require files one by one

injecting a list into a json format

I'm new with angularJs and i want to inject a list of string that i get it using a restful web service into a jSON list.
And how can the connections list could proceed object returned by getAllConnectedApp.
angular
.module('theme.core.navigation_controller', ['theme.core.services'])
.controller('NavigationController', ['$scope', '$location', '$timeout', '$filter', '$http', '$cookieStore', '$interval',
function($scope, $location, $timeout, filter, $http, $cookieStore, $interval) {
'use strict';
$scope.filterOptions = {
filterText: '',
useExternalFilter: true
};
$scope.connections = [];
$scope.menu = [{
label: 'HOME',
iconClasses: 'glyphicon glyphicon-home',
url: '#/'
}, {
label: 'ORACLE MONITORING',
iconClasses: 'glyphicon glyphicon-unchecked',
children: [{
label: 'SESSIONS',
url: '#/general'
}, {
label: 'ADVANCED MONITORING',
url: '#/advanced-monitoring'
}, {
label: 'CONFIGURATION',
url: '#/configuration'
}]
}, {
label: 'CODE TRACER',
iconClasses: 'glyphicon glyphicon-check',
children: [{
label: 'ADD CONNECTION',
url: '#/addConnectionApp'
},
for (var i = 0; i < $scope.connections.length; i++) {
{
label: $scope.connections[i],
url: '#/codetracer',
}
}
]
//url: '#/codetracer'
}];
$scope.getAllConnectedApp = function() {
console.log("GET ALL CONNECTED APPLICATIONS...");
$http.get("http://localhost:8090/api/personne/allConnection")
.success(function(connections) {
console.log(connections);
$scope.connections = connections;
});
};
}
]);
you have got syntax error over there, you can't have a loop inside object literal definition.
also, you portably want to update the menu only after getting back the response from the sever.
because your code was illogical as by the time you execute the loop, scope.connections is still an empty array.
something like this:
angular
.module('theme.core.navigation_controller', ['theme.core.services'])
.controller('NavigationController', ['$scope', '$location', '$timeout', '$filter', '$http', '$cookieStore', '$interval',
function ($scope, $location, $timeout, filter, $http, $cookieStore, $interval) {
'use strict';
$scope.filterOptions = {
filterText: '',
useExternalFilter: true
};
$scope.connections = [];
var connectionsMenu = [{
label: 'ADD CONNECTION',
url: '#/addConnectionApp'
}];
$scope.menu = [{
label: 'HOME',
iconClasses: 'glyphicon glyphicon-home',
url: '#/'
}, {
label: 'ORACLE MONITORING',
iconClasses: 'glyphicon glyphicon-unchecked',
children: [{
label: 'SESSIONS',
url: '#/general'
}, {
label: 'ADVANCED MONITORING',
url: '#/advanced-monitoring'
}, {
label: 'CONFIGURATION',
url: '#/configuration'
}]
}, {
label: 'CODE TRACER',
iconClasses: 'glyphicon glyphicon-check',
children: [connectionsMenu]
//url: '#/codetracer'
}];
$scope.getAllConnectedApp = function () {
console.log("GET ALL CONNECTED APPLICATIONS...");
$http.get("http://localhost:8090/api/personne/allConnection")
.success(function (connections) {
console.log(connections);
$scope.connections = connections;
for (var i = 0; i < connections.length; i++) {
connectionsMenu.push({
label: connections[i],
url: '#/codetracer',
});
}
});
};
}
]);

Is there a way I can have an in between abstract state to avoid repeating same view template details?

I have this configuration for angular-ui-router:
var rootSubjectsSubjectAdminWordsWord = {
name: 'r.s.s.a.w.w',
template: "<div ui-view='wordData'></div><div ui-view='wordForms'></div>",
url: '/:wordId',
};
var rootSubjectsSubjectAdminWordsWordDelete = {
name: 'r.s.s.a.w.w.delete',
views: {
"wordData#r.s.s.a.w.w": {
templateProvider: ['$templateCache', ($templateCache) => {
return $templateCache.get('/app/admin/word/wordData.html');
}]
},
"wordForms#r.s.s.a.w.w": {
templateProvider: ['$templateCache', ($templateCache) => {
return $templateCache.get('/app/admin/word/wordForms.html');
}]
}
},
url: '/delete',
};
var rootSubjectsSubjectAdminWordsWordEdit = {
name: 'r.s.s.a.w.w.edit',
views: {
"wordData#r.s.s.a.w.w": {
templateProvider: ['$templateCache', ($templateCache) => {
return $templateCache.get('/app/admin/word/wordData.html');
}]
},
"wordForms#r.s.s.a.w.w": {
templateProvider: ['$templateCache', ($templateCache) => {
return $templateCache.get('/app/admin/word/wordForms.html');
}]
}
},
url: '/edit',
};
I have an edit, delete and a new state that all share the same "views:". Is there a way I could have some kind of abstract state containing just the views definition so I could avoid repeating "views" each time?
You can create shared variable with view config:
var sharedViewConfig = {
"wordData#r.s.s.a.w.w": {
templateProvider: ['$templateCache', ($templateCache) => {
return $templateCache.get('/app/admin/word/wordData.html');
}]
},
"wordForms#r.s.s.a.w.w": {
templateProvider: ['$templateCache', ($templateCache) => {
return $templateCache.get('/app/admin/word/wordForms.html');
}]
}
};
var rootSubjectsSubjectAdminWordsWordDelete = {
name: 'r.s.s.a.w.w.delete',
views: sharedViewConfig,
url: '/delete',
};
var rootSubjectsSubjectAdminWordsWordEdit = {
name: 'r.s.s.a.w.w.edit',
views: sharedViewConfig,
url: '/edit',
};
Or you can create an abstract state:
var abstractState = {
name: 'r.s.s.a.w.w.abstract',
abstract: true,
views: {
"wordData#r.s.s.a.w.w": {
templateProvider: ['$templateCache', ($templateCache) => {
return $templateCache.get('/app/admin/word/wordData.html');
}]
},
"wordForms#r.s.s.a.w.w": {
templateProvider: ['$templateCache', ($templateCache) => {
return $templateCache.get('/app/admin/word/wordForms.html');
}]
}
}
};
var rootSubjectsSubjectAdminWordsWordDelete = {
name: 'r.s.s.a.w.w.delete',
parent: 'r.s.s.a.w.w.abstract',
url: '/delete',
};
var rootSubjectsSubjectAdminWordsWordEdit = {
name: 'r.s.s.a.w.w.edit',
parent: 'r.s.s.a.w.w.abstract',
url: '/edit',
};
try following
var viewDes= {
"wordData#r.s.s.a.w.w": {
templateProvider: ['$templateCache', ($templateCache) => {
return $templateCache.get('/app/admin/word/wordData.html');
}]
},
"wordForms#r.s.s.a.w.w": {
templateProvider: ['$templateCache', ($templateCache) => {
return $templateCache.get('/app/admin/word/wordForms.html');
}]
}
};
var rootSubjectsSubjectAdminWordsWordDelete = {
name: 'r.s.s.a.w.w.delete',
views: viewDes,
url: '/delete',
};
var rootSubjectsSubjectAdminWordsWordEdit = {
name: 'r.s.s.a.w.w.edit',
views: viewDes,
url: '/edit',
};

Accordian not working inside templateurl

When my new html renedered from Admin.html inside accordian control is not working
angular.module('TabsApp', [])
.controller('TabsCtrl', ['$scope', function ($scope)
{
$scope.tabs = [{
title: 'Admin',
templateUrl: 'Views/Admin.html'
},
{
title: 'Data',
templateUrl: 'two.tpl.html'
},
{
title: 'Chart',
templateUrl: 'three.tpl.html'
},
{
title: 'DashBoard',
templateUrl: 'four.tpl.html'
}];
$scope.currentTab = 'Views/Admin.html';
$scope.onClickTab = function (tab) {
if (tab.title == 'Admin') {
$scope.currentTab = tab.templateUrl;
}
else {
$scope.currentTab = tab.templateUrl;
}
}
$scope.isActiveTab = function (tabUrl) {
return tabUrl == $scope.currentTab;
}
}]);

AngularJS nested routes example questions

Any explanation why the sample code (ui-router/sample/index.html) for angular-ui-router (https://github.com/angular-ui/ui-router) looks like this. Specifically:
Why the nested definitions of objects like controllers?
Why the specification of dependencies like this:
angular.module('sample', ['ui.compat'])
.config(
[ '$stateProvider', '$routeProvider', '$urlRouterProvider',
function ($stateProvider, $routeProvider, $urlRouterProvider) {
thanks
<!doctype html>
<html lang="en" ng-app="sample"><head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="bootstrap.min.css">
<style type="text/css">
.fade-enter-setup, .fade-leave-setup {
transition: opacity 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0s;
}
.fade-enter-setup,
.fade-leave-setup.fade-leave-start {
opacity: 0;
}
.fade-leave-setup,
.fade-enter-setup.fade-enter-start {
opacity: 1;
}
</style>
<script src="../lib/angular-1.1.4.js"></script>
<script src="../build/angular-ui-router.js"></script>
<!-- could easily use a custom property of the state here instead of 'name' -->
<title ng-bind="$state.current.name + ' - ui-router'">ui-router</title>
</head><body>
<div class="navbar navbar-fixed-top">
<div class="navbar-inner"><div class="container">
<a class="brand" href="#">ui-router</a>
<ul class="nav">
<li ng-class="{ active: $state.includes('contacts') }">Contacts</li>
<li ng-class="{ active: $state.includes('about') }">About</li>
</ul>
<p class="navbar-text pull-right" ui-view="hint"></p>
</div></div>
</div>
<div class="container" style="margin-top:60px" ui-view ng-animate="{enter:'fade-enter'}"></div>
<hr>
<pre>
$state = {{$state.current.name}}
$stateParams = {{$stateParams}}
</pre>
</body><script>
function findById(a, id) {
for (var i=0; i<a.length; i++) {
if (a[i].id == id) return a[i];
}
}
angular.module('sample', ['ui.compat'])
.config(
[ '$stateProvider', '$routeProvider', '$urlRouterProvider',
function ($stateProvider, $routeProvider, $urlRouterProvider) {
$urlRouterProvider
.when('/c?id', '/contacts/:id')
.otherwise('/');
$routeProvider
.when('/user/:id', {
redirectTo: '/contacts/:id',
})
.when('/', {
template: '<p class="lead">Welcome to the ngStates sample</p><p>Use the menu above to navigate</p>' +
'<p>Look at Alice or Bob to see a URL with a redirect in action.</p>',
});
$stateProvider
.state('contacts', {
url: '/contacts',
abstract: true,
templateUrl: 'contacts.html',
controller:
[ '$scope', '$state',
function ($scope, $state) {
$scope.contacts = [{
id: 1,
name: "Alice",
items: [{
id: 'a',
type: 'phone number',
value: '555-1234-1234',
},{
id: 'b',
type: 'email',
value: 'alice#mailinator.com',
}],
}, {
id: 42,
name: "Bob",
items: [{
id: 'a',
type: 'blog',
value: 'http://bob.blogger.com',
},{
id: 'b',
type: 'fax',
value: '555-999-9999',
}],
}, {
id: 123,
name: "Eve",
items: [{
id: 'a',
type: 'full name',
value: 'Eve Adamsdottir',
}],
}];
$scope.goToRandom = function () {
var contacts = $scope.contacts, id;
do {
id = contacts[Math.floor(contacts.length * Math.random())].id;
} while (id == $state.params.contactId);
$state.transitionTo('contacts.detail', { contactId: id });
};
}],
})
.state('contacts.list', {
// parent: 'contacts',
url: '',
templateUrl: 'contacts.list.html',
})
.state('contacts.detail', {
// parent: 'contacts',
url: '/{contactId}',
resolve: {
something:
[ '$timeout', '$stateParams',
function ($timeout, $stateParams) {
return $timeout(function () { return "Asynchronously resolved data (" + $stateParams.contactId + ")" }, 10);
}],
},
views: {
'': {
templateUrl: 'contacts.detail.html',
controller:
[ '$scope', '$stateParams', 'something',
function ($scope, $stateParams, something) {
$scope.something = something;
$scope.contact = findById($scope.contacts, $stateParams.contactId);
}],
},
'hint#': {
template: 'This is contacts.detail populating the view "hint#"',
},
'menu': {
templateProvider:
[ '$stateParams',
function ($stateParams){
// This is just to demonstrate that $stateParams injection works for templateProvider
// $stateParams are the parameters for the new state we're transitioning to, even
// though the global '$stateParams' has not been updated yet.
return '<hr><small class="muted">Contact ID: ' + $stateParams.contactId + '</small>';
}],
},
},
})
.state('contacts.detail.item', {
// parent: 'contacts.detail',
url: '/item/:itemId',
views: {
'': {
templateUrl: 'contacts.detail.item.html',
controller:
[ '$scope', '$stateParams', '$state',
function ($scope, $stateParams, $state) {
$scope.item = findById($scope.contact.items, $stateParams.itemId);
$scope.edit = function () {
$state.transitionTo('contacts.detail.item.edit', $stateParams);
};
}],
},
'hint#': {
template: 'Overriding the view "hint#"',
},
},
})
.state('contacts.detail.item.edit', {
views: {
'#contacts.detail': {
templateUrl: 'contacts.detail.item.edit.html',
controller:
[ '$scope', '$stateParams', '$state',
function ($scope, $stateParams, $state) {
$scope.item = findById($scope.contact.items, $stateParams.itemId);
$scope.done = function () {
$state.transitionTo('contacts.detail.item', $stateParams);
};
}],
},
},
})
.state('about', {
url: '/about',
templateProvider:
[ '$timeout',
function ($timeout) {
return $timeout(function () { return "Hello world" }, 100);
}],
})
.state('empty', {
url: '/empty',
templateUrl: 'empty.html',
controller:
[ '$scope', '$state',
function ($scope, $state) {
// Using an object to access it via ng-model from child scope
$scope.data = {
initialViewTitle: "I am an initial view"
}
$scope.changeInitialViewTitle = function($event) {
$state.transitionTo('empty.emptycontent');
};
$scope.showInitialView = function($event) {
$state.transitionTo('empty');
};
}]
})
.state('empty.emptycontent', {
url: '/content',
views: {
'emptycontent': {
templateUrl: 'empty.content.html'
}
}
});
}])
.run(
[ '$rootScope', '$state', '$stateParams',
function ($rootScope, $state, $stateParams) {
$rootScope.$state = $state;
$rootScope.$stateParams = $stateParams;
}]);
</script></html>
ui-router doesn't fully support this. You may check this library for nested routing: http://angular-route-segment.com
It provides the functionality for creating tree-like routing hierarchy which can be changed without losing the state.
$routeSegmentProvider.
when('/section1', 's1.home').
when('/section1/prefs', 's1.prefs').
when('/section1/:id', 's1.itemInfo.overview').
when('/section1/:id/edit', 's1.itemInfo.edit').
when('/section2', 's2').
segment('s1', {
templateUrl: 'templates/section1.html',
controller: MainCtrl}).
within().
segment('home', {
templateUrl: 'templates/section1/home.html'}).
segment('itemInfo', {
templateUrl: 'templates/section1/item.html',
controller: Section1ItemCtrl,
dependencies: ['id']}).
within().
segment('overview', {
templateUrl: 'templates/section1/item/overview.html'}).
segment('edit', {
templateUrl: 'templates/section1/item/edit.html'}).
up().
segment('prefs', {
templateUrl: 'templates/section1/prefs.html'}).
up().
segment('s2', {
templateUrl: 'templates/section2.html',
controller: MainCtrl});
The nesting is only one way of doing the example. you could write
'navTitle#': {
templateUrl : 'pages/mypage.html',
controller: 'myController',
},
and then just define myController anywhere else you want in your app.
function myController ($scope) {
};
as far as dependencies question...thats one way of injecting in dependancies in angular so you can reuse the code in other places.
.factory('appLoading', function($rootScope, $state) {
return {
loading : function() {
$rootScope.status = 'loading';
if(!$rootScope.$$phase) $rootScope.$apply();
},
ready : function(delay) {
function ready() {
$rootScope.status = 'ready';
$rootScope.title = $state.current.data.title;
if(!$rootScope.$$phase) $rootScope.$apply();
}
}
};
})
then if i wanted to call this loader in a module it would go inside []
like inside the onExit of a state inside ui-router...
onExit: ['appLoading',
function ( appLoading) {
appLoading.loading();
}],

Resources