I am trying to create a new state in angular using ngRouter.
I have an index.route.js file that contains the following:
(function() {
'use strict';
angular
.module('testApp')
.config(routeConfig);
/** #ngInject */
function routeConfig($stateProvider, $urlRouterProvider) {
$stateProvider
.state('home', {
url: '/',
templateUrl: 'app/main/main.html',
controller: 'MainCtrl'
})
.state('tools', {
url: '/tools/:category',
templateUrl: 'app/tools/tools.html',
controller: 'ToolsCtrl',
controllerAs: 'tsCtrl'
});
$urlRouterProvider.otherwise('/');
}
})();
Then, I have created a tools.html and a tools.controller.html.
tools.html:
Hello World
tools.controller.js:
(function(){
'use strict';
angular
.module('testApp')
.controller('ToolsCtrl', ToolsController);
/** #ngInject */
function ToolsController(){
var ctrl = this;
ctrl.tools = {};
//TBD: more code.
}
})();
The problem is that whenever I go to for example http://localhost:3000/tools/maps, the browser complains that it can't find some of the js files that are suppose to be linked to the project. Now, the link it shows contains the state, for example instead of searching for bootstrap in http://localhost:3000/app/index.route.js it searches for it in http://localhost:3000/tools/app/index.route.js. Why is that?
I have used Yeoman with the gulp-angular generator in order to create the project.
Related
I am using gulp to add my templates into the production js file so I can access them via $templateCache. Everything works well for my directives but the templates in my state provider are not working. Its seems like the $templateCache object is not available.
Concatenated JS File. This is placed at the bottom of the file:
angular.module("barmehealth").run(["$templateCache",
function($templateCache {
$templateCache.put("app/views/register.html","<div>Register</div>");
$templateCache.put("app/modules/framework/framework.template.html","<div class>Framework Template</div>");
}
]);
I have tried both approaches below and neither work. Also there is no error. The view simply loads the index page with just gives me duplicated content.
Using templateUrl
(function () {
'use strict';
angular.module('barmehealth', ['framework', 'ui.router'])
.config(function($urlRouterProvider, $stateProvider) {
$urlRouterProvider.otherwise('/');
$stateProvider
.state('register', {
url: '/register',
templateProvider: function($templateCache) {
return $templateCache.get('/app/views/register.html');
}
});
});
}());
Using templateProvider
(function () {
'use strict';
angular.module('barmehealth', ['framework', 'ui.router'])
.config(function($urlRouterProvider, $stateProvider) {
$urlRouterProvider.otherwise('/');
$stateProvider
.state('register', {
url: '/register',
templateUrl: '/app/views/register.html'
});
});
}());
You have added extra / (slash) which isn't required there, by removing it you can desired template in templateProvider function.
Use
return $templateCache.get('app/views/register.html');
Instead of
return $templateCache.get('/app/views/register.html');
Im new to angular and I tried to generate a project with the yeoman angular-fullstack generator. I want to add a new url /portfolio so I duplicated the main-folder on the same level and renamed it to "portfolio".
I've created three files:
1) portfolio.controller.js 2) portfolio.html 3) portfolio.js
I've included the js-files in the index.html for the client like this:
<script src="app/portfolio/portfolio.controller.js"></script>
<script src="app/portfolio/portfolio.js"></script>
And the following code can be found in the controller:
'use strict';
(function() {
class PortfolioController {
constructor($http, $scope, socket) {
console.log("working");
}
}
angular.module('myPortfolioApp')
.controller('PortfolioController', PortfolioController);
})();
And this is from the portfolio.js:
'use strict';
angular.module('myPortfolioApp')
.config(function($stateProvider) {
$stateProvider
.state('portfolio', {
url: '/portfolio',
templateUrl: 'app/portfolio/portfolio.html',
controller: 'PortfolioController',
controllerAs: 'portfolio'
});
});
you are not declaring a new module, you are missing the array of dependencies:
angular.module('myPortfolioApp',[]) //NOTICE THE BRACKETS
.config(['$stateProvider', function($stateProvider) {
$stateProvider
.state('portfolio', {
url: '/portfolio',
templateUrl: 'app/portfolio/portfolio.html',
controller: 'PortfolioController',
controllerAs: 'portfolio'
}]);
});
I'm developing an web app using AngularJS with uiRouter. I developed my route configuration as follows:
(function () {
'use strict';
var module = angular.module('app', ['ngMaterial', 'ui.router']);
function Config($urlRouterProvider, $stateProvider) {
$urlRouterProvider.otherwise('/');
$stateProvider.state('Home', {
url: '/',
templateUrl: 'Partials/homeview.html',
controller: 'homeCtrl'
}).state('Table', {
url: '/tableview',
templateUrl: 'Partials/tableview.html',
controller: 'tableCtrl'
}).state('List', {
url: '/listview',
templateUrl: 'Partials/listview.html',
controller: 'listCtrl'
}).state('New', {
url: '/new',
templateUrl: 'Partials/new.html',
controller: 'newCtrl'
}).state('Edit', {
url: '/edit/:index',
templateUrl: 'Partials/edit.html',
controller: 'editCtrl'
});
}
Config.$inject = ["$urlRouterProvider", "$stateProvider"];
module.config(Config);
}());
The thing in some controller passed to the view the code is duplicated, so I would like to know if there is a way to pass 2 controllers to the view at the same time or if there is a way to create a separate file with that specific part of the duplicated controller and pass it as Dependency Injection in the desired controllers.
You can't have two controllers linked to a uiRouter route. But you could certainly make a service or factory that includes your universal functionality. (See angular.service vs angular.factory for more research.)
var app = angular.module('app',[])
app.service('myFunctions',function() {
this.addNumbers = function(a,b) {
// calculate some stuff
return a+b;
}
}
app.controller('myController',function(myFunctions){
myFunctions.addNumbers(2,2); // 4
})
i am trying to move my old angular system to angular modular system(detailed info in :johnpapa/angular-styleguide ยท GitHub).
I see no error on console or somewhere else but still ui-router doesn't to its job..
routes.js
(function() {
'use strict';
angular
.module('app')
.config(routeConf);
function routeConf($urlRouterProvider, $stateProvider) {
$urlRouterProvider.otherwise('/');
$stateProvider
.state('mainMenu', {
//url: '/index',//causes navigation problems
templateUrl: 'testing/pages/mainmenu.html',
})
.state('index', {
//url: '/start',//causes navigation problems
templateUrl: 'try.html',
})
.state('terminal', {
//url: '/start',//causes navigation problems
templateUrl: 'testing/pages/terminal.html',
});
}
})();
and script.js(app)
(function() {
'use strict';
angular
.module('app', [
'ui.router'
]);
})();
http://plnkr.co/edit/VzAsH61OaZ97tyMhKkDJ?p=preview
You didn't initialize angular. You need to put something like:
<html ng-app="app">
http://plnkr.co/edit/NzqnTwkk1SqkTfwAWvQM?p=preview
Also, you actually have to put something at the default route - in this case '/'.
So I directed your 'try.html' page to that spot.
.state('index', {
url: '/',
templateUrl: 'try.html',
})
I have two modules in my application. The requirement is that I need to navigate from one module to another. Is it possible?
The two modules are sol user and sol cutomer are 2 different module. This way it is not working? Am i doing something wrong? Any other alternative please
The code which i am using is given below but it is not displaying anything
'use strict';
(function () {
angular.module('sol.user')
.config(StateConfig);
StateConfig.$inject = ['$stateProvider', '$urlRouterProvider'];
alert("user-state");
function StateConfig($stateProvider, $urlRouterProvider) {
$urlRouterProvider.when('/customer/search', '/user');
$stateProvider
.state('home.user',{
url:'/user',
controller:'sol.user.UserController',
controllerAs: 'userCtrl'
})
.state('home.search', {
url: '/customer/search',
templateUrl: 'views/customer/search/search.html',
controller: 'sol.customer.search.SearchCtrl',
controllerAs: 'searchCtrl'
})
}
})();