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">
Related
friends, I am new in angular js and I was trying to work with angular Route, but when I click on #/home it gives me some strange URL http://127.0.0.1:3000/#!/home#%2Fhome
But By default, the otherwise condition is working fine http://127.0.0.1:3000/#!/home
app.config(['$routeProvider', function($routeProvider){
$routeProvider
.when('/home', {
templateUrl: 'views/home.html'
})
.when('/list', {
templateUrl: 'Views/listing.html',
controller: 'mycontroller'
}).otherwise({
redirectTo: '/home'
})
}]);
you can try with
use $locationProvider
angular.module('myApp', ['ngRoute'])
.config(['$locationProvider', function($locationProvider) {
$locationProvider.html5Mode(false);
$locationProvider.hashPrefix('');
}]);
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);
});
I have made changes in my index.html and app.js.
This is app.js file.
angular
.module('assessmentApp', ['ngRoute', 'ngCookies', 'ngSanitize', 'timer', 'assets', 'youtube-embed'])
.config(config)
.run(run);
config.$inject = ['$routeProvider', '$locationProvider', '$httpProvider'];
function config($routeProvider, $locationProvider, $httpProvider) {
/*$locationProvider.html5Mode({
enabled: true,
requireBase: false
});*/
$routeProvider
.when('/', {
templateUrl: 'views/home.html',
controller: 'HomeController',
controllerAs: 'vm'
})
.when('/login', {
templateUrl: 'views/login.html',
controller: 'LoginController',
controllerAs: 'vm'
})
if(window.history && window.history.pushState){
$locationProvider.html5Mode({
enabled: true,
requireBase: true,
rewriteLinks: true
});
}
}
This is Index.html.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Assessment</title>
<meta name="description" content="">
<meta http-equiv=X-UA-Compatible content="IE=edge">
<meta name=viewport content="width=device-width,initial-scale=1">
<base href="/assessment/"></base>
</head>
</html>
I have followed all the solution which is present related to my problem but still my app not working.
I am using nginx server but I don't know is any changes requied or not? If yes then what change?
I added html5 api and base tag and i removed all # from my app html file so my app is working fine but when I am going to reload my application it return page not found
Make sure your server is set so that it is returning your index.html instead of a 404.
In your nginx config for this site add:
error_page 404 =200 /index.html;
Alternatively, you can redirect like this:
try_files $uri $uri/ /index.html;
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
I am creating an angular application and would like dynamically load the controller. I see you can use a module called ocLazyLoad (found here https://github.com/ocombe/ocLazyLoad)
Now i am sure i have done everything i need to (obviously done something wrong) but when i try to run my application, nothing loads and the browser just freezes. if i load the controller normally, it works fine and the whole page loads.
Here is some code
app.js
var App = angular.module('MyApp', ['ui.router', 'ngStorage', 'ngCookies', 'pascalprecht.translate', 'oc.lazyLoad']);
config.state.js
App.config(['$stateProvider', '$httpProvider', '$locationProvider', '$urlRouterProvider', '$controllerProvider', '$compileProvider', '$filterProvider', '$provide', '$ocLazyLoadProvider',
function ($stateProvider, $httpProvider, $locationProvider, $urlRouterProvider, $controllerProvider, $compileProvider, $filterProvider, $provide, $ocLazyLoadProvider) {
'use strict';
// enable html5Mode
$locationProvider.hashPrefix('!').html5Mode(true);
// defaults to home
$urlRouterProvider.otherwise('/admin/settings');
// config ocLazyLoad
$ocLazyLoadProvider.config({
events: true
});
App.controller = $controllerProvider.register;
App.directive = $compileProvider.directive;
App.filter = $filterProvider.register;
App.factory = $provide.factory;
App.service = $provide.service;
App.constant = $provide.constant;
App.value = $provide.value;
// states
$stateProvider
.state('admin', {
url: '/admin',
abstract: true,
controller: 'AdminController',
templateUrl: basePath('admin/admin.html')
})
.state('admin.settings', {
url: '/settings',
controller: 'SettingsController',
templateUrl: basePath('admin/settings/settings.html'),
resolve: {
loadController: ['$ocLazyLoad', function ($ocLazyLoad) {
return $ocLazyLoad.load({
name: 'admin-settings',
files: ['/Scripts/app/components/admin/settings/settings-controller.js']
});
}]
}
});
});
function basePath(uri) {
return '/Scripts/app/components/' + uri;
};
}]);
admin-controller.js
App.controller('AdminController', ['$rootScope', '$scope', '$state', '$localStorage', '$translate', '$timeout', '$window', function ($rootScope, $scope, $state, $localStorage, $translate, $timeout, $window) {
'use strict';
//... some code here
}]);
settings-controller.js
App.controller('SettingsController', ['$scope', function ($scope) {
console.log("settings loaded");
}]);
index.html (using asp.net MVC)
<!DOCTYPE html>
<html ng-app="MyApp">
<head>
<title ng-bind="models.helloAngular"></title>
#Styles.Render("~/Content/css")
<link rel="stylesheet" href="~/Content/app.css" />
</head>
<body class="layout-boxed">
<section class="wrapper" ui-view></section>
#Scripts.Render("~/bundles/angular")
#Scripts.Render("~/bundles/angular-translate")
#Scripts.Render("~/bundles/angular-storage")
#Scripts.Render("~/bundles/app")
</body>
</html>
admin.html
<!-- Main section-->
<section>
<!-- Page content-->
<div ui-view autoscroll="false" ng-class="app.viewAnimation" class="content-wrapper">
</div>
</section>
settings.html
<div>here</div>