I'm just starting with angular.js and I watched some older tuts. where ng-route was not a dependency, so I have changed my code and added <script src="js/vendor/angular-route.js"></script> in html, but I'm getting the same error Unknown provider: $templateRequestProvider <- $templateRequest <- $route <- ngViewDirective
HTML:
<!doctype html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>test</title>
<link rel="stylesheet" href="css/foundation.css" />
<link rel="stylesheet" href="css/main.css" />
<script src="js/vendor/modernizr.js"></script>
<script src="js/vendor/angular.js"></script>
<script src="js/vendor/angular-route.js"></script>
<script src="js/vendor/main.js"></script>
</head>
<body>
<div ng-app="app">
<ng-view></ng-view>
</div>
</body>
</html>
JS:
var app = angular.module("app", ['ngRoute']);
app.config(['$routeProvider', function($routeProvider){
$routeProvider.when("/",{
templateUrl: "templates/home.html",
controller: "AppCtrl"
}
);
}]);
app.controller("AppCtrl", function($scope){
$scope.model = {
message: "This is my app!!!"
}
});
home.html:
<h1>{{model.message}}</h1>
I met the issue when using angular-route 1.3.14 and angular 1.2.14 , You need to upgrade angular to version required by angular-route . Here the bower of angular-route 1.3.14 , it require angular 1.3.14.
{
"name": "angular-route",
"version": "1.3.14",
"main": "./angular-route.js",
"ignore": [],
"dependencies": {
"angular": "1.3.14"
},
"homepage": "https://github.com/angular/bower-angular-route",
"_release": "1.3.14",
"_resolution": {
"type": "version",
"tag": "v1.3.14",
"commit": "a405245afdb0f1eac5aad4d8ddc555ed557b3345"
},
"_source": "git://github.com/angular/bower-angular-route.git",
"_target": "1.3.14",
"_originalSource": "angular-route"
}
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 making a small application in angular to study, but the directive and the view are not being rendered, I already investigated my code, but I did not find anything, code can be seen below:
Index.html
<!DOCTYPE html>
<html lang="pt-br" ng-app="rdi_music">
<head>
<base href="/">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Carregando CSS -->
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/bootstrap-overloads.css">
<!--Carregando os scripts-->
<!-- App core -->
<script src="js/core/angular.min.js"></script>
<script src="js/core/angular-animate.min.js"></script>
<script src="js/core/angular-sanitize.min.js"></script>
<script src="js/core/angular-route.min.js"></script>
<script src="js/core/angular-resource.min.js"></script>
<script src="js/ui/ui-bootstrap-tpls-2.5.0.min.js"></script>
<!-- My Modules -->
<script src="js/main.js"></script>
<script src="js/controllers/index-controller.js"></script>
<script src="js/controllers/musicas-controller.js"></script>
<!-- My Directives -->
<script src="js/directives/header.js"></script>
<title>Music</title>
</head>
<body>
<header-menu></header-menu>
<div class="container">
<ng-view></ng-view>
</div>
</body>
</html>
main.js
angular.module('rdi_music', ['ngRoute', 'ngResource', 'musicasController',
'header'])
.config(function($routeProvider, $locationProvider){
$locationProvider.html5Mode(true);
$routeProvider.when('/musicas',{
templateUrl: 'views/musicas/index.html',
controller: 'musicasController'
});
});
index-controller.js
angular.module('rdi_music', ['ngAnimate', 'ngSanitize', 'ui.bootstrap'])
.controller('indexController',function($scope){
$scope.isNavCollapsed = true;
$scope.isCollapsed = true;
$scope.isCollapsedHorizontal = true;
});
musicas-controller.js
angular.module('rdi_music', ['ui.bootstrap'])
.controller('musicasController', function($scope){
});
header.js
angular.module('header', ['ui.bootstrap'])
.directive('headerMenu', function(){
var ddo = {
restrict: "AE",
templateUrl: "views/directives/header.html"
};
return ddo;
});
once the module injected to the angular.module no need to inject them again. Just get the reference only.
remove the 'musicasController' from the module injector. Controllers don't need to inject to the modules
angular.module('rdi_music', ['ngRoute', 'ngResource',
'header'])
.config(function($routeProvider, $locationProvider){
$locationProvider.html5Mode(true);
$routeProvider.when('/musicas',{
templateUrl: 'views/musicas/index.html',
controller: 'musicasController'
});
});
index-controller.js
angular.module('rdi_music')
.controller('indexController',function($scope){
$scope.isNavCollapsed = true;
$scope.isCollapsed = true;
$scope.isCollapsedHorizontal = true;
});
musicas-controller.js
angular.module('rdi_music')
.controller('musicasController', function($scope){
});
Demo
I'm trying to use the Angular JS range slider with my ionic app but it displays as below:
range slider error
I've installed npm angularjs-slider but there is an error in the console - Uncaught ReferenceError: app is not defined. Can anyone help. app.js Code below followed by index.html code. Thanks
angular.module('ionicApp', ['ionic', 'ngAutocomplete', 'rzModule', 'ui.bootstrap'])
.controller("MainCtrl", function() {
console.log("Main Controller says: Hello World");
})
.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('main', {
url: "/main",
templateUrl: "templates/main.html",
controller: 'MainCtrl'
})
.state('page', {
url: "/page",
templateUrl: "templates/page.html",
})
// if none of the above states are matched, use this as the fallback
$urlRouterProvider.otherwise('/main');
});
app.controller('MainCtrl', function($scope, $rootScope, $timeout, $modal) {
//Range slider config
$scope.minRangeSlider = {
minValue: 10,
maxValue: 90,
options: {
floor: 0,
ceil: 100,
step: 1
}
};
});
<!DOCTYPE html>
<html ng-app="ionicApp">
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title></title>
<link href="lib/ionic/css/ionic.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="css/rzslider.css">
<!-- ionic/angularjs js -->
<script src="lib/ionic/js/ionic.bundle.js"></script>
<!-- cordova script -->
<script src="cordova.js"></script>
<script src="ngautocomplete.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?libraries=places"></script>
<script src="js/ui-bootstrap-tpls.js"></script>
<script src="js/rzslider.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.min.js"></script>
<!-- your app's js -->
<script src="js/app.js"></script>
</head>
<body ng-app="ionicApp" ng-controller="MainCtrl" disable-tap>
<ion-nav-view></ion-nav-view>
</body>
</html>
And I link it to my page template by:
<div class="wrapper">
<article>
<rzslider rz-slider-model="rangeSlider.minValue" rz-slider-high="rangeSlider.maxValue" rz-slider-options="rangeSlider.options"></rzslider>
</article>
</div>
If you use jQuery 3.0.0, there is an incompatibility, try with jQuery 2.2.4
I open an issue on github :
https://github.com/angular-slider/angularjs-slider/issues/365
Try the new version 5.1.1, it could fix your issue.
Because you had referenced wrong scope variable, it should be minRangeSlider instead of rangeSlider
Markup
<rzslider
rz-slider-model="minRangeSlider.minValue"
rz-slider-high="minRangeSlider.maxValue"
rz-slider-options="minRangeSlider.options">
</rzslider>
Edit
Remove angular.js cdn reference as you are already loading angular files from ionic-bundle.js
y try to create a simple web with angular
Project asp.net mvc 5
i have this js
var app = angular.module("app", ["ngRoute"])
.config(function ($routeProvider, $locationProvider) {
$routeProvider.when('/', {
templateUrl: '/AngularJS/Templates/inicio.html',
controller: 'bienvenidoController'
});
$locationProvider.html5Mode(true);
});
and this:
app.controller("bienvenidoController", function ($scope) {
});
view:
Layout:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>#ViewBag.Title - My ASP.NET Application</title>
</head>
<body ng-app="app">
#RenderBody()
<!--Librerias Angular-->
<script src="~/Scripts/angular.min.js"></script>
<script src="~/Scripts/angular-route.min.js"></script>
<!---Librerias App-->
<script src="~/AngularJS/RegistrationModule.js"></script>
<script src="~/AngularJS/bienvenidoController.js"></script>
</body>
</html>
index:
<div ng-view>
</div>
and:
<h1>Hola Mundo!</h1>
error:
Error: [$location:nobase]
error see in firebug mozilla
As stated on the AngularJs documentation
If you configure $location to use html5Mode (history.pushState), you need to specify the base URL for the application with a tag or configure $locationProvider to not require a base tag by passing a definition object with requireBase:false to $locationProvider.html5Mode()
https://docs.angularjs.org/error/$location/nobase
You are missing the <base href="/"> in your document or you can disable the check by setting
$locationProvider.html5Mode({
enabled: true,
requireBase: false
});
Just add <base href="/"> in the <head> section of HTML document and that's it.
<head>
<base href="/">
...
</head>
https://docs.angularjs.org/error/$location/nobase
I'm trying to use ngInclude to load an header template which is common to all my views. Problem is I'm using RequireJS to lazy load my app.
So my code looks like:
index.html
<!doctype html>
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8" id="ng-app" ng-app=""> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9" id="ng-app" ng-app=""> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" ng-app> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body ng-app="testApp">
<header ng-include="views/common/header/header.html"></header>
<div class="container" ng-view></div>
<script src="bower_components/requirejs/require.js" data-main="scripts/bootstrap.js"></script>
</body>
</html>
bootstrap.js
require.config({
paths: {
angular: '../../bower_components/angular/angular',
angularRoute: '../../bower_components/angular-route/angular-route',
angularCookies: '../../bower_components/angular-cookies/angular-cookies',
angularMocks: '../../bower_components/angular-mocks/angular-mocks',
text: '../../bower_components/requirejs-text/text'
},
shim: {
'angular' : {'exports' : 'angular'},
'angularRoute': ['angular'],
'angularCookies': ['angular'],
'angularMocks': {
deps:['angular'],
'exports':'angular.mock'
}
},
priority: [
'angular'
]
});
//http://code.angularjs.org/1.2.1/docs/guide/bootstrap#overview_deferred-bootstrap
window.name = 'NG_DEFER_BOOTSTRAP!';
require([
'angular',
'app',
'angularRoute',
'angularCookies'
], function(angular, app, ngRoutes, ngCookies) {
'use strict';
var $html = angular.element(document.getElementsByTagName('html')[0]);
angular.element().ready(function() {
angular.resumeBootstrap([app['name']]);
});
});
app.js
/* global controllers:false */
define([
'angular',
'controllers/main',
'common/header/HeaderModule'
], function (angular, MainCtrl, HeaderModule) {
'use strict';
return angular.module('testApp', [
'testApp.controllers.MainCtrl',
'testApp.Header',
/*angJSDeps*/
'ngCookies',
'ngRoute'
])
.config(function ($routeProvider) {
$routeProvider
.when('/', {
templateUrl: 'views/main.html',
controller: 'MainCtrl'
})
.otherwise({
redirectTo: '/'
});
});
});
HeaderModule.js
define([
'angular',
'common/menu/menuItems'
], function (angular, MenuItemsController) {
'use strict';
angular.module('testApp.Header', [])
.controller('MenuItemsController', MenuItemsController);
});
menuItems.js
define(['angular'], function (angular) {
'use strict';
angular.module('testApp.menu.controllers.MenuItemsController', [])
.controller('MenuItemsController', function ($scope) {
$scope.items = [
'Menu1',
'Menu2'
];
});
});
header.html
<nav ng-controller="MenuItemsController">
<ul>
<li ng-repeat="item in items">{{ item }}</li>
</ul>
</nav>
This gives no error but also doesn't show the header view - I'm guessing due to the the template not being loaded. Any idea on what I'm missing here?
Thanks
As it turns out I just forgot to wrap the path with single quotes...
<header ng-include="'views/common/header/header.html'"></header>