Angular UI nested State template is not loading - angularjs

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")

Related

Consistently Getting Error: $injector:nomod Module Unavailable When I Load My App

I think it has something to do with the way my files are ordered but I can't figure out which ones are causing the problem.
angular.module('app')
.controller('langCtrl', function($scope, languageService){
$scope.submit = function(model) {
console.log(model);
languageService.analyzeDocument(model)
}
});
<html lang="en" ng-app="app" class="no-js"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>WIT</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="images/computer.ico"/>
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="app.css">
</head>
<body ng-controller="langCtrl">
<div class="header">
RecommendHER
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular.min.js"></script>
<script src="app.js"></script>
<script src="languageService.js"></script>
<script src="langCtrl.js"></script>
</body>
</html>
I put the index.html file and my controller in the snippet. I also have a service on the save level as app.js and the controller file. Here is the code:
angular.module('app')
.service('languageService', function($resource) {
var apiUrl = 'http://xxx.compute-1.amazonaws.com';
var languageResource = $resource(apiUrl + {}, {
analyzeDocument: {
method: 'POST',
url: apiUrl + '/analyze_document?file=:text'
},
analyzeWord: {
method: 'POST',
url: apiUrl + '/recommend?word=":word"'
}
});
return {
analyzeDocument: function(data) {
return languageResource.analyzeDocument({data:text}).$promise;
},
analyzeWord: function(data) {
return languageResource.analyzeWord({data:word}).$promise;
}
};
});
Here is my app.js file:
angular.module('app', [
]);
You need to add empty dependencies to your module,
angular.module('app',[])
EDIT
Change the order in index.html to make your module load first,
<script src="app.js"></script>
<script src="languageService.js"></script>
<script src="langCtrl.js"></script>
Have you defined the 'app' module with two parameters yet:
angular.module('app', []).run(function() {});
The one parameter version expects app to already exist in order for things to be included as part of the module.
Also, ensure that the app.js file is loaded first.

Angular JS 1 routing 404 issue

I have a basic single page application in Angular Js. I have applied routing and set 'Html5Mode' to true.
My URL's have been cleaned up, but they now result in a 404 when trying to access the URL.
Now this is a front end web application so I do not have any config on IIS I can set up rewrite rules with.
Can anyone point me in the right direction to set up the URL's to prevent 404 error.
Below is my routing:
(function () {
"use strict";
angular.
module("app", [
"ngRoute",
"app.home",
"app.products",
"app.contact"
])
.config(function ($routeProvider, $locationProvider) {
$routeProvider
.when("/",
{
controller: "HomeController",
templateUrl: "app/components/home/home.html"
})
.when("/products",
{
controller: "ProductsController",
templateUrl: "app/components/products/products.html"
})
.when("/contact",
{
controller: "ContactController",
templateUrl: "app/components/contact/contact.html"
})
.otherwise("",
{
controller: "HomeController",
templateUrl: "app/components/home/home.html"
});
$locationProvider.html5Mode(true);
});
})();
Index.html:
<!DOCTYPE html>
<html ng-app="app" lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Newtown Gates & Welding</title>
<link href="assets/css/site.css" rel="stylesheet" />
<link href="app/components/home/home.css" rel="stylesheet" />
<link href="app/components/contact/css.css" rel="stylesheet" />
<link href="app/components/products/products.css" rel="stylesheet" />
<link href="Content/bootstrap.css" rel="stylesheet" />
<link href="Content/bootstrap-theme.css" rel="stylesheet" />
<script src="assets/libs/angularjs/1.6.1/angular.js"></script>
<script src="assets/libs/angularjs/1.6.1/angular-route.js"></script>
<script src="app/app.js"></script>
<script src="app/components/home/homeController.js"></script>
<script src="app/components/products/productsController.js"></script>
<script src="app/components/contact/contactController.js"></script>
<script src="Scripts/jquery-1.9.1.js"></script>
<script src="Scripts/bootstrap.min.js"></script>
<base href="/"/> <!--Required when using location provider-->
<div>
Navbar here
<li>
home
contact
products
</li>
</div>
<div class="container-fluid">
<div class="row" style="border: 1px solid black;">
HELLO
</div>
<div ng-view></div>
</div>
</body>
</html>
Please add <base href="/" /> to your <head>
Please look here:
link
EDIT
you need to set the current folder in my case is

AngularJS : ui-router components not showing

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.

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/>".

Failed to load template with UI-Router

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?

Resources