AngularJs - Link rel stylesheet is not being used inside ui-view - angularjs

THE LINK REL STYLESHEET CSS does not reflect the css of login.html inside the UI VIEW
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!-- IMPORT -->
<link rel="stylesheet" href="content/css/index.css">
</head>
<body ng-app="test" ui-view>
</body>
<script src="lib\angular\angular.js"></script>
<script src="lib\angular\angular-route.min.js"></script>
<script src="lib\angular\angular-ui-router.min.js"></script>
<script src="app\app.js"></script>
<script src="app\router\router.js"></script>
</html>
CSS
.turnBlack {
background: black;
}
ROUTER JS
app.config(['$stateProvider', function ($stateProvider, $urlRouterProvider) {
$stateProvider
.state("login", {
url: "/login",
templateUrl: "app/view/login.html",
controller: "loginController"
})
$urlRouterProvider.otherwise('/login'); // ALSO THE OTHERWISE IS NOT WORKING
}])
LOGIN.HTML
The div has to be background black
<div class="turnBlack">
I WANT TO BE BLACK
</div>

You should use ng-class="turnBlack" instead of class="turnBlack".

Related

Angular UI Router transition error

"angular 1.6.1", "angular-ui-router 0.3.1", All ui views changed/worked correctly but i'm getting the following error in my console window, i don't know why.
My HTML code is
<!DOCTYPE html>
<html lang="en" data-ng-app="manoj">
<head>
<meta charset="UTF-8">
<title>My App</title>
<link rel="stylesheet" href="assets/style/angular-material.css">
<link rel="stylesheet" href="assets/style/materialdesignicons.min.css">
<link rel="stylesheet" href="assets/style/style.css">
</head>
<body>
<div ui-view class="main-body"></div>
<script src="assets/js/jquery-1.11.3.min.js"></script>
<!--Angular Library-->
<script src="angular/angular.min.js"></script>
<script src="angular/angular-ui-router.min.js"></script>
<script src="angular/angular-animate.min.js"></script>
<script src="angular/angular-aria.min.js"></script>
<script src="angular/angular-messages.min.js"></script>
<!-- Angular Material Library -->
<script src="assets/js/angular-material.min.js"></script>
<!--App Scripts-->
<script src="app/app.js"></script>
<script src="app/dashboard/dashboard.js"></script>
<script src="app/login/login.js"></script>
</body>
</html>
app.js file
angular.module('manoj', ['ui.router','ngMaterial'])
.config(function ($mdThemingProvider, $locationProvider, $stateProvider, $urlRouterProvider) {
$mdThemingProvider.disableTheming();
$locationProvider.hashPrefix('');
$urlRouterProvider.otherwise('/a/dashboard');
$stateProvider
.state('login',{
url:'/login',
templateUrl:'app/login/index.html',
controller: 'loginCtrl'
})
.state('a',{
url:'/a',
templateUrl:'app/app.html'
})
.state('a.dashboard',{
url: '/dashboard',
templateUrl: 'app/dashboard/dashboard.html',
controller:'dashboardCtrl'
});
}).run(function ($rootScope, $state, $stateParams){
$rootScope.$state = $state;
$rootScope.$stateParams = $stateParams;
});
Please somebody help me...
You need to update ui-router, try with "angular-ui-router 1.0.3"

ui-router not working with material design lite

