I'm getting the following message error: Argument 'MainController' is not a function, got undefined
Here is my mainController.js file:
angular.module("elcomaApp", []).controller('MainController', ['$scope', 'ElcomaService', function($scope, ElcomaService){
$scope.name = 'Natanael Santos';
console.log($scope.name);
ElcomaService.sucess(function(data){
$scope.elcomaData = data;
})
}]);
Here is my app.js file:
var app = angular.module("elcomaApp", ['MainController', 'ngMaterial', 'ngRoute']);
app.config(function($routeProvider){
$routeProvider.when('/', {
controller: 'MainController',
templateUrl: 'views/timeline.html'
}).otherwise({
redirectTo: '/'
});
});
Here is my service.js file:
angular.module("elcomaApp", []).factory('ElcomaService', ['$http', function($http){
return $http.get('http://vagalumewifi.com.br/timeline.json')
.success(function(data){
})
.error(function(err){
return err;
});
}]);
And my index.html file:
<!DOCTYPE html />
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Angular Material style sheet -->
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/angular_material/1.1.0/angular-material.min.css">
</head>
<body ng-app="elcomaApp" ng-controller="MainController" ng-cloak>
<md-toolbar class="md-hue-2">
<div class="md-toolbar-tools">
<md-button class="md-icon-button" aria-label="Settings" ng-disabled="true">
<md-icon md-svg-icon="img/icons/menu.svg"></md-icon>
</md-button>
<h2>
<span>{{ name }}</span>
</h2>
<span flex></span>
<md-button class="md-icon-button" aria-label="Favorite">
<md-icon md-svg-icon="img/icons/favorite.svg" style="color: greenyellow;"></md-icon>
</md-button>
<md-button class="md-icon-button" aria-label="More">
<md-icon md-svg-icon="img/icons/more_vert.svg"></md-icon>
</md-button>
</div>
</md-toolbar>
<div ng-view></div>
<!-- Angular Material requires Angular.js Libraries -->
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-animate.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-aria.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-messages.min.js"></script>
<!-- Angular Material Library -->
<script src="http://ajax.googleapis.com/ajax/libs/angular_material/1.1.0/angular-material.min.js"></script>
<script src="app.js"></script>
<script src="controllers/mainController.js"></script>
<script src="services/elcomaService.js"></script>
</body>
</html>
var app = angular.module("elcomaApp", ['MainController', 'ngMaterial', 'ngRoute']);
In this statement , remove MainController.
It is already defined on elcomaApp and no need to DI for it.It is always available.
Correction :
`
angular.module("elcomaApp", []).factory` // will override the module defination
`angular.module("elcomaApp").factory('` //correct way
In your app.js file, the first line
var app = angular.module("elcomaApp", ['MainController', 'ngMaterial', 'ngRoute']);
Is saying that your app is dependent on the 'MainController' module, which is in turn dependent on your app. It won't work. You only need to add dependencies in to your app for external modules. Your module is "elcomaApp", and already includes your 'MainController'
Change that line to
var app = angular.module("elcomaApp", ['ngMaterial', 'ngRoute']);
And it should work.
Related
I have constructed the following routes in angular.
ROUTES
var app = angular.module("app",['ngRoute']);
app.config([
'$routeProvider', '$locationProvider',
function($routeProvider,$locationProvider) {
$locationProvider.html5Mode(true);
$routeProvider
.when('/items/', {
templateUrl: '/app/items/index.html',
controller: 'ItemsController'
})
.when('/', {
templateUrl: '/app/home/index.html',
controller: 'HomeController'
})
}
]);
Each route has its own template and a controller.
TEMPLATES
items/index.html
<h2>Items</h2>
<div ng-repeat ="item in items">
{{item}}
</div>
home/index.html
<h2>Home</h2>
<p>{{message}}</p>
index.html
<!DOCTYPE html>
<html ng-app="app">
<head>
<title>Configuration and Routing</title>
<link rel = "stylesheet" href ="bootstrap.min.css">
<base href="/" />
</head>
<body>
<div class ="container">
<h1>Configuration and Routing</h1>
<div class = "navbar">
<ul class ="nav navbar-nav">
<li>Home</li>
<li>Items</li>
</ul>
</div>
<div ng-view>
<h4>{{ message }}</h4>
</div>
</div>
<script src = "angular.min.js"></script>
<script src="angular-route.min.js"></script>
<script src ="./app/app.js"></script>
</body >
</html>
CONTROLLERS
ItemsController
app.controller('ItemsController',[
'$scope',
function($scope) {
$scope.items = ['First','Second','Third']
}
])
HomeController
app.controller('HomeController', [
'$scope',
function($scope) {
$scope.message = 'Welcome!';
}
]);
The problem i have is the browser shows only the partial templates but not the data(i.e 'message' and 'items') from the controllers which it is supposed to show under the div with ng-view attribute.I also get the following errors from the browser "Argument 'HomeController' and ItemsController is not a function got undefined".
How can i resolve this ?
I am trying to develop an application using angular js .it a simple routing .when i add the angular by url like this :
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
<script src="~/js/app.js"></script>
My application works fine ,but when i add like this :
<script src="~/Scripts/angular.min.js"></script>
<script src="~/Scripts/angular-route.min.js"></script>
<script src="~/js/app.js"></script>
I got this error :
angular.js:68 Uncaught Error: [$injector:modulerr] Failed to instantiate module sampleApp due to:
Error: [$injector:unpr] Unknown provider: $routeProvide
Here is my app.js
//Define an angular module for our app
var sampleApp = angular.module('sampleApp', []);
//Define Routing for app
//Uri /AddNewOrder -> template add_order.html and Controller AddOrderController
//Uri /ShowOrders -> template show_orders.html and Controller AddOrderController
sampleApp.config(['$routeProvider',
function ($routeProvider) {
$routeProvider.
when('/AddNewOrder', {
templateUrl: 'templates/add_order.html',
controller: 'AddOrderController'
}).
when('/ShowOrders', {
templateUrl: 'templates/show_orders.html',
controller: 'ShowOrdersController'
}).
otherwise({
redirectTo: '/AddNewOrder'
});
}]);
sampleApp.controller('AddOrderController', function ($scope) {
$scope.message = 'This is Add new order screen';
});
sampleApp.controller('ShowOrdersController', function ($scope) {
$scope.message = 'This is Show orders screen';
});
Here is my html code :
<!DOCTYPE html>
<html lang="en">
<head>
<title>AngularJS Routing example</title>
</head>
<body ng-app="sampleApp">
<div class="container">
<div class="row">
<div class="col-md-3">
<ul class="nav">
<li> Add New Order </li>
<li> Show Order </li>
</ul>
</div>
<div class="col-md-9">
<div ng-view></div>
</div>
</div>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
<script src="~/js/app.js"></script>
</body>
</html>
You will need to add the reference to the module (angular route module) that your module is dependent on. The error says that $routeProvide is unknown to it and that is available in the angular route module.
//Define an angular module for our app
var sampleApp = angular.module('sampleApp', ['ngRoute']);
I would like to have a link back to the landing page in the header of my app's views but obviously not on the landing page itself. How would I optimally implement that in Angular.js?
Should I use $location.url() to determine the view or should I use bind-html or something else altogether?
Thanks for some tips and help!
EDIT
my current code, I thought I'd made it a little easier since each view has its own controller, however the link is always shown:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<style>
</style>
</head>
<body ng-app="myApp">
<div data-role="page" id="pageone">
<div data-role="header">
<h1>WELCOME!</h1>
BACK TO HOME
</div>
<div ng-view></div>
<div data-role="footer">
<h1>footer</h1>
</div>
</div>
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular-route.min.js"></script>
<script>
'use strict';
var app = angular.module('myApp', ['ngRoute']);
app.config(function($routeProvider, $locationProvider) {
$locationProvider.html5Mode(true);
$locationProvider.hashPrefix('!');
$routeProvider
.when('/', {
templateUrl : 'views/home.html',
controller : 'HomeController'
})
.when('/other', {
templateUrl : 'views/other.html',
controller : 'OtherController'
});
});
app.controller('HomeController', function($scope, $http, $location, $route) {
$scope.isLandingPage = true;
});
app.controller('OtherController', function($scope, $route) {
$scope.info = 'Other';
});
</script>
</body>
</html>
The link is always shown because your div in which is link doesn't have any controller attached.
You can do it this way:
app.controller('landingPageCtrl', ['$scope', '$location', function($scope, $location){
$scope.isLandingPage = function(){
return ($location.url() == '/home') ? true : false;
}
}]);
then use ng-show to hide or show link depending on location
<div ng-controller="landingPageCtrl" data-role="header">
<h1>WELCOME!</h1>
BACK TO HOME
</div>
I like to check for my route (or state in ui.router).
$scope.isLandingPage = $state.current.name === 'home';
and use <a ng-show="!isLandingPage">Link</a>
I am new to angularjs and these are the files I have created.
I have tried my best but could not run the above code.
myApp(Folder)
- app.js
- controller.js
- index.html
- phone-detail.html
- phone-list.html
The Home page is the phone-list.html and when clicked on a phone routes to a phone-detail.html page.
app.js
var phonecatApp = angular.module('phonecatApp', ['ngMaterial','phonecatControllers','$routeProvider']);
phonecatApp.config(['$routeProvider',
function($routeProvider) {
$routeProvider.
when('/phones', {
templateUrl: 'phone-list.html',
controller: 'PhoneListCtrl'
}).
when('/phones/:phoneId', {
templateUrl: 'phone-detail.html',
controller: 'PhoneDetailCtrl'
}).
otherwise({
redirectTo: '/phones'
});
}]);
controller.js
var phonecatControllers = angular.module('phonecatControllers', []);
phonecatControllers.controller('PhoneListCtrl', ['$scope',
function ($scope) {
$scope.phones =
[{"Device":"ipad mini","Model":"MD528LL/A"},
{"Device":"ipadair","Model":"MD785LL/A"}]
}]);
phonecatControllers.controller('PhoneDetailCtrl', ['$scope', '$routeParams',
function($scope, $routeParams) {
$scope.Model = $routeParams.Model;
}]);
index.html
<!doctype html>
<html lang="en" ng-app="phonecatApp">
<head>
<!-- Angular Material CSS now available via Google CDN; version 0.10 used here -->
<!-- Angular Material Dependencies -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.1/angular-route.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.7/angular-resource.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/0.10.0/angular-material.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-animate.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-aria.min.js"></script>
<script src="controller.js"></script>
<script src="app.js"></script>
</head>
<body>
<div ng-view>
</div>
</body>
</html>
phone-list.html
<div class="mainContent" style="margin:5%">
<li ng-repeat="phone in phones" style="float:left; margin:40px" >
<md-content style="padding:0px; overflow-y: hidden">
<md-card style="width:300px; height:300px; margin:0px" >
<img ng-src="{{phone.image}}" class="md-card-image" style="height:40%" alt="image caption" >
<md-card-content style="padding:0; height:25%">
<h6 class="md-title">{{phone.Device}}</h6> <hr style="opacity:0.5">
</md-card-content>
<md-card-footer class="md-actions" layout="row" layout-align="center" style="padding:0">
<md-button class="md-raised">Action 1</md-button>
<md-button class="md-raised">Action 2</md-button>
</md-card-footer>
</md-card>
</md-content>
</li>
</div>
phone-detail.html
{{phone.Device}}
You should inject ngRoute module instead of $routeProvider in :
var phonecatApp = angular.module('phonecatApp', ['ngMaterial','phonecatControllers','$routeProvider'])
Also make sure you included the sources of angular-route.js as angular routing is separated from angular sources.
Edit: From the index.html you posted I see you included angular-route.js but it appears you are missing the script of angular-material, so be sure to add :
<script src="https://ajax.googleapis.com/ajax/libs/angular_material/0.10.0/angular-material.min.js"></script>
So I'm trying to run an Angular app with a Rails API on Chrome.
I'm trying to render very simple views from their respective controllers.
My users.js controller:
'use strict';
var rantlyApp = angular.module('rantlyApp', ['ngRoute']);
rantlyApp.config(['$routeProvider', function($routeProvider) {
$routeProvider
.when('/users', {
templateUrl: '/views/users.html',
controller: 'UsersCtrl'
});
}])
.controller('UsersCtrl', ['$scope', '$http', function ($scope, $http) {
$http.get('http://localhost:3000/api/users/').success(function(data) {
$scope.users = data.users;
});
$scope.foos = ['foo', 'bar', 'baz'];
}]);
users.html view:
<div ng-controller='UsersCtrl'>
<h1>Users</h1>
<ul ng-repeat="user in users">
<li>{{user.first_name}}</li>
</ul>
<ul ng-repeat="foo in foos">
<li>{{foo}}</li>
</ul>
</div>
The users page renders fine, and I get all the data I want. But when I try to load my main page, I get nothing. No errors, just a blank screen (though the navbar and everything else I have in my index.html loads properly).
My main.js controller:
'use strict';
var rantlyApp = angular.module('rantlyApp', ['ngRoute']);
rantlyApp.config(['$routeProvider', function($routeProvider) {
$routeProvider
.when('/', {
templateUrl: '/views/main.html',
controller: 'MainCtrl'
});
}])
.controller('MainCtrl', ['$scope', function ($scope) {
$scope.awesomeThings = [
'foo',
'bar',
'baz'
];
$scope.addThing = function() {
$scope.awesomeThings.push($scope.newThing);
$scope.newThing = '';
};
}]);
main.html view:
<div ng-controller="MainCtrl">
<form ng-submit='addThing()'>
<div class="form-horizontal">
<input type="text" ng-model="newThing">
<input type="submit" value="Add Thing">
</div>
</form>
<li ng-repeat='thing in awesomeThings'>
{{thing}}
</li>
<h4>Awesome things: {{awesomeThings}}</h4>
<h4>Cool things: {{coolThings}}</h4>
</div>
When I look at the inspector in the Network tab for the "/users" route, it loads users.html. This doesn't happen for the "/" route. I expect it to load main.html, but I get nothing.
The strange thing is, when I copy all of my code from my main.js and just throw it into my users.js, everything works fine. This told me maybe I wasn't loading it properly into the index.html page, but it seems to me that I am.
index.html:
(scripts are at the bottom)
<!doctype html>
<html class="no-js">
<head>
<meta charset="utf-8">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css" />
<link rel="stylesheet" href="styles/main.css">
</head>
<body ng-app="rantlyApp">
<header class='nav-header' role='navigation'>
<div class='content'>
<a class="navbar-brand" href="#/">Rantly</a>
<nav>
Rants
Users
Styleguide
Sign Up
</nav>
</div>
</header>
<div class="container">
<div ng-view=""></div>
</div>
<!-- Google Analytics: change UA-XXXXX-X to be your site's ID -->
<script>
!function(A,n,g,u,l,a,r){A.GoogleAnalyticsObject=l,A[l]=A[l]||function(){
(A[l].q=A[l].q||[]).push(arguments)},A[l].l=+new Date,a=n.createElement(g),
r=n.getElementsByTagName(g)[0],a.src=u,r.parentNode.insertBefore(a,r)
}(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-XXXXX-X');
ga('send', 'pageview');
</script>
<script src="bower_components/jquery/dist/jquery.js"></script>
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/bootstrap/dist/js/bootstrap.js"></script>
<script src="bower_components/angular-animate/angular-animate.js"></script>
<script src="bower_components/angular-cookies/angular-cookies.js"></script>
<script src="bower_components/angular-resource/angular-resource.js"></script>
<script src="bower_components/angular-route/angular-route.js"></script>
<script src="bower_components/angular-sanitize/angular-sanitize.js"></script>
<script src="bower_components/angular-touch/angular-touch.js"></script>
<!-- endbower -->
<!-- endbuild -->
<!-- build:js({.tmp,app}) scripts/scripts.js -->
<script src="scripts/app.js"></script>
<script src="scripts/services.js"></script>
<script src="scripts/controllers/main.js"></script>
<script src="scripts/controllers/users.js"></script>
<script src="scripts/controllers/about.js"></script>
</body>
</html>
I'm extremely new to Angular so it's quite possible I'm missing a fundamental step in setting up the controllers. Since my code works based purely off of which file I have it in, I have a feeling I'm not configuring something properly in Angular.
Any help is greatly appreciated. Thanks!
When you write
var rantlyApp = angular.module('rantlyApp', ['ngRoute']);
You are creating a new module called rantlyApp and removing any old module with the same name. So when the users.js script runs it overwrites what you defined in main.js.
Instead define your module once, and retrieve it with:
var rantlyApp = angular.module('rantlyApp');
Check the documentation.