I have a js file in my partial view. How would I load it dynamically when that partial is loaded?
My directory structure is
app
---css
------style.css
----js
-------app.js
-------appRotes.js
-------script.js
----views
-------home.html
-------about.html
----index.html
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-route.js"></script>
<body ng-app="myapp">
<p>Main</p>
Red
<div ng-view></div>
<script src="js/app.js"></script>
<script src="js/appRoutes.js"></script>
</body>
</html>
My app.js
angular.module("myapp", ["myapp.routes"]);
My appRoutes.js
angular.module("myapp.routes",["ngRoute"]).
config(function($routeProvider, $locationProvider){
$routeProvider.
when("/",{
templateUrl : "views/home.html"
})
.otherwise({
redirectTo: '/'
})
.when("/b",{
templateUrl : "views/about.html"
})
.otherwise({
redirectTo: '/'
});
});
My about.html
<h1>About</h1>
<script src="script.js"></script>
can use oclazyload for dynamic js file loading
using ngRoute
$routeProvider
.when('/time',
{
controller: 'timeController',
templateUrl: 'views/home.html',
resolve: {
lazy: ['$ocLazyLoad', function($ocLazyLoad) {
return $ocLazyLoad.load([{
name: 'myApp',
files: ['js/AppCtrl.js']
}]);
}]
}
})
using ui router
$stateProvider.state('index', {
url: "/", // root route
views: {
"lazyLoadView": {
controller: 'AppCtrl', // This view will use AppCtrl loaded below in the resolve
templateUrl: 'views/home.html'
}
},
resolve: { // Any property in resolve should return a promise and is executed before the view is loaded
loadMyCtrl: ['$ocLazyLoad', function($ocLazyLoad) {
// you can lazy load files for an existing module
return $ocLazyLoad.load('js/AppCtrl.js');
}]
}
});
you can install it using bower
bower install oclazyload --save
Related
I am trying to route a link to a .ashx service file, but it's not working. It works fine when I redirect to .html files, but when I redirect it to an .ashx, file it gives an error; file does not exist on current directory.
The following is my App.config code:
App.config(function($routeProvider, $locationProvider) {
$routeProvider.caseInsensitiveMatch = true;
$routeProvider
.when("/home", {
controller: "homeController",
templateUrl: "templates/home.html",
})
.when("/api", {
controller: "apiController",
templateUrl: "../ExclusiveAutoSales_Handler.ashx",
})
.when("/filter", {
controller: "filterController",
templateUrl: "templates/filter.html",
})
.otherwise({
redirectTo: "/home"
})
$locationProvider.html5Mode(true);
});
Is there a way to import a different stylesheet for each page, without mixing the classes?
For example, for index.html to have style.css, for about.html how would I load a about.css into it?
This is my angular code:
// create module
var heykatapp = angular.module('heykatapp', ['ngRoute']);
// routes configuration
heykatapp.config(function ($routeProvider) {
$routeProvider
// home page
.when('/', {
templateUrl: 'pages/home.html',
controller: 'mainController'
})
// about page
.when('/about', {
templateUrl: 'pages/about.html',
controller: 'aboutController'
})
// contact page
.when('/contact', {
templateUrl: 'pages/contact.html',
controller: 'contactController'
});
});
heykatapp.controller('mainController', function ($scope) {});
heykatapp.controller('aboutController', function ($scope) {});
heykatapp.controller('contactController', function ($scope) {});
You can just insert the scripts in each view
contact.html with this code
<link rel="stylesheet" type="text/css" href="contact.css">
index.html with this another css:
<link rel="stylesheet" type="text/css" href="index.css">
I am using require js in my project to load controllers on demand, I am getting "[ng:areq] Argument 'aboutCtrl' is not a function, got undefined" exception while invoking "aboutCtrl", i have configured "$controllerProvider" to register controller and i see the respective file has been downloaded by require js. I am posting my code as follows
Index.html
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>AngularJS SPA</title>
<link href="css/bootstrap.css" rel="stylesheet" />
<script data-main="scripts/main.js" src="scripts/libs/require.js"></script>
</head>
<body>
<div ng-include="'views/shared/_header.html'"></div>
<ui-view></ui-view>
</body>
</html>
main.js
require.config({
baseurl: '/scripts/',
paths: {
'angular': 'libs/angular',
'ui-router': 'libs/angular-ui-router',
'jquery': 'libs/jquery-1.10.2',
'bootstrap': 'libs/bootstrap',
'homeCtrl': "controllers/homeCtrl"
},
shim: {
'ui-router': {
deps: ['angular'],
exports: 'angular'
},
angular: {
exports: 'angular'
},
bootstrap: {
deps: ['jquery']
}
},
deps: ['app']
});
require(["app","bootstrap","homeCtrl"],function (app) {
app.init();
});
app.js
define(['ui-router'], function () {
var app = angular.module("app", ['ui.router']);
app.config(['$controllerProvider', function ($controllerProvider) {
app.registerController = $controllerProvider.register;
} ]);
app.init = function () {
angular.bootstrap(document, ['app']);
};
app.config(function ($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise("/");
$stateProvider
.state("home", {
url: "/",
templateUrl: 'views/home/home.html',
controller: 'homeCtrl'
})
.state("about", {
url: "/about",
templateUrl: 'views/account/about.html',
controller: 'aboutCtrl',
resolve: {
load: ['$q', function ($q) {
var defered = $q.defer();
require(['../scripts/controllers/aboutCtrl'], function () {
defered.resolve();
});
return defered.promise;
} ]
}
});
});
return app;
});
homeCtrl.js
define(['app'], function (app) {
app.controller("homeCtrl", function ($scope) {
$scope.Message = "About Us";
});
});
aboutCtrl.js
define(['app'], function (app) {
app.controller("aboutCtrl", function ($scope) {
$scope.Message = "About Us";
});
});
Error Details
Error: [ng:areq] Argument 'aboutCtrl' is not a function, got undefined
Hey I am new to requirejs, I am trying to use requirejs with angularjs,but I get struggling with dependencies. The first dependency of angular which is ngRoute, doesn't get loaded.
I get the following error:
angular.min.js:6Uncaught Error: [$injector:modulerr]
I have checked the paths of each files and it seems to be ok.
This is my code:
Index.html
<!DOCTYPE html>
<html>
<head>
<title>RequireJS Example</title>
<script type="text/javascript" data-main="scripts/js/main"
src="scripts/vendor/requirejs/require.js">
</script>
<script type="text/javascript">
require(['main'],function () {
console.log("after load requirejs");
})
</script>
</head>
<body ng-app="app" ng-controller="mainCTRL">
{{title}}
</body>
</html>
main.js
require.config({
baseUrl: 'scripts',
paths:{
'angular': 'vendor/angular/angular.min',
'angular-route': 'vendor/angular/angular-route.min',
'jquery': 'vendor/jquery/jquery-1.12.3.min',
'app' : 'js/app',
'bootstrap':'vendor/bootstrap/js/bootstrap.min',
'bootstrapUI': 'vendor/bootstrap-ui/ui-bootstrap-tpls-1.2.4.min',
'hotkeys': 'vendor/hotkeys.min.js',
'jqueryDataTables': 'vendor/jqueryDataTables/jquery.dataTables.min'
},
shim:{
'jquery': {
exports: 'jquery'
},
'angular': {
exports: 'angular',
deps: ['jquery']
},
'angular-route':{
exports: 'ngRoute',
deps: ['angular']
},
'bootstrap':{
exports: 'bootstrap',
deps:['jquery']
},
'app':{
deps: ['jquery','angular','bootstrap','angular-route']
}
}
});
require(['app'], function(){
angular.bootstrap(document,['app']);
})
app.js
/**
* Module
*
* Description
*/
define(['jquery','angular','bootstrap','angular-route'],function($){
var app = angular.module('app', ['ngRoute']);
app.controller('mainCTRL', ['$scope', function($scope){
$scope.title = "Hello World";
}]);
app.controller('HomeCtrl', ['$scope', function($scope){
$scope.title = "Hello Home";
}])
});
UPDATE:
angular-route is loaded properly using requirejs. The problem is that when I call $routeProvider it doesn't work properly as expected and I get another module errors such as:
angular.min.js:6 Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.5.3/$injector/modulerr?p0=app&p1=ReferenceErr…0%20at%20http%3A%2F%2F127.0.0.1%3A49849%2Fscripts%2Fjs%2Fmain.js%3A36%3A13
define(['jquery','angular','bootstrap','angular-route'],function($){
var app = angular.module('app', ['ngRoute']);
app.config(function ($routeProvider) {
$routeProvider.when("/home", angularAMD.route({
templateUrl: 'views/home.html', controller: 'HomeCtrl',
controllerUrl: 'ctrl/home'
}))
});
app.controller('mainCTRL', ['$scope', function($scope){
$("#title").text("I have change the title");
console.log("$('#title').val()",$("#title").text());
$scope.title = "Hello World";
}]);
app.controller('HomeCtrl', ['$scope', function($scope){
$scope.title = "Hello Home";
}])
});
I have a $routeProvider in my Angular JS application which won't load the template in the ng-view.
I've set up <html data-ng-app="myApp"> and <section data-ng-view></section.
It does neither load the template (doesn't even make an XHR), nor does it redirect on other paths (like /#/foo/bar/foo/ and it doesn't throw an error.
This is my configuration:
angular.module('myApp', ['myAppFilters'])
.config [
'$routeProvider',
($routeProvider) ->
$routeProvider
.when '/:year/:month',
templateUrl: 'partials/detail.html'
controller: DetailCntl
.when '/:user/:year/:month',
templateUrl: 'partials/detail.html'
controller: DetailCntl
.otherwise
redirectTo: '/'
]
Edit: Here's the compiled JS:
angular.module('myApp', ['myAppFilters']).config([
'$routeProvider', function($routeProvider) {
return $routeProvider.when('/:year/:month', {
templateUrl: 'partials/detail.html',
controller: DetailCntl
}).when('/:user/:year/:month', {
templateUrl: 'partials/detail.html',
controller: DetailCntl
}).otherwise({
redirectTo: '/'
});
}
]);
Edit #2: I found the solution by myself:
I had this line in my factories.coffee which overwrote the config:
angular.module('myApp', []).factory 'api', ($http, $q, $cacheFactory) ->
...
Now I have the config assigned to #myApp and am using #myApp.factory 'api', ... and it's working.
I found the solution by myself: I had this line in my factories.coffee which overwrote the config:
angular.module('myApp', []).factory 'api', ($http, $q, $cacheFactory) ->
...
Now I have the config assigned to #myApp and am using #myApp.factory 'api', ... and it's working.
Thanks for your support.