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