I have a Simple page like
<body ng-app="myApp">
<div>
<h1>Courses</h1>
<ul class="nav">
<li>Route 1</li>
</ul>
</div>
<div ui-view>
</div>
<script src="Scripts/angular.js"></script>
<script src="Scripts/angular-ui-router.min.js"></script>
<script src="Scripts/app/app.js"></script>
And a app.js file like :
var myApp = angular.module('myApp', ['ui.router']);
var configFunction = function ($stateProvider, $urlRouterProvider) {
$stateProvider
.state('route1', {
url: "/courses",
templateUrl: "Scripts/app/views/Course/CourseList.html"
});
}
configFunction.$inject = ['$stateProvider', '$urlRouterProvider'];
myApp.config(configFunction);
and in my CourseList.html I have :
<script src="../../Controller/Course/CourseController.js"></script>
<div ng-controller="CourseController">
<h1>index</h1>
<table class="table table-striped">
<thead>
<tr>
<td>Id#</td>
<td>Name</td>
</tr>
</thead>
<tbody ng-repeat="course in courses |orderBy:'Id' ">
<tr>
<td>{{course.Id}}</td>
<td>{{course.Name}}</td>
</tr>
</tbody>
</table>
</div>
And my controller code:
angular.module('myApp').controller('CourseController', function ($scope, $http) {
$scope.course = {};
$http.get('/api/Course').success(function (data) {
$scope.courses = data;
});
});
Now when I click on Route 1 link I give this Error:
Error: [ng:areq] Argument 'CourseController' is not a function, got undefined
And when I comment controller refrence in CourseList.html and add it to index.html it's worke!!!
Is there any way that I dont refrence all controllers in Index.html?
You need to call your controller script file in your main screen
<script src="Scripts/angular.js"></script>
<script src="Scripts/angular-ui-router.min.js"></script>
**//call your controller in here.**
<script src="../../Controller/Course/CourseController.js"></script>(Check
the url is correct)
<script src="Scripts/app/app.js"></script>
Because your controller does not defined before your html is defined on stateProvider
Related
I'm trying to get Angular to display JSON data that I've managed to pull from a database and console also printing the data as expected, but table ng-repeat not displaying the data. even outside of the table data display properly. {{contactlists[0].name}}
<!DOCTYPE>
<html ng-app="nodeapp">
<head>
<title>AngularJs with Nodejs</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">
</head>
<body>
<div class="container" ng-controller="nodeappctrl">
<div class="row">
<h1>Angularjs with api's</h1>
<p>{{contactlists[0].name}}</p>
</div>
</div>
<div class="container">
<div class="row">
<table class="table">
<thead>
<tr>
<th>SNo</th>
<th>Name</th>
<th>Email</th>
<th>Phone</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="contact in contactlists">
<td>{{$index}}</td>
<td>{{contact.name}}</td>
<td>{{contact.email}}</td>
<td>{{contact.number}}</td>
</tr>
</tbody>
</table>
</div>
</div>
<script src="https://code.angularjs.org/1.4.9/angular.min.js"></script>
<script type="text/javascript">
var nodeapp = angular.module('nodeapp', []);
nodeapp.controller('nodeappctrl', ['$scope', '$rootScope', '$log', '$http',
function($scope, $rootScope, $log, $http) {
var contactlist = {};
$http.get('/contactlist').success(function(data) {
$scope.contactlists = data;
//$scope.$apply();
console.log(JSON.stringify($scope.contactlists), null,2);
});
}
]);
</script>
<!--
// dummy data
var contactlists =[
{
name: 'Rajesh',
email: 'raj#g.com',
number: '11 - 111 - 11111'
}, {
name: 'Rajesh2',
email: 'raj2#g.com',
number: '22 - 222 - 222222'
}, {
name: 'Rajesh3',
email: 'raj3#g.com',
number: '33 - 333 - 333333'
}
]-->
</body>
</html>
</html>
Place ng-controller inside the <body> tag.
You used it in the <div> which is closed, so it's can't be available to the rest bottom of the code.
<body ng-controller="nodeappctrl">
//your code here..
</body>
The problem is here:
<div class="container" ng-controller="nodeappctrl">
The nodeappctrl controller should be applied to a tag that is a parent of where you're accessing its scope. As you can see, the table is a child of a sibling of the element the controller is bound to.
For example, move ng-controller="nodeappctrl" to the body tag.
I've tried to get to know how to work with Angular but have no luck. I don't know what i do wrong.
Here is my index.html:
<html ng-app="app">
<head>
<meta charset="utf-8">
<title>testAngular</title>
<link rel="stylesheet" type="text/css" href="core/css/style.css">
<script src="core/js/angular.min.js"></script>
<script src="core/js/angularRoute.min.js"></script>
<script src="Controllers/users.js"></script>
<script src="Services/router.js"></script>
</head>
<body>
<div class="container">
<p class="well">
Home
Users
Shop
</p>
<h3>Users</h3>
<hr class="vau">
<form>
<input class="form-control" type="text" ng-model="search">
</form>
<div ng-view=""></div>
</div>
</body>
</html>
Here is my router.js
'use strict';
angular.module('app', ['ngRoute'])
.config(function($routeProvider){
$routeProvider
.when('/', {
templateUrl: 'tpl/home.html'
})
.when('/users', {
templateUrl: 'tpl/users.html',
controller: 'userCtrl'
})
.when('/shop', {
templateUrl: 'tpl/shop.html'
})
.otherwise({ redirectTo: '/' });
});
Here is my users.js
'use strict';
angular.module('app', ['ngRoute'])
.controller('userCtrl', function($scope, $http){
$http.get('dataModel/users.json').then(function(res){
$scope.users = res.data;
});
});
and this is my users.html
<h3>Hello Users</h3>
<div ng-controller="userCtrl">
<table class="table table-hover">
<tr>
<th>pId</th>
<th>Vorname</th>
<th>Nachname</th>
<th>E-Mail</th>
<th>Abteilung</th>
</tr>
<tbody>
<tr ng-repeat="user in users | filter:search">
<td>{{user.pId}}</td>
<td>{{user.fName}}</td>
<td>{{user.lName}}</td>
<td>{{user.email}}</td>
<td>{{user.abtelung}}</td>
</tr>
</tbody>
</table>
</div>
<p>hello Users</p>
I don't know why the controller is not working. thank you very much for any idea and help.
When you are doing this:
angular.module('app', ['ngRoute'])
You are creating a new module named app, and overriding any existing module with the same name.
Instead, create the module once like that, and on other files when you want to retrieve the model, do it like:
angular.module('app')
I am trying to create a simple views with angualrjs + ngRoute.
Why it doesn't work for me???
Please, can anyone look at my Plunker example, and explain to me what am I doing wrong?
my index.html:
<!DOCTYPE html>
<html>
<head>
<title>Angular Route training</title>
<meta charset="utf-8" />
<link rel="stylesheet" type="text/css" href="style.css">
<script src="https://code.angularjs.org/1.3.5/angular.js"></script>
<script src="https://code.angularjs.org/1.3.5/angular-route.js"></script>
<script src="js/app.js"></script>
</head>
<body>
<div class="main_container">
<div class="inner" ng-app="app">
<div class="container" ng-controller="MainController">
<span ng-cloak>{{text}}</span>
</div>
</div>
<div class="inner" ng-app="views">
<h3>Views Menu</h3>
<ul>
<li>Back to HOME</li>
<li>Our Developers</li>
<li>Our Designers</li>
</ul>
<div ng-view></div>
</div>
</div>
</body>
</html>
this is app.js:
var app = angular.module('app', []);
var views = angular.module('views', ['ngRoute']);
views.config(function($routeProvider, $locationProvider){
$routeProvider.
when('#/developers', {templateUrl: 'views/dev.html', controller: 'DevCtrl'}).
when('#/designers',{templateUrl: 'views/design.html',controller: 'DesignCtrl'}).
otherwise({ redirectTo: 'index.html' });
$locationProvider.html5Mode(true);
});
app.controller('MainController', function($scope) {
$scope.text = "Hello World!!!!";
});
views.controller('DevCtrl', function($scope) {
$scope.developers = [
{"name":"John", "family":"Doe"},
{"name":"Anna", "family":"Smith"},
{"name":"Peter", "family":"Jones"},
{"name":"Alex", "family":"Volkov"},
{"name":"Yaniv", "family":"Smith"},
]
});
views.controller('DesignCtrl', function($scope) {
$scope.designers = [
{"name":"Inna", "family":"Doe"},
{"name":"Anna", "family":"Smith"},
{"name":"Yafit", "family":"Jones"}
]
});
design.html:
<div id="designers" ng-controller="DesignCtrl">
<h3>Designers List</h3>
<table>
<tr>
<th>Name</th>
<th>Family</th>
</tr>
<tr ng-repeat="d in designers">
<td>{{d.name}}</td>
<td>{{d.family}}</td>
</tr>
</table>
</div>
and dev.html
<div id="developers" ng-controller="DevCtrl">
<h3>Developers List</h3>
<table>
<tr>
<th>Name</th>
<th>Family</th>
</tr>
<tr ng-repeat="dev in developers">
<td>{{dev.name}}</td>
<td>{{dev.family}}</td>
</tr>
</table>
</div>
thanks
The problem is incorrect usage of ng-app. Only declare ng-app once for your application, usually on the html element.
Then declare other modules as dependencies of your main module.
I put the ng-app declaration on the html tag and put your ng-routing in the app module, getting rid of the views module.
http://plnkr.co/edit/btL2QMyHxhDLH7cxZ1YV
var app = angular.module('app', ['ngRoute']);
app.config(function($routeProvider, $locationProvider){
$routeProvider.
when('/developers', {templateUrl: 'dev.html', controller: 'DevCtrl'}).
when('/designers',{templateUrl: 'design.html',controller: 'DesignCtrl'}).
otherwise({ redirectTo: '/index' });
// $locationProvider.html5Mode(true);
});
<html ng-app="app">
You can also put the view-logic in a separate module, but usually you will then also put it in a different file.
The html5mode is disabled because it triggered an error (it's a little bit tricky to make that work).
Note: it actually is possible to use multiple ng-app by manually bootstrapping them, but you really shouldn't do this unless you have a very good reason for it.
I think there is a problem way you declare the dependency within your app.js file and also console is complaining about $locationProvider.html5Mode(true);
If you want to declare the separate app you should do something like this
var app = angular.module('app', []);
var views = angular.module('views', []);
var mainApp = angular.module('mainApp', ['ngRoute','app','views']);
mainApp.config(function($routeProvider, $locationProvider){
$routeProvider.
when('/developers', {templateUrl: 'dev.html', controller: 'DevCtrl'}).
when('/designers',{templateUrl: 'design.html',controller: 'DesignCtrl'}).
otherwise({ redirectTo: 'index.html' });
//$locationProvider.html5Mode(true);
});
And here is the full working plunker http://plnkr.co/edit/LvPhShkkgTFQsFJ44Ggo?p=preview
I'm having trouble using routeProvider to display a modal window. I am displaying a table list of ingredients and hoping that by clicking on an ingredient, I can display an "update" modal. The table displays properly and I can even view a single ingredient outside of a modal context but as soon as I try and get the modal working everything falls apart - in fact, the modal doesn't even properly receive its "ingredient" variable. When clicking on a table row the HTML for the modal is displayed like it's a separate page.
app.js:
angular.module('IngredientsApp', [
'IngredientsApp.controllers',
'IngredientsApp.services',
'ngRoute',
'ui.bootstrap'
]).config(['$routeProvider', function($routeProvider) {
$routeProvider.
when("/ingredients", {templateUrl: "partials/ingredients.html", controller: "ingredientsController"}).
when("/ingredient/:id", {templateUrl: "partials/ingredient.html", controller: "ingredientController"}).
otherwise({redirectTo: '/ingredients'});
}]);
services.js:
angular.module('IngredientsApp.services', []).factory('ingredientAPIservice', function($http) {
var ingredientAPI = {};
ingredientAPI.getIngredients = function() {
return $http.get('/ingredient');
}
ingredientAPI.getIngredient = function(id) {
return $http.get('/ingredient/'+id+'/edit');
}
return ingredientAPI;
});
index.html
<!doctype html>
<html lang="en">
<head>
<title>Our Recipes</title>
<script type="text/javascript" src="/js/angular.min.js"></script>
<script type="text/javascript" src="/js/angular-route.min.js"></script>
<script type="text/javascript" src="/js/angular-bootstrap.min.js"></script>
<script type="text/javascript" src="/js/app.js"></script>
<script type="text/javascript" src="/js/services.js"></script>
<script type="text/javascript" src="/js/controllers.js"></script>
<link rel="stylesheet" type="text/css" href="/css/styles.css" />
</head>
<body ng-app="IngredientsApp">
<ng-view></ng-view>
</body>
</html>
ingredients.html
<table class="table table-striped table-bordered">
<thead>
<tr>
<th>Existing Ingredients</th>
<th><input type="text" ng-model="descriptionFilter" placeholder="Search..."/></th>
</tr>
</thead>
<tbody>
<tr ng-repeat="i in ingredientsList | filter: searchFilter">
<td>
<a href="/#/ingredient/{{i.Id}}">
{{i.Description}}
</a>
</td>
<td>Created at {{i.CreatedAt}}</td>
</tr>
</tbody>
</table>
ingredient.html
<script type="text/ng-template">
<div class="modal-header">
<h3 class="modal-title">I'm a modal!</h3>
</div>
<div class="modal-body">
{{ingredient.Description}}
</div>
<div class="modal-footer">
<button class="btn btn-primary" ng-click="ok()">OK</button>
<button class="btn btn-warning" ng-click="cancel()">Dismiss</button>
</div>
</script>
controllers.js:
angular.module('IngredientsApp.controllers', []).controller('ingredientsController', function($scope, ingredientAPIservice) {
$scope.descriptionFilter = null;
$scope.ingredientsList = [];
$scope.searchFilter = function (ingredient) {
var keyword = new RegExp($scope.descriptionFilter, 'i');
return !$scope.descriptionFilter || keyword.test(ingredient.Description);
};
ingredientAPIservice.getIngredients().success(function (response) {
//Dig into the responde to get the relevant data
$scope.ingredientsList = response;
});
})
var ingredientController = function($scope, $routeParams, $modal, ingredientAPIservice) {
$scope.id = $routeParams.id;
$scope.ingredient = null;
ingredientAPIservice.getIngredient($scope.id).success(function (response) {
$scope.ingredient = response;
$scope.open = function (size) {
var modalInstance = $modal.open({
templateUrl: 'partials/ingredient.html',
controller: 'ingredientModalController',
size: size,
resolve: {
ingredient: function () {
console.log($scope.ingredient);
return $scope.ingredient;
}
}
});
}
});
}
var ingredientModalController = function($scope, $modalInstance, ingredient) {
$scope.ingredient = ingredient;
$scope.ok = function () {
$modalInstance.close($scope.ingredient);
};
$scope.cancel = function () {
$modalInstance.dismiss('cancel');
};
}
I believe your issue is in app.js. Your route change causes the modal template (partials/ingredients.html) to be the only template displayed in ui-view. For the modal to work, you need to have the ingredients template nested within the ingredient template so both templates can be displayed at the same time. There are multiple ways to accomplish this.
If you are willing to give up the route change, just remove
when("/ingredient/:id", {templateUrl: "partials/ingredient.html", controller: "ingredientController"})
If you need the url to change, then I would look at doing it manually through the build in location service. https://docs.angularjs.org/guide/$location
You could just call a function that changes the url on click of an ingredient.
While using debug on Chrome, it keeps showing this error: uncaught object, on angular.js:36.
What am I doing wrong? :/
Thanks for any help :)
Module and Resource objects (services.js)
var services = angular.module('ngdemo.services', ['ngResource']);
services.factory('ProvidersFactory', function ($resource) {
return $resource('http://devfz.azurewebsites.net/api/providers/', {}, {
query: { method: 'GET', isArray: true },
})
});
Controller (controller.js)
var app = angular.module('ngdemo.controllers', []);
app.controller('ProviderListCtrl', ['$scope', 'ProvidersFactory', '$location',
function ($scope, ProvidersFactory, $location) {
$scope.providers = ProvidersFactory.query();
}]);
app.js
angular.module('ngdemo', ['ngdemo.filters', 'ngdemo.services', 'ngdemo.directives', 'ngdemo.controllers']).
config(['$routeProvider', function ($routeProvider) {
$routeProvider.when('/provider-list', { templateUrl: '/provider-list.html', controller: 'ProviderListCtrl' });
$routeProvider.otherwise({ redirectTo: '/provider-list' });
}]);
HTML
<!DOCTYPE html>
<html ng-app="ngdemo" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Providers</title>
<link href="Content/bootstrap.min.css" rel="stylesheet">
<script src="Scripts/Vendor/angular.min.js"></script>
<script src="Scripts/Vendor/angular-resource.js"></script>
<script src="controller.js"></script>
<script src="services.js"></script>
<script src="app.js"></script>
</head>
<body role="document" style="padding-top: 70px; padding-bottom: 30px">
<div class="container body-content" role="main">
<div ng-controller="ProviderListCtrl">
<h2>Providers</h2>
<hr>
<div style="width:60%">
<table class="table table-striped table-condensed">
<thead>
<tr>
<th style="min-width: 30px; width: 30px;">Id</th>
<th style="min-width: 100px;">Name</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="provider in providers">
<td valign="middle">Test: {{provider.Id}}</td>
<td valign="middle">Test: {{provider.Name}}</tdvalign>
<td valign="middle" align="right" width="40px"><a ng-click="" class="btn btn-small btn-primary">edit</a></td>
<td valign="middle" align="right" width="50px"><a ng-click="" class="btn btn-small btn-danger">delete</a></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</body>
</html>
Try to debug in Safari browser. For me it gets more information about this error. In my case I use angular-seed app and rename 'myApp' module to 'myNameOfAppApp'.
I received this error in Safari:
Error: [$injector:modulerr] Failed to instantiate module myApp due to:
[$injector:nomod] Module 'myApp' 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.
I try to find by 'mayApp' key word and after rename in index.html Error was fixed.
In order to use $routeProvider you need to include (and declare as a dependency) the ngRoute module.
See, this answer for more info.