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");
}
Related
I'd like to know if I can put a stateprovider somewhere else than my app.js, because it causes me some problems in other pages.
app.js
var app = angular.module('myApp', 'ui.router']);
app.config(function ($stateProvider, $urlRouterProvider) {
$stateProvider
// route to show our basic form (/form)
.state('form', {
url: '/form',
templateUrl: 'templates/step_Form/form.html?v=' + new Date().getDay()
})
// url will be nested (/form/profile)
.state('form.upload', {
url: '/upload',
templateUrl: 'templates/step_Form/form-upload.html?v=' + new Date().getDay()
})
// url will be /form/interests
.state('form.content', {
url: '/content',
templateUrl: 'templates/step_Form/form-content.html?v=' + new Date().getDay()
})
$urlRouterProvider.otherwise('/form/upload');
})
My controller
angular.module('myApp').controller('ImportGeneralCtrl', function ($scope, $stateProvider, $urlRouterProvider) {
//myfunctions
}
I integrated a multi-step form in my HTML, using the state provider.
How could i get out the state provider from app.js to only apply it on my controller?
You cant use $stateProvider or $urlRouterProvider (providers) in a controller because those providers are just made for configuration injection. It can be uses in any angular.module('myApp').config() you want but you can't user providers in a controller. In controllers you could only inject $state (modules, services, factories, e.g.):
angular.module('myApp').controller('myController', function ($scope, $state) {}
This little code snippet shows you how to create a Service, a Factory and a Provider.
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
how to call the external controller using resolve in angularjs
var mainApp = angular.module("mainApp", ['ngRoute']);
mainApp .config(function ($routeProvider, $locationProvider) {
$routeProvider
// home page
.when('/', {
templateUrl: 'Samples/accordion.html',
controller: "AddStudentController",
})
});
accordion.html
<h1>AddStudent</h1>
mainApp.controller('AddStudentController', function($scope) {
$scope.message = "This page will be used to display add student form";
});
how to call the controller using resolve.
Please share your suggestions,
Is there a way to build an URL based on the defined Angular routes? Something like Symfony does (http://symfony.com/doc/current/book/routing.html#generating-urls).
Here is an example of how it would be used:
app.config(['$routeProvider', function($routeProvider) {
$routeProvider
.when('/document/:documentId', {
name: 'document',
templateUrl: 'partials/document.html',
controller: 'documentController'
});
}]);
Then in templates we could use something like:
View document
That would be compiled into:
View document
I have user $stateParams (from angular-ui-router) for this.
.controller('MainCtrl', function ($scope, $stateParams) {
$scope.link = $stateParams.documentId;
});
UI Router wiki on Github
I want to pass the data of the function PhoneList() to the UI-Router controller function to the state 'phonedescription'.
JS:
var myApp = angular.module('myApp', ["ui.router"]);
myApp.config(function($stateProvider, $urlRouterProvider){
// For any unmatched url, send to /route1
$urlRouterProvider.otherwise("/phone")
$stateProvider
.state('phone', {
url: "/phone",
templateUrl: "index.html"
})
.state('phonedescription', {
url: "/description",
templateUrl: "description.html",
controller: function($scope){
//Want to access the angular object to pass the attributes to this controller
}
}
});
function PhoneList($scope, $http, $templateCache)
{
$scope.list = function() {
$scope.phones = //get data from backend
}
$scope.list();
};
It appears that you are defining PhoneList as a loose function outside of the angular framework. Look into using a service instead. You can then inject that service into your phonedescription controller.