This question already has an answer here:
how can i load javascript file along with ng-include template
(1 answer)
Closed 3 years ago.
I have an Angular app which redirects route to a particular html page. But how to include related javascript with this.
For example if i click red it will load red.html. but i need to load red.js also additionally.
<script>
var app = angular.module("myApp", ["ngRoute"]);
app.config(function($routeProvider) {
$routeProvider
.when("/", {
templateUrl : "main.html"
})
.when("/red", {
templateUrl : "red.html";
})
.when("/green", {
templateUrl : "green.html"
})
.when("/blue", {
templateUrl : "blue.html"
});
});
</script>
You should use controller property:
<script>
var app = angular.module("myApp", ["ngRoute"]);
app.config(function($routeProvider) {
$routeProvider
.when("/", {
controller : "MainController"
templateUrl : "main.html"
})
.when("/red", {
controller : "RedController";
templateUrl : "red.html";
})
.when("/green", {
controller : "GreenController"
templateUrl : "green.html"
})
.when("/blue", {
controller : "BlueController"
templateUrl : "blue.html"
});
});
</script>
<script src="controllers.js"></script> // add controllers files
controllers.js
angular
.module('myApp')
.controller('MainController', function() {
//your MainController code
});
angular
.module('myApp')
.controller('RedController', function() {
//your RedController code
});
angular
.module('myApp')
.controller('GreenController', function() {
//your GreenController code
});
angular
.module('myApp')
.controller('BlueController', function() {
//your BlueController code
});
Related
I have a link as follows:
view
And a div that's going to load Home.html as below:
<div class="col-md-8">
<ng-view></ng-view>
</div>
My angular config is:
myApp = angular.module("myApp", ["ngRoute"])
.config(function ($routeProvider) {
$routeProvider
.when("/Home", {
templateUrl: "Templates/Home.html",
controller: "HomeController"
})
})
.controller("BlogController", function ($scope, $http) {
$http.get("/Home/GetBlogEntries")
.then(function (response) {
$scope.data = response.data;
});
$scope.removeBlogEntry = function (index) {
$scope.data.Data.splice(index, 1);
};
})
.controller("HomeController", function ($scope, $http) {
});
Before I click the link, the URL is showing http://localhost:58679/#/Home and after I click it, the address bar goes to http://localhost:58679/#!#%2FHome
Basically nothing happens and my home.html doesn't get rendered where it is supposed to.
Include $locationProvider.hashPrefix(''); in your config.
myApp = angular.module("myApp", ["ngRoute"])
.config(function ($routeProvider,$locationProvider) {
$locationProvider.hashPrefix('');
$routeProvider
.when("/Home", {
templateUrl: "Templates/Home.html",
controller: "HomeController"
})
})
I have the following code
var balaitus = angular.module("balaitus", ["ngRoute"]);
// configure our routes
balaitus.config(function($routeProvider) {
$routeProvider
// route for the home page
.when('/', {
templateUrl : 'home_usuario2.html',
controller : 'usuarioCtrl'
})
.when('/home_usuario', {
templateUrl : 'home_usuario2.html',
controller : 'usuarioCtrl'
})
// route for the about page
.when('/estadisticas', {
templateUrl : 'estadisticas.html',
controller : 'estadisticasCtrl'
})
// route for the contact page
.when('/hashtags', {
templateUrl : 'hashtags.html',
controller : 'hashtagsCtrl'
})
.otherwise({
templateUrl : 'home_usuario2.html',
controller : 'usuarioCtrl'
});
});
// create the controller and inject Angular's $scope
balaitus.controller('usuarioCtrl', function($scope) {
// create a message to display in our view
$scope.message = 'Hi! This is the home page.';
});
balaitus.controller('estadisticasCtrl', function($scope) {
$scope.message = 'Hi! This is the estadisticas page.';
});
balaitus.controller('hashtagsCtrl', function($scope) {
$scope.message = 'Would you like to contact us?';
});
The code simply routes different pages, and set the corresponding controller. It works fine, but when I add another angular module between [ ], for example ngFileUpload or ui.bootstrap.demo, ng-route doesn't work, ¿but why?
you should add it in the constructor, like:
var balaitus=angular.module("balaitus", ['webix', 'ngRoute','ui.router']);
balaitus.config(['$stateProvider', '$urlRouterProvider', '$routeProvider', '$locationProvider', '$qProvider', function ($stateProvider, $urlRouterProvider, $routeProvider, $locationProvider, $qProvider) {
$routeProvider ....
and of course include the js files in ur html code
<script src="Scripts/angular-route.js"></script>
How can I do a post request to a url using routeprovider? Provided sample code below
<script>
var app = angular.module("myApp", ["ngRoute"]);
app.config(function($routeProvider) {
$routeProvider
.when("/", {
templateUrl : "main.htm"
})
.when("/red", {
templateUrl : "red.htm"
})
.when("/green", {
templateUrl : "green.htm"
})
.when("/blue", {
templateUrl : "blue.htm"
});
});
</script>
You can use a resolve:
.when("/", {
templateUrl : "main.htm",
resolve: {
data: function($http) {
$http.post('/yourUrl', yourData)
.then(function(res) {
return res;
}, function(err) {
console.log(err);
return null;
})
}
}
})
And then in your controller,
.controller(function(data) {
console.log(data);
})
NOTE: This is not using routeProvider per se, because making REST calls is not what the routeProvider is for. Angular can do that only through the $http service. I am assuming that you just want to make a REST call from within your route definition.
Protip A better way of doing this would be to define a service in your module, and insert the module in the route resolve, rather than injecting $http directly. I've done that here only for brevity
angular
.module('madkoffeeFrontendApp', [])
.config(function ($routeProvider, $locationProvider) {
$routeProvider
.when('/', {
templateUrl: 'views/articles.html',
controller: 'MainCtrl',
resolve: {
articles: function(articleService,$q) {
// return articleService.getArticles();
return 'boo';
}
}
})
.otherwise({
redirectTo: '/'
});
$locationProvider.html5Mode(true);
});
My above code contains the resolve.
angular.module('madkoffeeFrontendApp')
.controller('MainCtrl', ['$scope',
function($scope, articles) {
console.log(articles);
}]);
When I tried to inject articles in the array as shown below, it gives an error but as far as I know that's the correct way to inject a resolve function:
angular.module('madkoffeeFrontendApp')
.controller('MainCtrl', ['$scope','articles',
function($scope, articles) {
console.log(articles);
}]);
My articles resolve function is not being injected. I tried returning just a string (example: 'boo') as shown to test if articles dependency works or not, and it doesn't i.e. it returns undefined. What could be the reason?
Here's a Plunker to demonstrate the resolve message. As you'll see in the example, it's the same structure as the code you posted and should work fine.
Click the about page to see the resolve message.
http://plnkr.co/edit/FomhxYIra5GI7nm1KpGb?p=preview
Code:
var resolveTestApp = angular.module('resolveTestApp', ['ngRoute']);
resolveTestApp.config(function($routeProvider) {
$routeProvider
.when('/', {
templateUrl : 'pages/home.html',
controller : 'mainController'
})
.when('/about', {
templateUrl : 'pages/about.html',
controller : 'aboutController',
resolve: {
resolveMessage: function() {
return 'This is the resolve message';
}
}
})
});
resolveTestApp.controller('mainController', function($scope) {
$scope.message = 'Everyone come and see how good I look!';
});
resolveTestApp.controller('aboutController', ['$scope', 'resolveMessage', function($scope, resolveMessage) {
$scope.message = resolveMessage;
}]
);
It may be the version of Angular you're using or a problem when you're minifying your code.
I am new in AngularJS. My issue is like this. After submitting your form it is sending an email with a link to your artwork. It look like this
domain.com/?key=1y2p6pzc2lxj33w5b996cd4ufq.
When I click the link is going to the website homepage instead to your artwork. And the link look like this:
domain.comk/?key=1y2p6pzc2lxj33w5b996cd4ufq/#home
in the address bar, which is equal with domain.com/#home. I don't know if I explained properly.
var neonApp = angular.module('neonApp', ['ngRoute', 'PatternForm']);
//caching
neonApp.run(['$rootScope', '$templateCache', '$location', '$window', '$timeout', function($rootScope, $templateCache, $location, $window, $timeout) {
$rootScope.$on('$viewContentLoaded', function() {
//$templateCache.removeAll();
});
$rootScope
.$on('$routeChangeSuccess',
function (event) {
if (!$window.ga) {
return;
}
$timeout(function () {
$window.ga('send', 'pageview', { page: $location.path() });
}, 100);
});
}]);
//Routing
neonApp.config(function($routeProvider, $locationProvider){
$routeProvider
.when('/home', {
templateUrl : 'views/home.html',
controller : 'homeController'
})
.when('/drawing', {
templateUrl : 'views/drawing.html',
controller : 'drawController'
})
.when('/choose', {
templateUrl : 'views/choose.html',
controller : 'chooseController'
})
.when('/submit', {
templateUrl : 'views/submit.html',
controller : 'submitController'
})
.when('/gallery', {
templateUrl : 'views/gallery.html',
controller : 'galleryController'
})
.when('/support_error', {
templateUrl : 'views/support_error.html',
controller : 'supportErrorController'
})
.when('/success', {
templateUrl : 'views/success.html',
controller : 'successController'
})
.when('/error', {
templateUrl: 'views/form_error.html',
controller: 'errorController'
})
.otherwise({redirectTo:'/home'});
});