My app has structure like:
app/
js/
levels/
level-create
level-edit
level-list/
level-list.template.html
levellist.component.js
level-show/
level-show.template.html
levelshow.component.js
levels.module.js
also i have basic resource service which i inject to every component and route file:
'use strict';
module.exports = angular
.module('app.levels.route', [])
.config(function($stateProvider) {
$stateProvider.state({
component: 'levellist',
name: 'levelIndex',
url: '/levels',
template: '<levellist></levellist>'
}).state({
component: 'levelshow',
name: 'levelShow',
url: 'levels/:id',
template: '<levelshow></levelshow>'
});
});
with levellist component all works fine, but with levelshow it just can't find this component... Also i've noticed that search engine of stateProvider component is very specific.
There are levelshow.component.js
'use strict';
var angular = require('angular');
module.exports = angular
.module('app.levelsshow.component', ['ngMaterial'])
.component('levelshow', {
controller: LevelShowController,
templateUrl: '/app/js/levels/components/level-show/level-show.template.html'
});
LevelShowController.$inject = ['Level', '$scope', '$stateParams'];
function LevelShowController(Level, $scope, $stateParams) {
$scope.levelShow = Level.get({ id: $stateParams.id });
}
yes the question is solwed. There is no need to mark the component tag in $stateProvider.state
Related
Hello I m creating an angularJs SPA project with asp.net mvc. I want to implement angular routing in m project so I m trying to change the routes via angular routing. this is my code.
Angular routes.
var app = angular.module('myApp', [
'ngRoute',
'myApp.ctrl.testCtrl'
])
.config(['$routeProvider', '$locationProvider', function ($routeProvider, $locationProvider) {
$routeProvider.when('/test', { templateUrl: '/home/test', controller: 'testCtrl'})
}]);
My controller
var app = angular.module('myApp.ctrl.testCtrl', [])
.controller('testCtrl', ['$scope', function () {
console.log('in Controller');
}])
RouteConfig.cs
routes.IgnoreRoute("{resource}.axd/{*pathInfo}");
routes.MapRoute(
name: "Default",
url: "{controller}/{action}/{id}",
defaults: new { controller = "Home", action = "Index", id = UrlParameter.Optional }
);
Now When I write
TestPage
also tried
TestPage
but none of these works.
The Url changes to
http://localhost:57026/#!#%2Ftest
so the routing does not work. Please point me out where i m going wrong
You should write an ng-click event on anchor tag
TestPage
And in click function use in controller
$scope.clickFunction = function(){
$location.path("/test");
}
I am trying open uibmodal in angular but the parent state must change as per request of previous state.
My code of state.js -
(function() {
'use strict';
angular
.module('myApp')
.config(stateConfig);
stateConfig.$inject = ['$stateProvider'];
function stateConfig($stateProvider) {
$stateProvider
.state('save', {
parent: 'app',
url: '/save',
onEnter: ['$stateParams', '$state', '$uibModal', function($stateParams, $state, $uibModal) {
$uibModal.open({
templateUrl: 'app/save.html',
controller: 'SaveController',
controllerAs: 'vm',
backdrop: 'static',
size: 'lg'
});
}]
});
}
})();
Controller code looks like this -
(function() {
'use strict';
angular
.module('myApp')
.controller('SaveController', SaveController);
SaveController.$inject = ['$uibModalInstance','$state', '$scope','$stateParams' ];
function SaveController($uibModalInstance, $state, $scope, $stateParams) {
var vm = this;
var id = $state.params.id;
}
})();
I am trying to redirect to that state from parent state controller using:
$state.go("save",{id: 2, name:'test'});
I want to change parent state value as per request via controller, please suggest any possible solution for that.
It looks like you are just missing the root part:
$state.go("app.save",{id: 2, name:'test'});
this is the doc: https://github.com/angular-ui/ui-router/wiki/Quick-Reference#stategoto--toparams--options
I am working with IONIC Framework (Angularjs)
I am receiving below error,
463788 error Error: [ng:areq] http://errors.angularjs.org/1.4.3/ng/areq?p0=PaymentCtrl&p1=not%20a%20function%2C%20got%20undefined
at Error (native)
at http://localhost:8100/lib/ionic/js/angular/angular.min.js:6:416
at Sb (http://localhost:8100/lib/ionic/js/angular/angular.min.js:22:18)
at Qa (http://localhost:8100/lib/ionic/js/angular/angular.min.js:22:105)
at http://localhost:8100/lib/ionic/js/angular/angular.min.js:79:497
at I.appendViewElement (http://localhost:8100/lib/ionic/js/ionic-angular.min.js:17:4463)
at Object.O.render (http://localhost:8100/lib/ionic/js/ionic-angular.min.js:16:17590)
at Object.O.init (http://localhost:8100/lib/ionic/js/ionic-angular.min.js:16:16825)
at I.render (http://localhost:8100/lib/ionic/js/ionic-angular.min.js:17:3419)
at I.register (http://localhost:8100/lib/ionic/js/ionic-angular.min.js:17:3150)
Here is my code for controller.
define(['ionic', 'ionicAngular', 'angular',
'ngRoute', 'angularAnimate', 'angularSanitize', 'uiRouter'],
function (ionic, ionicAngular, angular) {
'use strict';
console.log('Payment controller ');
var PaymentCtrl = function ($scope, PaymentSvc,$state, $ionicLoading) {
/*$scope.phoneNumberVerification = function() { $state,$ionicPopup,
console.log('PhoneNumber controller added1 ');
$ionicLoading.hide();
$state.go('tab.eateries');
};*/
// When button is clicked, the popup will be shown...
};
return PaymentCtrl;
});
Serveics.js
define(['ionic', 'ionicAngular', 'angular',
'ngRoute', 'angularAnimate', 'angularSanitize', 'uiRouter'],
function (ionic, ionicAngular, angular) {
'use strict';
//console.log('service modules');
var PaymentSvc = function(){
console.log('serverices call');//var svc = this;
}
return PaymentSvc;
});
// });*/
payment.js
define(['ionic', 'ionicAngular', 'angular',
'./modules/payment/controllers/paymentctrl',
'./modules/payment/services/services',
'ngRoute', 'angularAnimate', 'angularSanitize', 'uiRouter'],
function (ionic, ionicAngular, angular,
paymentCtrl,
paymentSvc) {
'use strict';
console.log('payment.js modules');
var payment = angular.module('payment', ['ionic'])
.controller('PaymentCtrl', paymentCtrl)
.service('PaymentSvc',paymentSvc);
return payment;
});
No need to inject ['angular','ngRoute', 'angularAnimate', 'angularSanitize', 'uiRouter']. Ionic automatically inject angular decencies when you inject ['ionic']
Just write your controller directly
angular.module('starter', ['ionic']).controller('PayCtrl',function ($scope,$state,$ionicLoading,PaymentSvc){
//starter is the app name come from ng-app="starter"
$ionicLoading.show();
$scope.phoneNumberVerification = function(){
console.log('PhoneNumber controller added1');
$ionicLoading.hide();
$state.go('tab.eateries');
};
});
I advise you to organize your javascript project files to in 3 files:
app.js which contains
angular.module('starter', ['ionic', 'starter.controllers','starter.services'])..config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('app', {
url: '/app',
abstract: true,
templateUrl: 'templates/menu.html',
controller: 'AppCtrl'
}).state('app.home', {
url: '/home',
views: {
'tab-home': {
templateUrl: 'templates/home.html',
controller : 'HomeCtrl'
}
}
});
$urlRouterProvider.otherwise('/app/home');
});
controller.js which contains your controllers
angular.module('starter.controllers', []).controller('AppCtrl', function('PayCtrl',function ($scope,$state,$ionicLoading,PaymentSvc){
$ionicLoading.show();
$scope.phoneNumberVerification = function(){
console.log('PhoneNumber controller added1');
$ionicLoading.hide();
$state.go('tab.eateries');
};
});
service.js which contains you connections to server
angular.module('starter.services', []).factory('PaymentSvc',function($http,$q){
});
it is an injection error. for example, if you inject ['a','b','c'] you must have it in your function in the same order and amount: function(a,b,c). in your case, you have more parameters in the injection than the parameters in your controller function.
I'm trying to inject a factory provider from another js file but it can't locate the provider. If this can't be done, what is the better way?
demo.config.js
function configState($stateProvider, $urlRouterProvider, $compileProvider, demoProvider) {
// Optimize load start with remove binding information inside the DOM element
$compileProvider.debugInfoEnabled(true);
// Set default state
$urlRouterProvider.otherwise("/dashboard");
$stateProvider
// Dashboard - Main page
.state('dashboard', {
url: "/dashboard",
templateUrl: "views/dashboard.html",
data: {
pageTitle: 'Dashboard',
}
})
}
angular
.module('demoApp')
.config(configState)
.run(function($rootScope, $state) {
$rootScope.$state = $state;
});
demo.provider.js
(function () {
'use strict';
angular
.module('demoApp')
.provider('demo', function() {
return {
$get: function() {
return {
title: "Starcraft"
}
}
}
});
})();
I always put my own provider to controllers. Like in my directive
(function() {
'use strict';
angular.module('yourMod').directive('yourViewPage', yourViewPage);
angular.module('yourMod').controller('YourViewPageCtrl', YourViewPageCtrl);
function YourViewPageCtrl(YourProvider) {
//your code!!!
// Example YourProvider.getSomeThing();
console.log('My life for Aiur!!!');
}
})();
I'm working on an application that is using angularjs routing. I've added ngRoute as a dependancy, I have confirmed that the angular-route.js file is being loaded. I still get an unknown provider error $routeProvided <- $route.
What am I missing?
I have three files for my app, they are loaded in the order displayed below.
My application.js file
(function () {
'use strict';
var app = angular.module('MyApp', [
// Angular modules
'ngAnimate', // animations
'ngRoute', // routing
]);
app.run(['$route', '$rootScope', '$q', 'routemediator',
function ($route, $rootScope, $q, routemediator) {
routemediator.setRoutingHandlers();
}]);
})();
my route config file
(function () {
'use strict';
var app = angular.module('MyApp');
// Configure Toastr
toastr.options.timeOut = 4000;
toastr.options.positionClass = 'toast-bottom-right';
var events = {
controllerActivateSuccess: 'controller.activateSuccess',
spinnerToggle: 'spinner.toggle'
};
var config = {
appErrorPrefix: '[Error] ', //Configure the exceptionHandler decorator
docTitle: 'error: ',
events: events,
version: '1.0.0'
};
app.value('config', config);
app.config(['$logProvider', function ($logProvider) {
// turn debugging off/on (no info or warn)
if ($logProvider.debugEnabled) {
$logProvider.debugEnabled(true);
}
}]);
app.config(['commonConfigProvider', function (cfg) {
cfg.config.controllerActivateSuccessEvent = config.events.controllerActivateSuccess;
cfg.config.spinnerToggleEvent = config.events.spinnerToggle;
}]);
})();
My config file
(function () {
'use strict';
var app = angular.module('MyApp');
// Collect the routes
app.constant('routes', getRoutes());
// Configure the routes and route resolvers
app.config(['$routeProvider', 'routes', routeConfigurator]);
function routeConfigurator($routeProvider, routes) {
alert('in route config');
routes.forEach(function (r) {
$routeProvider.when(r.url, r.config);
});
$routeProvider.otherwise({ redirectTo: '/Home.html' });
}
// Define the routes
function getRoutes() {
return [
{
url: '/',
config: {
title: 'Home',
templateUrl: '/App/views/Home.html',
controller: 'HomeController',
controllerAs: 'vm',
settings: {
nav: 1,
content: '<i class="fa fa-dashboard"></i> Home'
}
}
}
];
}
})();
If you're using a recent verison of Angular (1.2+), you need to download and include the ngRoute file in addition to angular.js, which doesn't include all these side providers anymore.