My code is as shown below:
index.html
<!DOCTYPE html>
<html>
<head>
<title>quflip</title>
<link rel="stylesheet" href="css/app.css">
<link rel="stylesheet" href="css/login.css">
</head>
<body ng-app="quflipMobWeb">
<ng-view></ng-view>
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-route/angular-route.js"></script>
<script src="js/services.js"></script>
<script src="js/controller/loginController.js"></script>
<script src="js/controller/homeController.js"></script>
<script src="js/app.js"></script>
<script src="js/controller/driverController.js"></script>
<script src="js/controller/driversController.js"></script>
<script>
function openNav() {
document.getElementById("mySidenav").style.width = "250px";
}
function closeNav() {
document.getElementById("mySidenav").style.width = "0";
}
</script>
</body>
</html>
home.html
<div>
<div id="mySidenav" class="sidenav">
×
About
Services
Clients
Contact
</div>
<span style="font-size:30px;cursor:pointer" onclick="openNav()">☰ open</span>
</div>
homeController.js
angular.module('quflipMobWeb.homeController', []).
controller('homeController', function($scope) {
// console.log("home called");
});
app.js
angular.module('quflipMobWeb', [
'quflipMobWeb.services',
'quflipMobWeb.controllers',
'quflipMobWeb.login',
'quflipMobWeb.homeController',
'ngRoute'
]).
config(['$routeProvider', function($routeProvider) {
$routeProvider.
when("/home", { templateUrl: "template/home.html", controller: "homeController" }).
when("/login", { templateUrl: "template/login.html", controller: "loginController" }).
otherwise({ redirectTo: '/login' });
}]);
For detailed code, I have given my repository url here:
https://github.com/mrugesh008/testRepo.git
This is the website which I am following for achieving the effect
https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_sidenav
Your code almost works well. you can just add ng-style:
app.controller('homeController', function($scope) {
console.log("home called");
$scope.myStyle = {
width: '0px'
};
$scope.openNav = function() {
$scope.myStyle.width = '250px';
}
$scope.closeNav = function() {
$scope.myStyle.width = '0px';
}
});
Home.html
<div>
<div id="mySidenav" class="sidenav" ng-style="myStyle">
×
About
Services
Clients
Contact
</div>
<span style="font-size:30px;cursor:pointer" ng-click="openNav()">☰ open</span>
</div>
Demo Plunker
Related
I want to translate my website/webpage in 2 languages but when I press the buttons to change the language nothing happens and this error appeared in console.
Index.html
<html ng-app='mpdmApp' lang="en">
<head>
<base href="/">
<meta charset="utf-8">
<script src="assets/js/libs/angular.min.js"></script>
<script src="assets/js/libs/angular-animate.js"></script>
<script src="assets/js/libs/angular-sanitize.js"></script>
<script src="assets/js/libs/angular-messages.min.js"></script>
<script src="assets/js/libs/angular-aria.js"></script>
<script src="assets/js/libs/angular-route.js"></script>
<script src="assets/js/libs/angular-material.min.js"></script>
<script src="app/app.js"></script>
<script src="app/app.config.js"></script>
<script src="app/seafood/seafood.module.js"></script>
<script src="app/seafood/seafood.component.js"></script>
<!--scripturi angular translate-->
<script src="https://cdn.rawgit.com/angular-translate/bower-angular-translate/2.18.1/angular-translate.js"></script>
<script src="https://cdn.rawgit.com/angular-translate/bower-angular-translate-interpolation-messageformat/2.18.1/angular-translate-interpolation-messageformat.js"></script>
<script src="https://cdn.rawgit.com/angular-translate/bower-angular-translate-storage-cookie/2.18.1/angular-translate-storage-cookie.js"></script>
<script src="https://cdn.rawgit.com/angular-translate/bower-angular-translate-storage-local/2.18.1/angular-translate-storage-local.js"></script>
<script src="https://cdn.rawgit.com/angular-translate/bower-angular-translate-loader-url/2.18.1/angular-translate-loader-url.js"></script>
<script src="https://cdn.rawgit.com/angular-translate/bower-angular-translate-loader-static-files/2.18.1/angular-translate-loader-static-files.js"></script>
<script src="https://cdn.rawgit.com/angular-translate/bower-angular-translate-handler-log/2.18.1/angular-translate-handler-log.js"></script>
<script src="app/script.js"></script>
</head>
<body class="mp_sc_0">
<mpdm-menu></mpdm-menu>
<div ng-controller="MainCtrl">
<div ng-view class="mpdmView"></div>
</div>
</body>
app.js
var translationsEN = {
seafood: 'Seafood',
grill: 'Grill',
BUTTON_LANG_DE: 'German',
BUTTON_LANG_EN: 'English'
};
var translationsDE= {
seafood: 'Preparate peste',
grill: 'Preparate la gratar',
BUTTON_LANG_DE: 'Deutsch',
BUTTON_LANG_EN: 'Englisch'
};
var mpdmApp = angular.module('mpdmApp', [
'ngRoute', 'ngAnimate', 'ngSanitize','ngMaterial', 'ngMessages', 'mpdmSeafood', 'mpdmGrill', 'mpdmMeniu', 'pascalprecht.translate'
]);
mpdmApp.config(['$translateProvider', function ($translateProvider) {
// add translation tables
$translateProvider.translations('en', translationsEN);
$translateProvider.translations('de', translationsDE);
$translateProvider.fallbackLanguage('de');
$translateProvider.preferredLanguage('en');
}]);
//----controllerul pentru traduceri
mpdmApp.controller('MainCtrl', ['$translate', '$scope', function ($translate, $scope) {
$scope.changeLanguage = function (langKey) {
$translate.use(langKey);
};
}]);
mainpage.html - In this page I put the words that I want to be translated.
I believe that because of that error in console I can't switch the languages.
<div class="btn1">
</div>
<div class="btn2>
{{'grill' | translate}}
</div>
<button ng-click="changeLanguage('de')" translate="BUTTON_LANG_DE"></button>
<button ng-click="changeLanguage('en')" translate="BUTTON_LANG_EN"></button>
app.config.js
mpdmApp.config(function($routeProvider, $locationProvider) {
$routeProvider
.when('/', {
template: '<mpdm-main-page></mpdm-main-page>'
})
.when('/seafood', {
template: '<mpdm-seafood></mpdm-seafood>'
})
.when('/contact', {
template: '<mpdm-contact></mpdm-contact>'
})
.when('/desprenoi', {
template: '<mpdm-desprenoi></mpdm-desprenoi>'
})
.when('/multumim', {
template: '<mpdm-multumim></mpdm-multumim>'
})
.when('/grill', {
template: '<mpdm-grill></mpdm-grill>'
})
.when('/meniu', {
template: '<mpdm-meniu></mpdm-meniu>'
}).
when('/notfound', {
template: '<mpdm-coming-soon></mpdm-coming-soon>'
}).
otherwise({redirectTo:'/notfound'});
$locationProvider.html5Mode(true);
});
I'm getting the following error:
Error: $injector:unpr Unknown Provider
Unknown provider: _planetsProvider <- _planets <- SearchController
.API get request is working fine and my SearchController.js is also triggered, but I'm still getting the error above. I have tried almost all suggestions from StackOverflow and official document. How can I fix it?
Here's my code: (Plunker link)
app.js
var myApp = angular.module('myApp', ['ngRoute']);
myApp.config( function($routeProvider) {
$routeProvider
.when('/', { templateUrl: '/views/home.html',
controller: 'HomeController' })
.when('/login', { templateUrl: '/views/login.html',
controller: 'LoginController' })
.when('/search', { templateUrl: '/views/search.html',
controller: 'SearchController',
resolve:{
_planets: function(myService)
{
console.log("asdas");
return myService.getRequestForPlanets();
}
}
})
});
SearchController.js
angular.module('myApp').controller('SearchController', function($scope, myService, _planets, $rootScope) {
$scope.message = 'This is Show orders screen';
$scope.planets=_planets;
console.log(_planets);
});
myService.js
angular.module('myApp').service('myService', function($http, $rootScope, $location, $q)
{
$rootScope.loading = false;
this.getRequestForPlanets=function()
{
$rootScope.loading = true;
var deferred = $q.defer();
$http.get('https://swapi.co/api/planets')
.then(function(response){
$rootScope.loading = false;
console.log(response.data.results);
deferred.resolve(response.data.results);
})
.catch(function(response){
deferred.reject(response);
});
return deferred.promise;
}
});
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="myCss.css">
</head>
<body ng-app="myApp">
<!-- ng-controller="myController" -->
<div class="spinner" ng-show="loading">
<div class="loader" ></div>
</div>
<div ng-view></div>
<section class="imgDiv">
<div class="container-fluid">
<!-- <img src="C:\Users\Public\Pictures\Sample Pictures\Desert.jpg" style="width: 100%;"> -->
<div class="sn_scroll_btn slideInDown ">
<img src="images/scroll.png" alt="" class="test">
</div>
</div>
</section>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular-route.js"></script>
<script type="text/javascript" src="app.js"></script>
<script type="text/javascript" src="controllers/LoginController.js"></script>
<script type="text/javascript" src="controllers/SearchController.js"></script>
<script type="text/javascript" src="services/myService.js"></script>
<script type="text/javascript" src="controllers/HomeController.js"></script>
</body>
</html>
Based on the plnkr link you provided: https://plnkr.co/edit/WRh3z5HTGby6nT1G8ovi?p=preview
Your controller is being instantiated twice, once in your routes, in app.js here:
.when('/search', { templateUrl: '/views/search.html',
controller: 'SearchController',
...
and again in your view in search.html here:
<div ng-controller="SearchController">
<p>{{message}}</p>
...
Since the SearchController has already been injected into the app by your routes, the second time it's instantiated in the view, it throws the Unknown Provider error.
If you remove ng-controller="SearchController" from search.html it should fix the issue that you're having.
Hope that helps!
I am trying to learn AngularJS, I have View1 which uses simpleController, but AngularJS (1.6) is throwing an error and I can't find the right syntax to make it work.
My Repository is: https://github.com/tommcclean/Learning_Angular.
Error: ng:areq. Bad Argument. Argument 'simpleController' is not a
function, got undefined
View1 contains...
<div ng-controller="simpleController as ctrl">
<h2>View One</h2>
<p>{{ ctrl.testValue }}</p>
</div>
simpleController contains...
"use strict";
(function () {
angular.module('demoApp').controller('simpleController', []);
function simpleController() {
var self = this;
self.testValue = "Test Value";
self.updateValue = function () {
self.testValue = "Test Value Updated";
};
return self;
};
});
demoApp is created by my routes.js file which is loaded first.
"use strict";
var app = angular.module('demoApp', ["ngRoute"]);
app.config(function ($routeProvider) {
$routeProvider
.when('/view1',
{
controller: 'simpleController',
templateUrl: '../views/view1.html'
})
.otherwise({ redirectTo: '/view1' });
});
My main page which is the home of my "spa" contains...
<!DOCTYPE html>
<html>
<head>
<title>Sample Demo Application</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
</head>
<body ng-app="demoApp" class="container">
<h1>Welcome to my Sample Application</h1>
View 1
<div ng-view></div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular-route.js"></script>
<script src="../app/initialise/routes.js"></script>
<script src="../app/controllers/simpleController.js"></script>
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
</body>
</html>
Check out the .controller definition should have the function not an empty array as the second argument.
"use strict";
(function () {
angular.module('demoApp').controller('simpleController', simpleController);
function simpleController() {
var self = this;
self.testValue = "Test Value";
self.updateValue = function () {
self.testValue = "Test Value Updated";
};
return self;
};
});
"use strict";
var app = angular.module('demoApp', ["ngRoute"]);
app.config(function ($routeProvider) {
$routeProvider
.when('/view1',
{
controller: 'simpleController',
controllerAs: 'ctrl',
templateUrl: '/view1.html'
})
.otherwise({ redirectTo: '/view1' });
});
(function () {
function simpleController() {
var self = this;
self.testValue = "Test Value";
self.updateValue = function () {
self.testValue = "Test Value Updated";
};
return self;
};
angular.module('demoApp').controller('simpleController', simpleController);
})();
<body ng-app="demoApp" class="container">
<h1>Welcome to my Sample Application</h1>
View 1
<div ng-view></div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular-route.js"></script>
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script type="text/ng-template" id="/view1.html">
<div>
<h2>View One</h2>
<p>{{ ctrl.testValue }}</p>
</div>
</script>
</body>
I'm new to AngularJS and I'm trying to declare a second controller to a new view in my page. I have a logincontroller and when I succeed the login I get to the Home.html.
When opening Home.html I get the following error below..It looks like it can't recognize my ModelController/ModalService..What am I missing here?
Error: [$injector:unpr] http://errors.angularjs.org/1.5.0-beta.1/$injector/unpr?p0=ModalServiceProvider%20%3C-%20ModalService%20%3C-%20ModalController
Index.html:
<!DOCTYPE html>
<html ng-app="PVM">
<head>
<title>My Ang</title>
<link href="Content/bootstrap.min.css" rel="stylesheet" />
<link href="Content/bootstrap-theme.min.css" rel="stylesheet" />
<link href="Content/MyCss.css" rel="stylesheet" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
</head>
<body>
<div>
<div ng-view></div>
</div>
<script src="//code.jquery.com/jquery-2.0.3.min.js"></script>
<script src="Scripts/bootstrap.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0-beta.1/angular.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0-beta.1/angular-route.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0-beta.1/angular-cookies.min.js"></script>
<script src="Scripts/Services/ModalService.js"></script>
<script src="Scripts/Services/AuthenticationService.js"></script>
<script src="Scripts/Controller/LoginController.js"></script>
<script src="Scripts/Controller/ModalController.js"></script>
<script src="Scripts/MyApp.js"></script>
</body>
</html>
Home.html:
<div class="container" ng-controller="ModalController">
<div class="col-xs-2">
<button class="btn btn-group-justified" ng-init="testfunc()">press me</button>
</div>
</div>
MyApp.js:
angular.module('MyApp', [
'Authentication',
'Modal',
'ngRoute',
'ngCookies'
])
.config([
'$routeProvider', function($routeProvider) {
$routeProvider
.when('/Login', {
controller: 'LoginController',
templateUrl: 'Login.html'
})
.when('/Home', {
controller: 'ModalController',
templateUrl: 'Home.html'
})
.otherwise({
redirectTo: '/Login'
});
}
]);
ModalController.js:
angular.module('Modal')
.controller('ModalController',
['$scope', 'ModalService',
function ($scope, ModalService) {
$scope.testfunc = function() {
alert('weeee');
}
}]);
ModalService.js:
angular.module('Modal', []);
angular.module('Modal')
.factory('ModalService'
['$http',
function ($http) {
var service = {};
return service;
}
]);
You need to include app.js after including services and controllers. And controllers after services.
it should be like this:
<script src="Scripts/Services/ModalService.js"></script> <!--ModalService is being defined here -->
<script src="Scripts/Services/AuthenticationService.js"></script>
<script src="Scripts/Controller/LoginController.js"></script>
<script src="Scripts/Controller/ModalController.js"></script> <!-- ModalService is being injected here -->
<script src="Scripts/MyApp.js"></script> <!-- All of the things are set in place here -->
In fact, the best practice is to include all of them in the bottom of your <body>.
I found the answer..The problem was that I was missing a comma :(
ModalService.js should look like this:
angular.module('Modal', []);
angular.module('Modal')
.factory('ModalService', <------ COMMA MISSING :(
['$http',
function ($http) {
var service = {};
return service;
}
]);
in Index.html i defined:
<html xmlns="http://www.w3.org/1999/xhtml" ng-app="bwp">
<head>
<title></title>
<script src="Scripts/angular.min.js"></script>
<script src="Scripts/angular-route.min.js"></script>
<script src="js/app.js"></script>
<script src="app/landingController.js"></script>
</head>
<body>
<div ng-view></div>
</body>
</html>
In app.js i defined:
var app = angular.module("bwp", ["ngRoute"]);
app.config(function ($routeProvider) {
$routeProvider.when(
'/main', {
templateUrl: 'app/test.html',
controller: 'testController'
})
.otherwise({ redirectTo: '/main' });
});
Here is the complete testController.js:
(function() {
var app = angular.module("bwp");
var landingController = function ($scope, $http) {
$scope.test = "this is a test";
};
app.controller("landingController", landingController);
}());
In test view I defined:
<h1 ng-controller="landingController">
{{test}}
</h1>
When i render the page i get (through inspect element):
<h1 ng-controller="landingController" class="ng-scope ng-binding">
{{test}}
</h1>
Note that it identifies the controller and the scope.
SO...Angular injects the view but doesn't bind $scope.test as expected. What am I doing wrong?