I'm new to angularjs and I'm using ui-router for this but it throws Error: $injector:modulerr
Module Error in console.
What is the mistake?
I've included the script as well.
var app = angular.module("SearchAPP", ['ngRoute', 'bw.paging', 'ui.router']);
app.config(['$stateProvider',
function($stateProvider) {
var helloState = {
name: 'tab1',
url: '/tab1/',
template: '<h3>hello world!</h3>'
}
var aboutState = {
name: 'tab2',
url: '/tab2',
template: '<h3>hello world!</h3>'
}
$stateProvider.state(helloState);
$stateProvider.state(aboutState);
}
]);
<html>
<head>
</head>
<body ng-app="myApp">
<a ui-sref="hello">Hello</a>
<a ui-sref="about">About</a>
<ui-view></ui-view>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0rc1/angular-route.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-sanitize.js"></script>
<script src="//npmcdn.com/angular-ui-router#0.3.1/release/angular-ui-router.js">
</html>
Related
I have a simple project that uses ui-router with component. For the 'hello' component, nothing happened if I clicked on the 'hello' link; if I clicked on the "About" link, then it showed the view because it doesn't use a component. Can someone please let me know why the 'hello' component is not working? I have tried different version of angular-ui-router.js, but didn't fix the issue. Thanks.
index.html:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.js"></script>
<!--<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.4.2/angular-ui-router.js"></script> -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/1.0.0-rc.1/angular-ui-router.js"></script>
<script src=https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/1.0.0-rc.1/angular-ui-router.min.js"> </script>
<script src="js/hello-component.js"></script>
<script src="js/hellogalaxy-module.js"></script>
<style>.active { color: red; font-weight: bold; }</style>
</head>
<body ng-app="hellogalaxy">
<a ui-sref="hello" ui-sref-active="active">Hello</a>
<a ui-sref="about" ui-sref-active="active">About</a>
<ui-view></ui-view>
</body>
</html>
hellogalaxy-module.js:
var myApp = angular.module('hellogalaxy', ['ui.router']);
myApp.config(function($stateProvider) {
var helloState = {
name: 'hello',
url: '/hello',
component: 'hello'
};
var aboutState = {
name: 'about',
url: '/about',
template: '<h3>Its the UI-Router hello world app!</h3>'
}
$stateProvider.state(helloState);
$stateProvider.state(aboutState);
});
hello-component.js:
angular.module('hellogalaxy').component('hello',
{
template: '<h3>{{$ctrl.greeting}} Solar System!</h3>'
controller: function() { this.greeting = 'hello'}
})
You should load the module first and then the component, change the order as,
<script src="js/hellogalaxy-module.js"></script>
<script src="js/hello-component.js"></script>
I just started AngularJS. When I try to implemt following example, I am getting
404 Not Found
This is my main.html
<!DOCTYPE html>
<html ng-app="demoApp">
<script src="angular.min.js"></script>
<head>
<title>main page</title>
</head>
<body>
<div ng-view></div>
<script>
var demo = angular.module('demoApp',[]);
demo.config(function ($routeProvider){
$routeProvider
.when ('foo',{
controller : 'SimpleController',
templateUrl: 'first.html'
})
});
demo.controller('SimpleController',function($scope){
$scope.customers = [
{name: 'sac',city:'abcd'},
{name: 'mac',city:'efgh'},
{name: 'nalaka',city:'ijkl'}
];
});
</script>
</body>
</html>
My first.html
<ul>
<li ng-repeat="cus in customers ">{{ cus.name }}</li>
</ul>
When I visit localhost/foo I am getting 404 exception. I just started AngularJS. So any help/guide to solve this problem will be a great help for me.
Thanks in advance
You should refer angular-route.min.js file on page & then include ngRoute module in your application.
var demo = angular.module('demoApp',['ngRoute']);
You should correct your .when condition to below
.when('/foo',
As you did't enabled html5mode in your routing, you could access the page via localhost/#/foo URL.
var demo = angular.module('demoApp', ['ngRoute']);
demo.config(function($routeProvider) {
$routeProvider
.when('/foo', {
controller: 'SimpleController',
templateUrl: 'first.html'
})
// By default it will open foo
.otherwise({redirectTo: '/foo'})
});
demo.controller('SimpleController', function($scope) {
$scope.customers = [{
name: 'sac',
city: 'abcd'
},
{
name: 'mac',
city: 'efgh'
},
{
name: 'nalaka',
city: 'ijkl'
}
];
});
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-route.min.js"></script>
<div ng-app="demoApp">
<div ng-view></div>
<script type="text/ng-template" id="first.html">
Content of the template.
</script>
</div>
var app = angular.module("Signup", ['ngRoute', "ngAnimate"]);
app.config(function($routeProvider) {
$routeProvider
.when('/signup', {
templateUrl: "/views/signup.html",
controller: "FormCtrl"
})
.when('/otp', {
templateUrl: "/views/otp.html",
controller: "FormCtrl"
})
.when('/password', {
templateUrl: "/views/password.html",
controller: "FormCtrl"
})
.when('/identity', {
templateUrl: "/views/identity.html",
controller: "FormCtrl"
})
.otherwise({
redirectTo: '/signup'
});
});
app.controller("FormCtrl", [function() {
var store = this;
store.usersData = [];
store.newuser = {
};
this.submit = function() {
store.usersData.push(store.newuser);
console.log(store.usersData);
store.newuser = {};
};
}]);
I have four templates sitting inside my views folder, namely, otp.html, password.html, identity.html, signup.html
And I have an index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<base href="/index.html">
<title>Sign Up | Rupaiya Exchange</title>
<link rel="stylesheet" href="assets/icons/font-awesome-4.7.0/css/font-awesome.min.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="assets/css/signupform.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.min.js" charset="utf-8"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular-route.min.js" charset="utf-8"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.0/angular-animate.min.js" charset="utf-8"></script>
</head>
<body ng-app="Signup">
Signup
<div ng-view></div>
<!-- <script type="text/javascript">
document.getElementById('showPswd').addEventListener("click", function() {
var pwd = document.getElementById("newPassword");
if (pwd.getAttribute("type") === "password") {
pwd.setAttribute("type", "text");
} else {
pwd.setAttribute("type", "password");
}
});
</script> -->
<script src="assets/js/signup.js" charset="utf-8"></script>
</body>
</html>
But only signup page is getting loaded.
I have checked my code with almost tutorial that I could find on routing and views on the front page of google, but nothing is working.
I am not receiving any error either.
Also, upon clicking on the link <a href="#/otp">Signup<a> my url changes to this http://127.0.0.1:36164/#!/signup#%2Fotp
I'm attempting to make a simple Hello World page with an inline template defined as home.html. The routing used is ui.router, and when the code is run I receive an infinite loop of
GET /home.html 404 0.868 ms - 1076
which indicates to me that angular can't find the home.html template that was defined.
app.js
var app = angular.module('HelloWorld', ['ui.router']);
app.controller('MainCtrl', [
'$scope',
'posts',
function($scope, posts){
$scope.test = 'Hello world!';
$scope.posts = posts.posts;
$scope.addPost = function(){
if(!$scope.title || $scope.title === '') { return; }
$scope.posts.push({
title: $scope.title,
link: $scope.link,
upvotes: 0
});
$scope.title = ''; //Set title to empty
$scope.link = ''; // Set link to empty
};
$scope.incrementUpvotes = function(post) {
post.upvotes += 1;
};
}]);
app.factory('posts', [function(){
var o = {
posts: [
{title: 'post 1', upvotes: 5}
]
};
return o;
}]);
app.config([
'$stateProvider',
'$urlRouterProvider',
function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('home', {
url: '/home',
templateUrl: 'home.html',
controller: 'MainCtrl'
});
$urlRouterProvider.otherwise('home');
}]);
index.ejs
<!DOCTYPE html>
<html ng-app="HelloWorld">
<head>
<title>Hello World</title>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.10/angular.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.10/angular-ui-router.js"></script>
<script src="javascripts/app.js"></script>
<style> .glyphicon-thumbs-up { cursor:pointer } </style>
</head>
<body>
<div class="row">
<div class="col-md-6 col-md-offset-3">
<ui-view></ui-view>
</div>
</div>
<script type="text/ng-template" id="home.html">
<div class="page-header">
<h1>Hello World</h1>
</div>
</script>
</body>
</html>
I can't spot what seems to be going wrong in the code. I've also tried variations using /home.html in both the app config and html to no avail. I could use some insight on how I missed up the configuration/inline template.
If this is exactly your code you have a missing " in id of template. See below for correction
<script type="text/ng-template" id="home.html">
Your code is working fine for me. To further test it I added the following to the html:
<a ui-sref='home'>Home</a>
<a ui-sref='about'>About</a>
....
<script type="text/ng-template" id="about.html">
<div class="page-header">
<h1>About</h1>
</div>
</script>
I then added the following route to the javascript:
.state('about', {
url: '/about',
templateUrl: 'about.html',
controller: 'MainCtrl'
});
This adds links to the top left allowing you to switch views. You can see the working code at http://codepen.io/amartin007/pen/rLOvqa
I'm using ui router and angular js so when I test the app, I just get a blank screen with an injector:module error. This is the link to the error:
http://errors.angularjs.org/1.3.11/$injector/modulerr?p0=myApp&p1=Error%3A%…dflare.com%2Fajax%2Flibs%2Fangular.js%2F1.3.11%2Fangular.min.js%3A17%3A350
Here is my app.js code:
var app = angular.module('myApp', ['ui.router', 'firebase']);
// Creating fireref instance
app.factory('FireRef', function($firebase){
var ref = new Firebase('https://dablog.firebaseio.com/');
return ref;
});
// Creating fireauth instance
app.factory('FireAuth', function($firebaseAuth){
var ref = new Firebase('https://dablog.firebaseio.com/');
return $firebaseAuth(ref);
});
app.config(function($stateProvider, $urlRouterProvider){
$urlRouterProvider.otherwise('/site/home');
$stateProvider
.state('site', {
url: '/site',
templateUrl: 'partials/site.html'
})
.state('site.home', {
url: '/home',
templateUrl: 'partials/home.html'
})
.state('site.about', {
url: '/about',
templateUrl: 'partials/about.html'
})
.state('site.projects', {
url: '/projects',
templateUrl: 'partials/projects.html'
})
.state('site.blog', {
url: '/blog',
templateUrl: 'partials/blog.html'
// controller: 'BlogCtrl'
})
.state('site.login', {
url: '/login',
templateUrl: 'partials/login.html'
// controller: 'LoginCtrl'
})
.state('site.newpost', {
url: '/newpost',
templateUrl: 'partials/newpost.html',
// controller: 'NewPostCtrl'
})
.state('site', {
url: '/contact',
templateUrl: 'partials/contact.html'
});
})
Here is my blog.js file where it says "app is not defined":
'use strict'
app.controller('BlogCtrl', function($scope, $firebase, $firebaseArray, FireRef, $state){
var data = $firebaseArray(FireRef);
$scope.posts = data;
$scope.$watch('posts', function(newValue, oldValue){
$scope.posts = $sce.trustAsHtml(data);
})
$scope.login = function() {
$state.go('site.login');
}
$scope.newPost = function(){
$state.go('site.newPost');
}
});
Here is my index.html code:
<!DOCTYPE html>
<html>
<head>
<meta charset= "utf-8">
<title>Portfolio</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Angular -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.11/angular.min.js"></script>
<!-- Angular UI Router -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.13/angular-ui-router.js"></script>
<!-- Angular Animate -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.13/angular-animate.min.js"></script>
<!-- jQuery -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<!-- Bootstrap -->
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/js/bootstrap.min.js"></script>
<!-- Firebase -->
<script src="https://cdn.firebase.com/js/client/2.2.0/firebase.js"></script>
<script src="https://cdn.firebase.com/libs/angularfire/0.9.1/angularfire.min.js"></script>
<!-- Controllers -->
<script src="js/controllers/BlogCtrl.js"></script>
<script src="js/controllers/LoginCtrl.js"></script>
<script src="js/controllers/NewPostCtrl.js"></script>
<!-- App -->
<script src="js/app.js"></script>
<!-- Styling -->
<link rel="stylsheet" type="text/css" href="css/styles.css">
<link rel="stylsheet" type="text/css" href="css/animate.css">
</head>
<body ng-app="myApp">
<div ui-view></div>
</body>
</html>
You have declared 'use strict', so the app variable is undefined. You need to add
var app = angular.module('myApp');
to the top of BlogCtrl.js
Also, move <script src="js/app.js"></script> so that it's before the controller scripts in index.html. Because you load app.js after BlogCtrl.js, the module defined in app.js is not available in BlogCtrl.js.
I don't have enough reputation to comment, but I do want to add information: do not add var app = angular.module('myApp', []) in blog.js, because the brackets initialize a new app, so Angular will think you're creating a new app and will throw an error, since 'myApp' already exists. Be sure to use var app = angular.module('myApp') instead. Also be sure to link the the .js file in your index file after Angular has been loaded.
I think you need to include this line at the top of blog.js:
var app = angular.module('myApp');
Edited to remove the second parameter: , [].