Am trying to use material-design-lite with ui-router, but my templates are never rendered into the view
<html lang="en" ng-app="admin">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="fragment" content="!">
<base href="/">
<title ng-bind="state.data.title"></title>
<link rel="stylesheet" type="text/css" href="libs/material-design-lite/material.min.css">
<link rel="stylesheet" type="text/css" href="src/css/app.css">
</head>
<body>
<div class="app-layout mdl-layout mdl-layout--fixed-drawer mdl-layout--fixed-header">
<app-header></app-header>
<app-sidebar></app-sidebar>
<main class="mdl-layout__content mdl-color--grey-100 page">
<section ui-view></section>
</main>
</div>
<script>
//Global Variables
</script>
<script src="libs/material-design-lite/material.min.js"></script>
<script src="libs/angular/angular.min.js"></script>
<script src="libs/angular-ui-router/release/angular-ui-router.min.js"></script>
<script src="src/js/modules/angular-mdl.js"></script>
<script src="src/js/app.js"></script>
<script src="src/js/app.routes.js"></script>
<script src="src/js/controllers/main.js"></script>
<script src="src/js/controllers/dashboard.js"></script>
<!-- Directives -->
<script src="src/js/directives/header.js"></script>
<script src="src/js/directives/sidebar.js"></script>
</body>
</html>
app.routers.js file
//App Routes
angular.module('admin').
config(['$stateProvider', '$urlRouterProvider','$locationProvider',
function($stateProvider, $urlRouterProvider, $locationProvider) {
$locationProvider.html5Mode(true).hashPrefix('!');
$urlRouterProvider.otherwise('/dashboard');
$stateProvider.state('app',{
abstract: true,
url: '',
controller: 'MainController'
})
.state('app.dashboard', {
url: '/dashboard',
data: {
'title': "Admin - Dashboard"
},
templateUrl: '/tpls/dashboard.html',
controller: 'DashboardController'
})
}
]);
$rootScope.$on('$stateChangeSuccess', function () {
$timeout(function () {
componentHandler.upgradeAllRegistered();
});
});
I found that ui-router doesn't work well with material design lite in my project, And in the source code of material, I found an Window object componentHandler which has a function upgradeAllRegistered, this function should work. So, I called it after stateChangeSuccess, and it just worked.
Add template: "<ui-view />" to your 'app' state's config object
https://github.com/angular-ui/ui-router/wiki/Nested-States-&-Nested-Views#abstract-states
Remember: Abstract states still need their own <ui-view/> for their children to plug into. So if you are using an abstract state just to prepend a url, set resolves/data, or run an onEnter/Exit function, then you'll additionally need to set template: "<ui-view/>".

$urlStateProvider undefined error

I have included my dependencies for using Angular UI router but when I run my application I keep receiving an error stating: $urlRouteProvider is not defined. It seems to not be recognizing UI router and is immediately forward to the .otherwise instead of activating the initial login state.
Here is my code:
app.js --
var app = angular.module("demoApp", ["ngVidBg", "ngAnimate","ui.router"]);
app.config(['$stateProvider', '$urlRouterProvider', function($stateProvider,$urlRouterProvider) {
$stateProvider
.state('login', {
url: '/login',
templateUrl: 'views/login.html',
controller: 'LoginCtrl'
})
.state('signup', {
url: '/signup',
templateUrl: 'views/signup.html',
controller: 'SignUpCtrl'
})
.state('form', {
url: '/form',
templateUrl: 'views/form.html',
resolve: {
logincheck: checkLoggedin
}
})
$urlRouteProvider.otherwise('/views/login');
}]);
index.html--
<!DOCTYPE html>
<html lang="en" ng-app="demoApp">
<head>
<meta charset="UTF-8">
<title>Demo</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" type="text/css" href="css/styles.css">
<link rel="stylesheet" type="text/css" href="css/vidBg.css"
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
</head>
<body>
<nav ng-controller="NavCtrl">
<span ng-show="!currentUser">
</span>
</nav>
<div ng-view>
</div>
<!-- jQuery -->
<script src="https://code.jquery.com/jquery-2.1.4.min.js" type="text/javascript"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<!-- Angular -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.18/angular-ui-router.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.5/angular-animate.js"></script>
<script src="./js/app.js" type="text/javascript"></script>
<script src="./js/controllers.js" type="text/javascript"></script>
<script src="./js/vidBg.js" type="text/javascript"></script>
</body>
</html>
Its typo at the $urlRouteProvider.otherwise line, it should be
$urlRouterProvider
instead of
$urlRouteProvider
$urlRouterProvider Doc

Angular UI nested State template is not loading

