In my index.html I'm calling scripts ui-bootstrap-tpls.min.js version 0.14.3 and below, angular-ui-router.min.js version 0.2.15.
<!DOCTYPE html>
<html lang="pt-BR" ng-app="main">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<link rel="icon" href="./favicon.ico">
<link type="text/css" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.9/angular.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.14.3/ui-bootstrap-tpls.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.15/angular-ui-router.min.js"></script>
<script type="text/javascript" src="./js/angular/main.js"></script>
<script type="text/javascript" src="./js/angular/controllers/carousels.js"></script>
</head>
<body ui-view="outside"></body>
</html>
And in the script main.js I call the directives ui.bootstrap and ui.router.
var app = angular.module("main", [
"ui.bootstrap",
"ui.router"
]);
And that's my route:
app.config(function($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise("/home");
$urlRouterProvider.when("/", "/home");
$stateProvider.state("site", {
url: "/",
views: {
"outside#": {
templateUrl: "./pages/site/index/read.html"
}
}
}).state("home", {
parent: "site",
url: "home",
views: {
"inside#site": {
templateUrl: "./pages/site/home/read.html"
}
}
});
});
But when I go on any page to make call from any element of the UI Bootstrap, whether tooltips or carousel, returns me an error saying it can not load the template.
This started after I started using the UI Router.
Does anyone know how to solve this problem?
-- Edited --
I could finally figure out what is causing the problem.
In the script main.js I clean the cache of templates using the following code:
app.run(function($rootScope, $templateCache) {
$rootScope.$on("$stateChangeStart", function() {
$templateCache.removeAll();
});
});
And that is exactly what is causing all my problem.
But how can I clear the cache of templates in UI Router without the UI Bootstrap stop working?
Related
I have an angular application where i have a app.run.js and app.controllers.js
Previously i was using one main.js , app was working fine but now when
i have separated the controllers and run.js
i am getting no module available error.
Error: $injector:modulerr
Module Error
What am i doing wrong here ?
Please see the fiddle for the code
<!DOCTYPE html>
<html lang="en">
<head>
<title>Starfleet</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<link rel="icon" href="http://webstandards.delhivery.com/favicon.ico">
<link rel="stylesheet" href="https://webstandards.delhivery.com/2.1.0/libs/ws/delhivery.css">
<link rel="stylesheet" href="styles/style.css">
</head>
<body ng-app="starfleet-app" ng-controller="pageController as vm">
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular-route.min.js"></script>
<script src="https://webstandards.delhivery.com/2.1.0/libs/ws/delhivery.js"></script>
<script src="scripts/app.run.js"></script>
<script src="scripts/controllers/app.page.controller.js"></script>
</body>
</html>
This is my app.run.js
angular.module('starfleetApp',['dlv-ng','ngRoute']);
angular.module('starfleetApp').config(function($routeProvider) {
debugger;
$routeProvider
.when('/', {
templateUrl: './../partials/tracking.html'
})
.when('/create', {
templateUrl: './../partials/createOrder.html'
})
.when('/singleUpload', {
templateUrl: './../partials/singleUpload.html'
})
.otherwise({
redirectTo: '/'
});
});
This is my app.page.controller.js
angular.module("starfleetApp").controller('pageController', function($scope, $uibModal, $log, $document, $rootScope) {
});
<!-- begin snippet: js hide: false console: true babel: false -->
Have you tried to change your angular.module("starfleetApp") to angular.module("starfleet-app")?
according to your html and JS, you are using wrong module name. this might fix your error.
EDIT
working code
http://jsbin.com/komodukipe/edit?html,output
I am trying to write a simple angular application that uses angular ui-router to display components in my application.
I can get it to work using templates and controllers, but when I refactor to components they don't render on the screen. I don't get any console errors either.
Here is my app, it is based on the angular sample application Hello Solarsytem
app.js
var myApp = angular.module('materialThings', ['ui.router']);
myApp.config(function ($stateProvider) {
// An array of state definitions
var states = [
{
name: 'about',
url: '/about',
component: 'about'
}
]
// Loop over the state definitions and register them
states.forEach(function (state) {
$stateProvider.state(state);
});
});
myApp.run(function($rootScope) {
$rootScope.$on("$stateChangeError", console.log.bind(console));
});
index.html
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>My AngularJS App</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="bower_components/html5-boilerplate/dist/css/normalize.css">
<link rel="stylesheet" href="bower_components/html5-boilerplate/dist/css/main.css">
<link rel="stylesheet" href="app.css">
<script src="bower_components/html5-boilerplate/dist/js/vendor/modernizr-2.8.3.min.js"></script>
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-ui-router/release/angular-ui-router.js"></script>
<script src="app.js"></script>
<script src="about.js"></script>
</head>
<body ng-app="materialThings">
<a ui-sref="about" ui-sref-active="active">About</a>
<ui-view></ui-view>
<!-- In production use:
<script src="//ajax.googleapis.com/ajax/libs/angularjs/x.x.x/angular.min.js"></script>
-->
</body>
about.js
angular.module('materialThings').component('about', {
template: '<h3>Its the UI-Router<br>Hello Solar System app!</h3>'
})
Refer to this question:
Angular - UI.Router not loading component
If you are using 0.3.x that won't work. Upgrade to 1.0.0 (I think beta is the latest) and try please.
component attribute is available from ui-router#1.0.0(see here and in CHANGELOG.MD - it was added in 1.0.0-aplpha) so it's not available 0.3.1
Also refer to my answer for a similar post - https://stackoverflow.com/questions/40089948/angular-ui-router-works-with-template-but-not-component
try to change your states variable to this:
var states = [
{
name: 'about',
url: '/about',
template: '<about></about>'
}
]
Unfortunately ui-router guide to components doesn't seem explain in this way, I'll keep looking more to tell you why.
I am trying to display the response in my view.....I am getting data in my controller but the data is not showing in view
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title></title>
<link rel="manifest" href="manifest.json">
<link href="lib/ionic/css/ionic.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<!-- ionic/angularjs js -->
<script src="lib/ionic/js/ionic.bundle.js"></script>
<script src="lib/ngGeolocation/ngGeolocation.min.js"/>
<!-- cordova script (this will be a 404 during development) -->
<script src="cordova.js"></script>
<!-- your app's js -->
<script src="js/app.js"></script>
<script src="js/controller.js"></script>
</head>
<body ng-app="starter">
<ion-nav-view ></ion-nav-view>
</body>
</html>
app.js
angular.module('starter', ['ionic','starter.controllers','ui.router'])
.run(function($ionicPlatform) {
$ionicPlatform.ready(function() {
if(window.cordova && window.cordova.plugins.Keyboard) {
cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
cordova.plugins.Keyboard.disableScroll(true);
}
if(window.StatusBar) {
StatusBar.styleDefault();
}
});
})
.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('Login', {
cache: false,
url: '/Login',
views: {
'': {
templateUrl: 'Templates/Login.html',
controller: 'loginCtrl',
}
}
})
$urlRouterProvider.otherwise('/Login');
});
my controller
var app=angular.module('starter.controllers',['ngGeolocation']);
app.controller('loginCtrl',function($geolocation, $scope){
$scope.test="test string";
$geolocation.getCurrentPosition({
}).then(function(position) {
$scope.myPosition = position;
console.log($scope.myPosition);
});
})
in the console i am able to see the data
Login.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div class="main">
<pre>{{test}}</pre>{{best}}
{{myPosition.latitude}}
</div>
</body>
</html>
I can only see first pre tag data, the second is always '{}'
I tried to create a plunker but its giving a warning for $geolocation and that function is escaping from execution.. Any help will be appreciated...tq
Your $scope.myPosition is a Geoposition object. That object contains a coords object that contains the values for latitude and longitude (among others). Change your view like so:
{{myPosition.coords.latitude}}
Hope this helps.
I just tried on the jfiddle. Write this to see the latitude:
`<pre>{{myPosition.coords.latitude}}</pre>`
and make sure location settings is ENABLED in your computer and it will show the correct value.
I spent a bit of time generating a https://jsfiddle.net/jktkq8tL/6/. Most notably adding an error function,
$geolocation.getCurrentPosition({
}).then(function(position) {
$scope.myPosition = position;
console.log($scope.myPosition);
},function(data) {
console.log(data.error.message);
});
which highlighted an error:
Network location provider at 'https://www.googleapis.com/' : No
response received.
Once I had received this error, I performed a search and found this SO answer. Which states:
I simulated this problem and found that the success callback functions
were only called when the html page was hosted on a web server and not
when opened from a filesystem.
So this is worth investigating.
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/>".
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")