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
Related
Below is my Angularjs routing code, but unfortunately i am getting error when i am running code.
<!DOCTYPE html>
<html ng-app="routeApp">
<head>
<title>Routing - RouteParams</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
</head>
<body>
<div ng-view></div>
<script src="https://code.jquery.com/jquery-1.12.1.js"></script>
<script src="https://code.angularjs.org/1.0.8/angular.js"></script>
<script src="./vendor/angular/angular-sanitize.js"></script>
<script src="https://code.angularjs.org/1.2.10/angular-route.js"></script>
</body>
<script type="text/javascript">
var app = angular.module('routeApp',['ngRoute','ngSanitize']);
app.config(['$routeProvider', '$locationProvider', function ($routeProvider, $locationProvider) {
$routeProvider
.when('/login',
{
templateUrl:'loginformroute.html',
controller:'LoginController'
})
.otherwise({ redirectTo: '/login' });
// $locationProvider.html5Mode(true);
}]);
app.controller("LoginController", function($scope) {
$scope.login = function () {
alert(1);
};
});
</script>
</html>
and i am getting below error
$sce is included by default in angular 1.2+so you don't need sanitize anymore in order to get $sce. So use angular 1.2 or further version and remove sanitize script. Hope it will solve your problem
Move your scripts in header tag
<head>
<script src="https://code.jquery.com/jquery-1.12.1.js"></script>
<script src="https://code.angularjs.org/1.0.8/angular.js"></script>
<script src="./vendor/angular/angular-sanitize.js"></script>
<script src="https://code.angularjs.org/1.2.10/angular-route.js"></script>
</head>
Also consider the angular.route and angular version should be the same. So use this version ( you can get it from code.angularjs.org) instead of your version
I am new in angularjs tech. I have implemented one registration function in my project.
I have created one js file for routing and controller functionality in my project and its working fine, If i will do separate router and controller file then I am application is failing.
I need to do separate file for the router and controller.
Below is my code in one file.
app.js file
var app = angular.module('crasApp', [ 'ngRoute' ]);
app.config(function($routeProvider) {
$routeProvider.when("/", {
templateUrl : "./views/xyz.html",
controller : "searchCtrl"
}).when("/registration", {
templateUrl : "./views/abc.html",
controller : "MainCtrl"
}).when("/view", {
templateUrl : "./views/viewsdata.html",
controller : "overViewCtrl"
});
});
app
.controller(
"MainCtrl",
function($scope, $http) {
console.log("Hi");
});
index.html
<!DOCTYPE html>
<html ng-app="crasApp">
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<head>
<!-- Use Bootstrap -->
<link rel="stylesheet" href="./css/bootstrap.min.css">
<link rel="stylesheet" href="./css/abn-stylesheet.css">
<link rel="stylesheet" href="./css/style.css">
<script src="./javascripts/jquery/jquery-1.12.4.js"></script>
<script src="./javascripts/jquery/jquery.min-1.12.4.js"></script>
<script src="./javascripts/angular/bootstrap.min.js"></script>
<!-- <script src="./javascripts/angular/angular.min.js"></script> -->
<script src="./javascripts/controllers/app.js"></script>
<!-- <script src="./javascripts/angular/angular-route.js"></script> -->
<script src="./javascripts/router/router.js"></script>
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular-route.js"></script>
</head>
<div ng-view></div>
</html>
xyz.html
<!DOCTYPE html>
<html ng-app="crasApp">
<head>
<!-- Use Bootstrap -->
<link rel="stylesheet" href="./css/bootstrap.min.css">
<link rel="stylesheet" href="./css/abn-stylesheet.css">
<link rel="stylesheet" href="./css/style.css">
<link rel="stylesheet" href="./css/ngDatepicker.css">
<script src="./javascripts/jquery/jquery-1.12.4.js"></script>
<script src="./javascripts/jquery/jquery.min-1.12.4.js"></script>
<script src="./javascripts/angular/bootstrap.min.js"></script>
<!-- <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular.min.js"></script> -->
<script src="./javascripts/controllers/app.js"></script>
</head>
<body ng-controller="MainCtrl">
Hi
</body>
<html>
So, Its working file if I am using one app.js file
I want to do seprate router and controller file.
router functionality i moved into different file and its working router functionality but not working controller functionality..
Separate router file as below.
router.js
var app = angular.module('crasApp', [ 'ngRoute']);
app.config(function($routeProvider) {
$routeProvider.when("/", {
templateUrl : "./views/retrieveTerminationReason.html",
/*controller : "searchCtrl"*/
}).when("/registration", {
templateUrl : "./views/registration.html",
/*controller : "MainCtrl"*/
}).when("/view", {
templateUrl : "./views/forbearanceRegistartionOverview.html",
/*controller : "overViewCtrl"*/
});
});
app.js as a controller
var app = angular.module('crasApp', []);
app
.controller(
'MainCtrl',
function($scope, $http) {
console.log("Hi");
});
Please any one can help on this part.
In router.js, change var app = angular.module('crasApp', [ 'ngRoute']) to var app = angular.module('crasApp').
Also, in app.js, your declaration should be: var app = angular.module('crasApp', ['ngRoute']);. Since you have a single module, 'crasApp', you must declare it's dependencies when you declare the module itself.
What you have currently is re-creating the module vs. appending functionality.
Also, be sure to include your router.js as well in your HTML .
the issue
when you're using var app = angular.module('crasApp', [ 'ngRoute']); in your route.js file you are initializing new module NOT adding config to existing module!
the best approach for structuring an Angular App is NOT using variable you can call your module in a different way like:
app.js
var MODULE_NAME = 'crasApp'
angular.module(MODULE_NAME, ['ngRoute']);
to create controller controllers.js
angular.module(MODULE_NAME).controller('MainCtrl',function($scope, $http) { //Note removing the dependencies array
console.log("Hi");
});
to create config routes.js
angular.module(MODULE_NAME).config(function($routeProvider) { //Note removing the dependencies array
$routeProvider.when("/", {
templateUrl : "./views/retrieveTerminationReason.html",
/*controller : "searchCtrl"*/
})
in your index.html
<head>
<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.min.js"></script>
<script src="js/app.js"></script>
<script src="js/routes.js"></script>
<script src="js/controllers.js"></script>
</head>
Note you don't need ng-controller directive in your HTML because defining it in routes is enough
separating services
create services.js for example
angular.module(MODULE_NAME).factory('Users',function($http,$q) {
return {
getUsers:function(){
var def = $q.defer();
$http({url:'URL_HERE',method:'GET'}).then(function(res){
def.resolve(res)
},function(err){
def.reject(err);
})
}
}
})
using in controller
angular.module(MODULE_NAME).controller('MainCtrl',function($scope, Users) { //Note Users is the name of the factory created above
Users.getUsers().then(function(res){
$scope.users=res;
},function(err){
$scope.error = err;
})
});
I'm using eclipse with angularJS for make the front-end of my app. Not first time I'm using angular but first time I'm using it with eclipse.
AngularJS plugin have been installed and I made the link between view and controllers. I convert my project to AngularJS project. Angular is working (an input ng-model="a" {{a}} does the job) but the chrome terminal give me an error :
Error: [ng:areq] http://errors.angularjs.org/1.5.0/ng/areq?p0=HomeController&p1=not%20aNaNunction%2C%20got%20undefined
index.html
<!DOCTYPE html >
<html ng-app="app">
<head>
<meta charset="UTF-8">
<title>Mon Titre</title>
<link rel="stylesheet" type="text/css" href="resources/css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="resources/css/style.css" />
<script type="text/javascript" src="https://code.angularjs.org/1.5.0/angular.min.js"></script>
<script type="text/javascript" src="https://code.angularjs.org/1.5.0/angular-route.js"></script>
<script type="text/javascript" src="resources/js/angular/controller/MainController.js"></script>
<script type="text/javascript" src="resources/js/angular/controller/HomeController.js"></script>
<script type="text/javascript" src="resources/js/angular/controller/CategoryController.js"></script>
<script type="text/javascript" src="resources/js/angular/app.js"></script>
</head>
<body >
<div ng-view></div>
</body>
</html>
app.js
var app = angular.module("app", ["ngRoute"]); // Already tried to inject controllers
app.config(function ($routeProvider) {
$routeProvider
.when('/', {
templateUrl: 'pages/accueil.html',
controller: 'HomeController'
})
.when('/categories', {
templateUrl: 'pages/categorie-list.html',
controller: 'CategoryController'
})
.otherwise({
redirectTo: '/'
});
});
HomeController.js
var app = angular.module("app",[]);
app.controller("HomeController", function($scope){
$scope.bonjour ='I\'m home controller !';
});
CategoryController.js
var app = angular.module("app",[]);
app.controller("CategoryController", function($scope){
$scope.bonjour = 'I\'m category controller';
});
Both .html contains just one {{bonjour}}.
Thanks for your help and sorry for this low english !
In HomeController.js and CategoryController.js replace
var app = angular.module("app",[]); // create new app module
with
var app = angular.module("app"); // use existing app module
After that move app.js script before controller scripts:
<script src="https://code.angularjs.org/1.5.0/angular.min.js"></script>
<script src="https://code.angularjs.org/1.5.0/angular-route.js"></script>
<script src="resources/js/angular/app.js"></script>
<script src="resources/js/angular/controller/MainController.js"></script>
<script src="resources/js/angular/controller/HomeController.js"></script>
<script src="resources/js/angular/controller/CategoryController.js"></script>
Ok this is my first attempt at this. Trying to get my page to load. my App.js file has all the nessities I hope. here are my files below:
Index.html:
<!DOCTYPE html>
<html ng-app="TodoApp" xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="Scripts/jquery-1.9.0.js"></script>
<script src="https://code.angularjs.org/1.3.5/angular-route.js"></script>
<script src="Scripts/angular.js"></script>
<script src="Scripts/angular-resource.js"></script>
<script src="Scripts/app.js"></script>
<link rel="stylesheet" type="text/css" href="Content/bootstrap.css" />
<title>Amazing Todo List</title>
</head>
<body>
<div class="container">
<div ng-view></div>
</div>
</body>
</html>
App.js:
var TodoApp = angular.module("TodoApp", ["ngResource", "ngRoute"]).
config(function ($routeProvider) {
$routeProvider.
when('/', { controller: ListCtrl, templateUrl: 'list.html' }).
otherwise({ redirectTo: '/' });
});
var ListCtrl = function ($scope, $location) {
$scope.test = "testing";
};
List.html:
<h1>Hello: {{test}}</h1>
I am currently running the Localhost server via Visual Studio 2013. Please Help, Thanks!
You would need to include ngRoute inorder to use angular routing. So include ngRoute in your module as a dependency.
var TodoApp = angular.module("TodoApp", ["ngResource", "ngRoute"]).
config(.....
Also remember to include angular-route.js unless you are using very old version of angular that comes with routing as well. You can refer to the cdn http://code.angularjs.org/x.y.z/angular-route.js or download the file.
Plnkr
I am having issues trying to show a partial html on my index.html file (Nothing is displayed).
Please see my index.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"/>
<link rel="stylesheet" href="css/animations.css"/>
<link rel="stylesheet" href="css/bootstrap.css"/>
<script src="js/jquery-1.11.0.min.js"></script>
<script src="lib/angular/angular.js"></script>
<script src="lib/angular/angular-animate.js"></script>
<script src="lib/angular/angular-route.js"></script>
<script src="lib/angular/angular-resource.js"></script>
<script src="js/app.js"></script>
<script src="js/animations.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>
</head>
<body>
<li>
Show People
</li>
<div ng-view></div>
</body>
</html>
Then I try to load people.html that is on partials directory, using routing on app.js:
'use strict';
// Declare app level module which depends on filters, and services
var myApp = angular.module('myApp', ['ngRoute', 'filters', 'services', 'directives', 'controllers']);
myApp.config(['$routeProvider',
function($routeProvider) {
$routeProvider.when('/people', {
templateUrl : 'patials/people.html',
controller : 'PeopleController'
}).otherwise({
redirectTo : '/people'
});
}]);
If I replace the ng-view part on my index.html with my template file content, everything displays fine, so I dont think I have an issue on my controller declarations.
Can you take a look and help me figuring out what's wrong?
Thanks!
You are using var myApp = angular.module('myApp', []); inside your controller. If you add an array as a second parameter in angular.module, the module is automatically created as a new one and overrides the previous one with the same name, so the config is not working anymore, because in your code it is defined on a different module.
Just change the code in the PeopleController definition from
var myApp = angular.module('myApp', []);
to
var myApp = angular.module('myApp');
and it should work
edited plunk:
http://plnkr.co/edit/bK9vHSPxKmijhlLPS5C5?p=preview