Index.html
<!doctype html>
<html ng-app="testApp">
<head>
<meta name="viewport" content="width=device-width">
<link rel="Shortcut Icon" type="image/ico" href="img/favicon.png">
<link rel="stylesheet" href="styles/vendor.css">
<link rel="stylesheet" href="styles/app.css">
</head>
<body id="wrap">
<div ui-view></div>
<script src="js/vendor.js"></script>
<script src="js/app.js"></script>
</body>
</html>
app.js
"use strict";
var TestApp = angular.module("testApp",["ui.router"])
.config(["$urlRouterProvider","$stateProvider",function(a,b) {
a.otherwise("test", {
url: "/test",
title: "Test",
template:"<p>Test</p>"
})
}]);
Here is My directory Structure
testApp
JS --> app.js
index.html
Please Correct My Code
The UI-Router is about states. So we have to call $stateProvider.state() to define state(s). The $urlRouterProvider method .otherwise() should server for default navigation - if url does not match to registered state:
.config(["$urlRouterProvider","$stateProvider"
,function($urlRouterProvider,$stateProvider) {
// instead of this
a.otherwise("test", {
// we need to call .state
$stateProvider.state("test", {
url: "/test",
title: "Test",
template:"<p>Test</p>"
})
// and also some defaults
// but not state name 'test', it should be url '/test'
$urlRouterProvider.otherwise("/test")

Angular + ui.router - ui-view inside ui-view parenting issue

I have the following scenario:
Mobile application written in Angular.
Login page that has not special layout - simple page.
home page that have a special layout including header and footer.
internal pages that also include header and footer.
So i want to be able to use two layouts 1- blank 2- with header and footer.
on my index.html page i added:
<div ui-view class="app-content"></div>
This is how my state provider looks like:
.state('layout', {
templateUrl: 'partials/mobile/layout.html',
reloadOnSearch: false
})
.state('homepage', {
url: "/",
templateUrl: 'partials/mobile/home.html',
parent: 'layout',
})
.state('internal-page', {
url: "/internal/:id",
templateUrl: 'partials/mobile/internal.html',
parent: 'layout',
controller:'InternalController',
})
.state('login', {
url: "/login",
templateUrl: 'partials/mobile/login.html',
controller: 'MobileLoginController',
})
in layout.html i have used the same ui-view again:
<!-- App Body -->
<div class="app-body" ng-class="{loading: loading}">
<div class="app-content">
<div ui-view></div>
</div>
</div>
The result is duplicate views, i get the same view twice when i'm using layouts.
The question:
Can someone explain what am i doing wrong, and how can i nested the ui-view one inside another without duplicate the page?
My index.html complete page:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<base href="" />
<title></title>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="viewport" content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimal-ui" />
<meta name="apple-mobile-web-app-status-bar-style" content="yes" />
<link rel="stylesheet" href="bower_components/mobile-angular-ui/dist/css/mobile-angular-ui-hover.css" />
<link rel="stylesheet" href="bower_components/mobile-angular-ui/dist/css/mobile-angular-ui-base.css" />
<link rel="stylesheet" href="bower_components/mobile-angular-ui/dist/css/mobile-angular-ui-desktop.css" />
<link rel="stylesheet" href="css/mobile/layout.css"/>
<script src="bower_components/angular1.3/angular.js"></script>
<script src="bower_components/angular1.3/angular-route.js"></script>
<script src="bower_components/angular-touch/angular-touch.min.js"></script>
<script src="bower_components/mobile-angular-ui/dist/js/mobile-angular-ui.js"></script>
<script src="bower_components/mobile-angular-ui/dist/js/mobile-angular-ui.gestures.js"></script>
<script src="bower_components/mobile-angular-ui/dist/js/mobile-angular-ui.migrate.js"></script>
<script src="bower_components/angular-ui-router/release/angular-ui-router.min.js"></script>
<script src="bower_components/angular-cookies/angular-cookies.min.js"></script>
<script src="bower_components/angular-bootstrap/ui-bootstrap.min.js"></script>
<script src="bower_components/angular-bootstrap/ui-bootstrap-tpls.min.js"></script>
<script src="bower_components/jquery/dist/jquery.min.js"></script>
<script src="bower_components/angular-websocket/angular-websocket.js"></script>
<script src="js/common/app.js"></script>
<script src="js/mobile/app.js"></script>
<script src="js/common/services.js"></script>
<script src="js/common/controllers.js"></script>
<script src="js/common/filters.js"></script>
<script src="js/mobile/controllers.js"></script>
<script src="js/mobile/directives.js"></script>
<script src="js/mobile/services.js"></script>
</head>
<body ng-app="myApp" ng-controller="ApplicationController" ng-swipe-right="swipe('right')" ng-swipe-left="swipe('left')">
<div data-ng-show="loading" class="app-content-loading">
<div class="spinner-background">
<div class="loader-image"></div>
</div>
</div>
<div ui-view class="app-content"></div>
<div ui-yield-to="modals"></div>
</body>
</html>
My app.js page:
angular.module('myApp', [
'myApp.common',
'ngRoute',
'ngTouch',
'ui.router',
'ui.bootstrap',
'mobile-angular-ui',
'ngCookies',
'myApp.filters',
'myApp.services',
'myApp.services.mobile',
'myApp.directives',
'myApp.controllers',
'myApp.controllers.mobile',
'mobile-angular-ui.gestures',
'mobile-angular-ui.migrate',
'angular-websocket'
])
I created working plunker - BUT 1 : 1 with your question snippet. Based on that code you've shown, I must say:
All your (shown) code is correct and working. The issue is elsewhere...
It could be some lost ui-view elsewhere
<div class="app-body" ng-class="{loading: loading}">
<div class="app-content">
<div ui-view></div>
</div>
// suspected to me is lost child ... with the ui-view attribute
<div ui-view></div> // doubled target declaration
</div>
Check that your code is working here

Resources