I'm new to angular and i'm trying to convert a responsive template into angularJS, I created 2 directives for (header, footer) and view to display content of each template.
the problem exists in the home template where the slide show is in as the page loads completely but without the camera slide show.
Updated
that's the last working simplest version of my code
Here is my main page:
<head>
<!--CSS-->
<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/responsive.css">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/camera.css">
<!--JS-->
<script src="js/jquery.js"></script>
<script src="js/jquery-migrate-1.1.1.js"></script>
<script src="js/superfish.js"></script>
<script src="js/jquery.mobilemenu.js"></script>
<script src="js/jquery.easing.1.3.js"></script>
<script src="js/camera.js"></script>
<script src="js/jquery.ui.totop.js"></script>
<script type="text/javascript" src="js/jquery.mobile.customized.min.js"> </script>
</head>
<body ng-controller="MainController">
<!--header-->
<header-dir></header-dir>
<!-- content -->
<div ng-view></div>
<!-- footer -->
<footer-dir></footer-dir>
<!-- scripts -->
<script type="text/javascript" src="js/bootstrap.js"></script>
<!-- SPELLS -->
<script src="js/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-route.js"></script>
<script src="app.config.js"></script>
<script src="Controllers/MainController.controller.js"></script>
</body>
app.config.js file
var app = angular.module("levariApp", ['ngRoute']);
app.config(function($routeProvider) {
$routeProvider
.when('/', {
templateUrl: 'Views/home.template.html',
controller: 'MainController'
});
});
and MainController.controller.js file
angular.module("levariApp")
.controller('MainController', function($scope){
})
.directive("headerDir", function(){
return {
templateUrl: 'Views/header.template.html'
};
}).directive("footerDir", function(){
return {
templateUrl: 'Views/footer.template.html'
};
});
I really don't know what i'm missing, hope you guys can help
Related
I'm getting the next error message when i click on an href:
Unexpected condition on http://127.0.0.1:8887/#/home: Could not find value for language
I'm using ngRoute. This is my index:
<!DOCTYPE html>
<html lang="en" ng-app="pagoApp">
<meta charset="UTF-8">
<title>Paga-Facturas</title>
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet" />
<link type="text/css" href="app/componentes/css/paga-stilos.css" rel="stylesheet" />
<link type="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.7.1/css/bootstrap-datepicker3.standalone.min.css" rel="stylesheet"/>
<head>
<base href="/">
</head>
<body>
<ul>
<li>Home</li>
<li>List</li>
</ul>
<div ng-view></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>
<script src="bootstrap/js/bootstrap-popover.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.7.1/js/bootstrap-datepicker.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.7.1/js/bootstrap-datepicker.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.5/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.5/angular-resource.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.5/angular-route.min.js"></script>
<script src="app/xml2json.js"></script>
<script src="app/pagapp.js"></script>
<script src="app/componentes/listado-componente/pago-components.js"></script>
<script src="app/componentes/listado-componente/home-component/home-component.js"></script>
<!--<script src="app/componentes/autorizar-componente/autorizar.js"></script>-->
<script src="app/factory/pago-factories.js"></script>
<script src="app/routes/routes.js">
</body>
</html>
And my routes file:
(function(){
'use strict';
angular
.module('pagoApp')
.config(config);
config.$inject = ["$routeProvider", "$locationProvider"];
function config($routeProvider, $locationProvider){
$routeProvider
.when('/home',{
template: '<home></home>',
controller: 'homeCtrl',
})
.when('/list',{
template: '<paga-facturas></paga-facturas>',
controller: 'payCtrl'
})
.otherwise({
redirectTo: '/home',
});
$locationProvider.html5Mode(false);
}
})();
When i click on Home or List, shows the metioned message, and redirect me to my Index of current directory. Anyone knows why i'm getting this error message?
I am new to Angular. I am trying to run the app on the server and I am getting this as an error.
Uncaught Error: [$injector:modulerr] Failed to instantiate module starter due to:
TypeError: $stateProvider.state is not a function
My app.js is
angular.module('starter', ['ngRoute','ui.router', 'ngAnimate','controllers', 'services'])
.config(['$urlRouterProvider', '$stateProvider', function ($stateProvider, $urlRouterProvider) {
$stateProvider
.state('college', {
url: '/college',
templateUrl: 'html/colleges.html',
controller: 'collegeCtrl'
})
$urlRouterProvider.otherwise('/college');
}]);
My index.html page goes like the following
<!DOCTYPE html>
<html>
<head>
<!--Import Google Icon Font-->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!--Import materialize.css-->
<link type="text/css" rel="stylesheet" href="materialize/css/materialize.min.css" media="screen,projection" />
<link type="text/css" rel="stylesheet" href="css/style.css" />
<link type="text/css" rel="stylesheet" href="bootstrap/css/bootstrap.css" />
<!--Import jQuery before materialize.js-->
<script type="text/javascript" src="node_modules/angular/angular.js"></script>
<script type="text/javascript" src="node_modules/angular-ui-router/release/angular-ui-router.js"></script>
<script type="text/javascript" src="node_modules/angular-route/angular-route.js"></script>
<script type="text/javascript" src="node_modules/angular-animate/angular-animate.js"></script>
<script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="app.js"></script>
<script type="text/javascript" src="materialize/js/materialize.min.js">
</script>
<script type="text/javascript" src="bootstrap/js/bootstrap.js"></script>
<!--controllers -->
<script type="text/javascript" src="controllers/collegeCtrl.js"></script>
<!--Services -->
<script type="text/javascript" src="services/httprequestService.js">
</script>
<!--Let browser know website is optimized for mobile-->
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>
<body ng-app="starter">
<div class="content">
<div ui-view ng-class="transition">
default content
</div>
</div>
</body>
</html>
colleges.js
angular.
module('controllers',[]).
controller('collegeCtrl', function ($scope,$state) {
});
I really don't understand what is going wrong. I have googled the error for the solution but it didn't work out.
You can try this
<html lang="en" ng-app="starter">
Try this:
.config(['$urlRouterProvider', '$stateProvider', function ($urlRouterProvider, $stateProvider) {
...
}
Whatever you inject should be in the same order or else it can be a dependency injection mismatch sort of problem
When I opening the main page I can't see the content of "home.html" file.
http://127.0.0.1:60590/#/home.html
And the same problem is when I open the "contact.html"
http://127.0.0.1:60590/#/contact.html
file because it redirect's me to the "home.html" again.
I think the "app.js" code is valid.
var mainApp = angular.module('mainApp', ['ngRoute']);
mainApp.config(['$routeProvider', function($routeProvider){
$routeProvider
.when('/home', {
templateUrl: 'view/home.html'
})
.when('/contact', {
templateUrl: 'view/contact.html'
}).otherwise({
redirectTo: '/home.html'
});
}]);
index.html
<!DOCTYPE html>
<html lang="pl" ng-app="mainApp">
<head>
<meta charset="UTF-8">
<title>kedar</title>
<link rel="stylesheet" href="style.css" type="text/css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
<script src="lib\angular-route.min.js"></script>
<script src="lib\app.js"></script>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"
integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<header ng-include="'header.html'"></header>
<main ng-view></main>
</body>
</html>
I'm trying to add an image to a sample web page. But whenever I use ng-src in img tag, the image is not showing on the page (the image is visible if I use 'src' in place of 'ng-src').
Here is my Html and JavaScript file.
Javascript & HTML :
/**
* Module
*
* Description
*/
angular.module('myModule', [])
.controller('myCtrl', ['$scope', function($scope){
$scope.clicked = "";
$scope.clickMe = function() {
$scope.clicked= "Image Clicked";
};
}]);
<html ng-app="mainModule">
<head>
<title>Testing For Image Click</title>
<script type="text/javascript" src="app.js"></script>
<script type="text/javascript" src="angular.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous"/>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script>
</head>
<body class="container" ng-controller="myCtrl">
<div>
<img ng-src="bluegem.jpg" ng-click="clickMe()"/>
</div>
</body>
Thanks in advance.
There are 2-3 problems in this code
1. myModule and mainModule(your app.js is creating a module named myModule but in your html you are using mainModule)
2. order of mentioned files (angular.js should be mentioned before app.js
Here I am adding the code
<html ng-app="myModule">
<head>
<title>Testing For Image Click</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script>
<script type="text/javascript" src="app.js"></script>
<!-- <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous"/>
Latest compiled and minified JavaScript
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script> -->
</head>
<body class="container" ng-controller="myCtrl">
<div>
<img ng-src="{{image}}" ng-click="clickMe()"/>
</div>
</body>
And
angular.module('myModule', [])
.controller('myCtrl', ['$scope', function($scope){
$scope.clicked="";
$scope.image = "bluegem.jpg"
$scope.clickMe=function()
{
$scope.clicked="Image Clicked";
};
}]);
Change the markup so that the ng-src binds to a variable and not a URL as you had it setup before:
<img ng-src="{{imageURL}}" ng-click="clickMe()"/>
I'm trying to separate my existing code to different files. I declared ng-app in a js file same as below:
define(['routes-admin', 'services/dependencyResolverFor'], function (routes, dependencyResolverFor) {
var app = angular.module('app', ['ngRoute', 'formly', 'xeditable', 'toaster', 'ngAnimate', 'ui.bootstrap']);
app.config([
'$routeProvider',
'$locationProvider',
'$controllerProvider',
'$compileProvider',
'$filterProvider',
'$provide',
'$httpProvider',
function ($routeProvider, $locationProvider, $controllerProvider, $compileProvider, $filterProvider, $provide, $httpProvider) {
app.controller = $controllerProvider.register;
app.directive = $compileProvider.directive;
app.filter = $filterProvider.register;
app.factory = $provide.factory;
app.service = $provide.service;
$httpProvider.interceptors.push('middleware');
])
return app;
});
and html code is like this:
<!DOCTYPE html>
<html >
<head>
<meta charset="utf-8"/>
<title>title</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/font-awesome.min.css" rel="stylesheet"/>
<link href="css/style.css" rel="stylesheet"/>
<link href="css/style-blue1.css" rel="stylesheet" id="style_color"/>
<link href="css/jstree-themes/default/style.min.css" rel="stylesheet">
<link href="lib/toaster/toaster.css" rel="stylesheet">
<script type="text/javascript" src="lib/intro.js"></script>
</head>
<body ng-app="app">
<div id="navbar">
</div>
<div id="container">
<button class="btn" ng-click="functions()">funvtions</button>
</div>
<script type="text/javascript" src="lib/require.js"></script>
<script type="text/javascript" src="lib/angular/angular.js"></script>
<script type="text/javascript" src="app/app.js"></script>
<script type="text/javascript" src="lib/angular/angular-route.min.js"></script>
<script type="text/javascript" src="lib/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="app/factories/MainViewFactory.js"></script>
<script type="text/javascript" src="app/controllers/MainViewController.js"></script>
<script type="text/javascript" src="lib/jstree.min.js"></script>
</body>
</html>
in the scripts segment I included app.js which is the js file above. but after running the code , it makes error : failed to instantiate app.
help me in this
That's classic issue when dependencies aren't fulfilled
<script type="text/javascript" src="app/app.js"></script>
<script type="text/javascript" src="lib/angular/angular-route.min.js"></script>
you load angular route after app so the dependency injection fails
although you should load jQuery before angular, then angular.element will use jQuery selectors