I'm trying to display the configured values author and version in angular value service in html page.Version code is displayed fine but not the author name
Here is the html code
<!doctype html>
<html lang="en" ng-app="myApp">
<head>
<meta charset="utf-8">
<title>My AngularJS App</title>
<link rel="stylesheet" href="css/app.css"/>
</head>
<body>
<ul class="menu">
<li>view1</li>
<li>view2</li>
</ul>
<div ng-view></div>
<div>Angular seed app: v<span app-version></span></div>
<div>Author is : <span app-author></span></div>
<script src="lib/angular/angular.js"></script>
<script src="js/app.js"></script>
<script src="js/services.js"></script>
<script src="js/controllers.js"></script>
<script src="js/filters.js"></script>
<script src="js/directives.js"></script>
</body>
</html>
Here is the directive...
angular.module('myApp.directives', []).
directive('appVersion', ['version', function(version) {
return function(scope, elm, attrs) {
elm.text(version);
};
}])
.directive('appAuthor', ['author', function(author) {
return function(scope, elm, attrs){
elm.text(author);
};
}]);
And here is the service portion where author and version values are configured
angular.module('myApp.services', []).
value('version', '0.1')
.value('author','JIM');
The error i'm getting in developer console is
Error: Unknown provider: authorProvider <- author <- appAuthorDirective
Make sure you are loading those modules (myApp.services and myApp.directives) as dependencies of your main app module, like this:
angular.module('myApp', ['myApp.directives', 'myApp.services']);
plunker: http://plnkr.co/edit/wxuFx6qOMfbuwPq1HqeM?p=preview
bmleite has the correct answer about including the module.
If that is correct in your situation, you should also ensure that you are not redefining the modules in multiple files.
Remember:
angular.module('ModuleName', []) // creates a module.
angular.module('ModuleName') // gets you a pre-existing module.
So if you are extending a existing module, remember not to overwrite when trying to fetch it.
Related
I am new to AngularJs and very new to ui-router.
I seem to be having problems creating several routes. This is how I proceed, inspiring myself from a tutorial but failing to reproduce the result.
Here are my different files:
1/index.html
<!DOCTYPE html>
<html lang="en" ng-app="app">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<script src="js/lib/angular.js"></script>
<script src="//unpkg.com/#uirouter/angularjs/release/angular-ui-router.min.js"></script>
<title>Document</title>
</head>
<body>
<div class="container">
Home
About
Contact
<ui-view></ui-view>
</div>
<script src="js/app.js"></script>
<script src="js/components/about/about.js"></script>
<script src="js/components/about/about.component.js"></script>
<script src="js/components/home/home.js"></script>
<script src="js/components/home/home.component.js"></script>
<script src="js/components/contact/contact.js"></script>
<script src="js/components/contact/contact.component.js"></script>
</body>
</html>
2/app.js
angular
.module('app', []);
3/about.js
angular
.module('about', ['ui.router']);
4/about.component.js
const about = {
template: '<div class="about">About</div>'
};
angular
.module('about', ['ui.router'])
.component('about', about)
.config(function ($stateProvider) {
$stateProvider.state({
name: 'about',
url: '/about',
component: 'about',
// template: "<div>About</div>"
})
});
There are 2 similar files for home and another 2 for contact.
There is obviously something wrong as we are only calling the app module and not the contact, home, about modules, but this is the way the tutorial was done.
It's not working (the different templates of each routed module are not showing) and I can't figure it out.
To ensure all the modules get bootstrapped accordingly, just simply set them all as the deps for app module:
angular
.module('app', ['home', ...])
One more thing is about setting the directive attribute ui-sref for <a ui-sref="home" /> to work best with ui-router module instead of #/home which works with ngRoute
<!DOCTYPE html>
<html ng-app="myApp">
<head></head>
<head>
</head>
<!-- ControllerAs syntax -->
<!-- Main controller with serveral data used on diferent view -->
<body ng-controller="MainCtrl as main" class="{{$state.current.data.specialClass}}" landing-scrollspy id="page-top">
<!-- Main view -->
<div ui-view></div>
<!-- jQuery and Bootstrap -->
<script src="js/jquery/jquery-3.1.1.min.js"></script>
<script src="js/plugins/jquery-ui/jquery-ui.min.js"></script>
<script src="js/bootstrap/bootstrap.min.js"></script>
<!-- Anglar App Script -->
<script src="js/app.js"></script>
<script src="js/config.js"></script>
<script src="js/controllers.js"></script>
<script src="js/services/myService.js"></script>
</body>
</html>
I have an angularJS app which was working fine before adding a service.
I am getting the following error.
myService.js:3 Uncaught Reference Error: myApp is not defined
Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.5.0/$injector/modulerr?
I am tying all the controllers to the module. I have also added the myService file to the index.html
Below is the code that I have in controller:
function MainCtrl($scope, $rootScope, $http, $state, myService){
};
angular
.module('myApp')
.controller('MainCtrl', MainCtrl)
.controller('FinalViewCtrl', FinalViewCtrl);
This is what I have in myService.js
'use strict';
myApp.factory('myService', ['$http', function($http) {
}]);
Let me know if I am missing anything?
Add the myapp variable initiation just above the service code.
var myapp = angular.module('myApp');
myApp.factory('myService', ['$http', function($http) {
}]);
Without the html, it will be hard to tell, but are you adding your JavaScript files in the correct order? You have to make sure that your file with angular.module('myApp') is loaded before any controllers or services. I've had the same error you have when adding my service before my app.
I'm refactoring an old AngularJS project so it's less dumb and bad, separating controllers and exporting data with a factory rather than having all the data inside of one giant controller. I can't get very far, unfortunately, because my main controller isn't working. I've searched SO extensively and none of the issues I've seen matched mine. I also ran it by a senior dev and he couldn't find the issue. Any help is much appreciated. The app did work before my refactoring efforts.
My index.html:
<!DOCTYPE html>
<html ng-app="campSpots">
<head>
<meta charset="utf-8">
<title>Camp Spots</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/css/bootstrap.min.css" integrity="sha384-y3tfxAZXuh4HwSYylfB+J125MxIs6mR5FOHamPBG064zB+AFeWH94NdvaCBm8qnd" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body ng-controller="mainCtrl">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.js"></script>
<script type="text/javascript" src="js/app.js"></script>
<script type="text/javascript" src="components/main.ctrl.js"></script>
</body>
</html>
My factory:
(function(){
"use strict";
angular
.module("campSpots")
.factory("postFactory", function($http){
function getPosts(){
return $http.get('data/posts.json');
};
return {
getPosts: getPosts
};
})
})
And my controller, main.ctrl.js:
(function(){
"use strict";
angular
.module("campSpots")
.controller("mainCtrl", mainCtrl);
mainCtrl.$inject = ['$scope', '$http', 'postFactory'];
function mainCtrl($scope, $http, postFactory){
postFactory.getPosts().then(function(posts){
$scope.posts = posts.data;
})
}
})
You neglected to invoke the function in your IIFE for both the controller and factory.
They should go like this:
(function(){
///code
}());
That last () is missing in your code, so it's not actually running the code blocks.
I am using an angular emoji plugin that requires ng-bind-html. I am using this emoji plugin for creating messages, however I don't want it so that html code such as <h2>hello</h2> can be compiled but the ng-bind-html is mandatory to use the emoji plugin. Any suggestions/ways I can get around this so that posts will include emojis but not html code that gets compiled? Thanks
angular.module("app", ["dbaq.emoji","ngSanitize"]).controller("AppCtrl", function ($scope) {
$scope.message = "Animals: :dog: :cat: :snake: People: :smile: :confused: :angry: Places: :house: :school: :hotel: :poop:";
});
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="emoji.min.css">
<script src="angular.min.js"></script>
<script src="emoji.min.js"></script>
</head>
<body ng-app="app" ng-controller="AppCtrl">
<div ng-bind-html="message | emoji"></div>
</body>
</html>
emoji plugin --> https://github.com/dbaq/angular-emoji-filter-hd
Try my simple solution:
1. Create file html like this:
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="emoji.min.css">
<script src="angular.js"></script>
<script src="angular-sanitize.js"></script>
<script src="emoji.min.js"></script><script src="script.js"></script>
</head>
<body ng-app="app" ng-controller="AppCtrl">
<textarea ng-model="message"></textarea><div ng-bind-html="message | emoji"></div>
</body>
Notes:
I embed file js called angular-sanitize.js. Copy here and save as angular-sanitize.js. Then other files 'emoji.min.css, angular.js & emoji.min.js' exists on your app. Please mind your path too.
2.Create js file called script.js like this:
angular.module("app", ["emoji","ngSanitize"]).controller("AppCtrl", ['$scope', function ($scope) {
$scope.message = "Animals: :dog: :cat: :snake: People: :smile: :confused: :angry: Places: :house: :school: :hotel: :poop:";}]);
3.Run it.
I'm learning Angularjs and I'm doing the tutorial from http://angularjs.org/, but I'm unable to get what I want. I have a simple page, index.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Home</title>
</head>
<body>
<ul>
<li>Hello World</li>
<li>Tasks</li>
<li>Projects</li>
</ul>
</body>
</html>
I want that when I click on projecst.html my url shows something like http://localhost:8080/Application/projects or http://localhost:8080/Application/#/projects or http://localhost:8080/Application/#!/projects or whatever, but I don't want that it shows http://localhost:8080/Application/projects.html
I've been testing with $routeProvider, $locationProvider and $location, but I don't undestand very well how they work, Can anybody explain it to me? Can anybody help me with this issue?
More information:
projects.html:
<!DOCTYPE html>
<html ng-app="project">
<head>
<title>AngularJS | Projects</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular-resource.min.js"></script>
<script type="text/javascript" src="https://cdn.firebase.com/v0/firebase.js"></script>
<script type="text/javascript" src="http://firebase.github.io/angularFire/angularFire.js"></script>
<script type="text/javascript" src="js/projects.js"></script>
</head>
<body>
<h2>JavaScript Projects</h2>
<div ng-view></div>
</body>
</html>
project.js:
angular.module('project', ['firebase']).
value('fbURL', 'https://angularjs-projects.firebaseio.com/').
factory('Projects', function(angularFireCollection, fbURL) {
return angularFireCollection(fbURL);
}).
config(function($routeProvider) {
$routeProvider.
when('/', {templateUrl:'list.html', controller:ListController}).
when('/edit/:projectId', {templateUrl:'edit.html', controller:EditController}).
when('/new', {templateUrl:'edit.html', controller:NewController}).
otherwise({redirectTo:'/'});
});
Thanks in advance!
Greetings.
You should define the URL using the $routeProvider http://docs.angularjs.org/tutorial/step_07 . don't point your href to *html. point them to the urls you defined.
then you can also configure the $routeProvider to be either in HTML5 mode or in hashbang (default) mode-
You can fix this using "index.html" as your host page and deploy on a real webserver.
You could also configure your webserver to accept "projects.html" as an index file or welcome file.
You then setup routing in your angular application like so:
var app = angular.module('app', [
'ngRoute'
]);
app.config(['$routeProvider',
function($routeProvider) {
$routeProvider.
when('/projects', {
templateUrl: 'partials/project-list.html',
controller: 'MyCtrl'
});
}]);
Make sure to link to that in a correct way, so your html should be
<li>Projects</li>