Hello I have few questions with using components in state. So i have tried doing ui-routing using templates and it works fine. but instead when i try to route it to a component, i get this error.
in my app.js
angular.module('app', ['ui.router'])
.config(['$stateProvider', '$urlRouterProvider', function ($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('/');
$stateProvider
.state('home', {
url: '/home',
component: 'home'
});
}]);
and in my index.html
<html ng-app="app">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.6/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/1.0.3/angular-ui-router.js"></script>
<script src="Content/lib/angularjs/Chart.js"></script>
<script src="Content/lib/angularjs/angular-chart.js"></script>
<script src="Content/app/components/home.js"></script>
<script src="Content/app/app.js"></script>
<link rel="stylesheet" href="Content/lib/bootstrap/bootstrap.css">
<link rel="stylesheet" href="index.css">
<link rel="stylesheet" href="Content/lib/bootstrap/bootstrap.css">
<link rel="stylesheet" href="Content/app/components/redditAnalyzer.css">
</head>
<body>
<a ui-sref="home">click me</a>
<div ui-view></div>
</body>
</html>
and in my home.html
<body>
"some stuffs"
</body>
and in my home.js
angular.module('app', ['chart.js'])
.component('home', {
templateUrl: 'Content/app/components/home.html',
bindings: {},
controller: ['$http',
function ($http) {
var vm = this;
"some more stuffs"
}]
});
but when i click on click me in my index.html, i get this error
Error: [$injector:unpr] http://errors.angularjs.org/1.6.6/$injector/unpr?p0=homeDirectiveProvider%20%3C-%20homeDirective
at angular.js:88
at angular.js:4826
at Object.d [as get] (angular.js:4981)
at angular.js:4831
at Object.d [as get] (angular.js:4981)
at getComponentBindings (angular-ui-router.js:sourcemap:8144)
at TemplateFactory.makeComponentTemplate (angular-ui-router.js:sourcemap:8135)
at Ng1ViewConfig.getTemplate (angular-ui-router.js:sourcemap:7938)
at Object.<anonymous> (angular-ui-router.js:sourcemap:9719)
at angular.js:1385 "<div ui-view="" class="ng-scope">"
what am i doing wrong?
thank you!
You are registering the module named "app" twice. A second module with same name will overwrite the first
Only use the dependency injection array on one of them when they have the same name. When there is no dependency array argument it acts as a getter not setter
Change:
// register new module with dependencies
angular.module('app', ['ui.router']).config...
// register new module with dependencies ... but will overwrite the first due to same name
angular.module('app', ['chart.js']).component...
To:
// register new module with dependencies
angular.module('app', ['ui.router','chart.js']).config...
// references an existing module to add component to
angular.module('app').component...
Also switch order of <script> so the module exists before you try to add component to it
<!-- Module created in this file -->
<script src="Content/app/app.js"></script>
<!-- subsequent files can then access existing module -->
<script src="Content/app/components/home.js"></script>
Related
index.html
<!DOCTYPE html>
<html ng-app="intervieweeApp">
<head>
<meta charset="utf-8" />
<title>Interviewee Evaluation</title>
<script src="Scripts/jquery-3.3.1.js"></script>
<script src="Scripts/angular.js"></script>
<script src="Scripts/bootstrap.js"></script>
<script src="Scripts/angular-route.js"></script>
<script src="Scripts/angular-messages.js"></script>
<script src="app.js"></script>
<script src="app.module.js"></script>
<script src="app.config.js"></script>
<script src="home-view/home-view.component.js"></script>
<script src="home-view/home-view.module.js"></script>
</head>
<body>
<p>does it work?</p>
go to home!
</body>
</html>
app.js
var intervieweeApp = angular.module('intervieweeApp', []);
app.module.js
var intervieweeApp = angular.module('intervieweeApp', [
'ngRoute',
'ngMessages',
'homeView'
]);
app.config.js
angular.
module('intervieweeApp').
config(['$routeProvider',
function config($routeProvider) {
$routeProvider.
when('/home', {
template: '<home-view></home-view>'
}).
otherwise('/home');
}
]);
home-view/home-view.module.js
angular.module('homeView', []);
home-view/home-view.component.js
angular.
module('homeView').
component('homeView', {
templateUrl: 'home-view/home-view.template.html',
controller: ['$http',
function PhoneListController($http) {
console.log(15);
}
]
});
home-view/home-view.template.html
<p> at home </p>
error
Module 'homeView' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.
https://errors.angularjs.org/1.7.5/$injector/nomod?p0=homeView
When I load index.html, I get this error. What am I doing wrong? Thanks
Take a look at the working DEMO
You had issues because of sequence of js file import with script tag
The best practice when creating a module is to use IIFE. This helps you not to think about the sequence in which you are importing js files in index.html
app.module.ts
(function(){
angular.module('intervieweeApp', [
'ngRoute',
'homeView'
]);
})()
home-view.module.ts
(function(){
angular.module('homeView', []);
})()
The same IIFE concept is used in most of the open-source js plugins, so its a standard practice
I have my files setup right now out of which one them is my index.html file and another is a app.javascript file. For some reason I keep getting error saying" Angular is not defined" which I unsure why as my script files look placed properly too. Below is how my index file and app.js file look like
index.html
<html>
<head>
<meta charset="utf-8">
<!Stylesheet>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootswatch/3.1.1/darkly/bootstrap.min.css">
<link rel="stylesheet" href="style.css">
<!Javascript>
<!-- load angular, nganimate, and ui-router -->
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.10/angular-ui-router.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular-animate.min.js"></script>
<script src="app.js"></script>
</head>
<!MainAngularApp>
<body ng-app="OnboardingApp">
<div class="container">
<!Injecting all the views here>
<div ui-view></div>
</div>
</body>
</html>
app.js
//Creating our Angular App injecting ngAnimate, UIRouter
angular.module('OnboardingApp', ['ngAnimate', 'ui.router'])
//Configuring the routes
.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
//Route followed to show our form
.state('form',{
url:'/form',
templateUrl: 'form.html',
controller: 'formController'
})
//Nested States where each will have their own view
//Nesting the sign up form
.state('form.signup',{
url:'/signup',
templateURL:'form-signup.html'
})
//Nesting the Question form
.state('form.questions',{
url:'/questions',
templateUrl:'form-questions.html'
})
//Nesting the Finish form
.state('form.finish',{
url:'/finish',
templateUrl:'form-finish.html'
});
$urlRouterProvider.otherwise('/form/signup');
})
.controller('formcontroller', function($scope){
//Storing all the form data into the form data object
$scope.formData= {};
//Function to process form data
$scope.processData = function(){
alert('Sign up is successful')
};
});
You need to define ng-app in your view so that angularjs app gets initiatied,
<div class="container" ng-app="OnboardingApp">
I don't manage to route using ui-router. It does work for me with ng-route, so I must have missed something basic. There is no error but I don't get any view.
The following code does not work (except for the otherwise statement):
angular.module("employeesApp", ["ui.router"])
.config(function ($stateProvider, $urlRouterProvider) {
$stateProvider
.state('employeeList', {
url: "/employees",
templateUrl: "components/employee_list/employeeListView.html",
});
$urlRouterProvider.otherwise("/employees");
});
The following code does work:
angular.module("employeesApp", ["ngRoute"])
.config(function ($routeProvider) {
var employeeListRoute = {
templateUrl: "components/employee_list/employeeListView.html"
};
var otherwiseRoute = employeeListRoute;
$routeProvider
.when("/employeeList", employeeListRoute)
.otherwise(otherwiseRoute);
Here is my index.html (omitted not relevant elements):
<!DOCTYPE html>
<html lang="en" ng-app="employeesApp">
<head>
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.3.1/angular-ui-router.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular-route.js"></script>
<script src="app.route.js"></script>
<script src="components/employee_list/employeeListCtrl.js"></script>
</head>
<body>
<div>
<ng-view />
</div>
</body>
</html>
What am I doing wrong when trying to use ui-router?
As #AminMeyghani already said, you should be using ui-view instead of ng-view directive to get router know that relative view should be loaded inside ui-view directive
<div>
<ui-view></ui-view>
</div>
Demo here
So I'm new to Angular and I've been struggling all day to get ngRoute to work without any success. So I decided to try out the ui-router but that's not working for me either.
(angularjs 1.5.0)
index.html
<!DOCTYPE html>
<html ng-app="MyApp">
<head>
<title>My app</title>
<script src="js/libs/angular.min.js"></script>
<script src="js/libs/angular-ui-router.min.js"></script>
<script src="js/main.js"></script>
</head>
<body>
<div ui-view></div>
<a ui-sref="state1">State hello</a>
<a ui-sref="state2">State show</a>
</body>
</html>
main.js
var myApp = angular.module('myApp', ['ui.router']);
myApp.config(function($stateProvider, $urlRouterProvider)
{
$urlRouterProvider.otherwise("/state1");
$stateProvider
.state('state1', {
url: "/state1",
templateUrl: "partials/hello.html"
})
.state('state2', {
url: "/state2",
templateUrl: "partials/show.html"
});
});
hello.html & show.html
<div>{{"hello"}}</div>
When loading index.html I get this error:
angular.min.js:6 Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.5.0/$injector/modulerr?p0=MyApp&p1=Error%3A%2…
You're using wrong module name.
<html ng-app="MyApp">
var myApp = angular.module('myApp', ['ui.router']);
Change your module name to "MyApp" in your js file. i.e.
var myApp = angular.module('MyApp', ['ui.router']);
I am trying to creae an application in angular using ng-route but i cannot get it to work.
I did search the issue and tried suggestions like to move my ng-app to but nothing seems to work.
I have added a plunker link below
http://plnkr.co/edit/a8VIRzloIMqANK4f8YXb?p=preview
Can someone help
adding the code here too
index html
<!DOCTYPE html>
<html >
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css">
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular.min.js"></script>
<script type="text/javascript" src="dist/ng-table.min.js"></script>
<link rel="stylesheet" href="dist/ng-table.min.css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/angular-route.min.js"></script>
<link href="main.css" rel="stylesheet" />
<script type="text/javascript" src="app.js"></script>
<script type="text/javascript" src="DemoCtrl.js"></script>
</head>
<body ng-controller="DemoCtrl" ng-app="stockApp">
<header>
<div class="blog-masthead">
<div class="container">
<nav class="blog-nav">
<h1 class="stockHeader">Stock App</h1>
<a class="blog-nav-item pull-right" href="#/">Login</a>
<a class="blog-nav-item pull-right" href="#/stock">Stock</a>
<a class="blog-nav-item active pull-right" href="#/addTools">Add Tools</a>
</nav>
</div>
</div>
</header>
<div ng-view></div>
</body>
</html>
app.js
var sampleApp = angular.module('stockApp', ['ngRoute']);
sampleApp.config(['$routeProvider',
function($routeProvider) {
$routeProvider.
when('/', {
templateUrl: 'login.html',
controller: 'DemoCtrl'
}).
when('/stock', {
templateUrl: 'stockStatus.html',
controller: 'DemoCtrl'
}).
when('/addTools', {
templateUrl: 'addTools.html',
controller: 'DemoCtrl'
}).
otherwise({
redirectTo: '/'
});
}]);
DemoCtrl.js
var app = angular.module('stockApp', ['ngTable']).
controller('DemoCtrl', function($scope) {
$scope.stock="In Stock!"
})
other than these have 3 partials.
See this fork of your original plunker where the code segments below have been updated: http://plnkr.co/edit/91XYMEC85Shgu6kQSrty?p=preview
// DemoCtrl.js
var app = angular.module('controllers', []).
controller('DemoCtrl', function($scope) {
$scope.stock="In Stock!"
})
// app.js
var sampleApp = angular.module('stockApp', ['ngRoute', 'controllers']);
First, your controller code was re-initializing the stockApp module by passing in dependencies. If you need separate depedencies for your controllers, create them as a separate module and make your app dependent on that module.
Second, I updated the versions of angular and angular JS. Conflicting versions can cause issues as per this prior answer: Failed to instantiate module [$injector:unpr] Unknown provider: $routeProvider.
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular-route.js"></script>
One additional thing to check on... make sure you're loading your angular js files (controllers, services, factories, etc) in the correct order. For example, if a controller uses a service, the service needs to be loaded into the DOM before the controller.
Additionally, make sure that none of your services or factories are re-initializing the app. Your code should NOT look like this:
angular.module('app', [])
.service('TrxnService', function () {
//code here
})
But instead, it should look like this (without the brackets)...
angular.module('app')
.service('TrxnService', function () {
//code here
})
NOTE FOR NEWBIES: replace 'app' with whatever you named your app in your top level module declaration.