AngularJS - Uncaught Error: [$injector:modulerr] when trying to combine modules - javascript

I'm trying learn angular by using multiple modules for a html page. One module for routing and the others for displaying content.
For example, here i have 3 modules in app.js. I have routeApp for the routes, comentUpp for displaying content. and combineApp to combine everything.
var routeApp = angular.module('routeApp',['ngRoute']);
routeApp.config(function($routeProvider){
$routeProvider
.when('/', {
templateUrl : 'views/comment.php',
});
});
var commentUpp = angular.module('commentUpp',['mainCtrl', 'commentService']);
var combineApp = angular.module('combineApp',['routeApp','commentUpp'])
and in index.php i have it like this:
<!DOCTYPE html>
<html ng-app="combineApp" >
<head>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" />
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.0.0/css/font-awesome.css" />
<!-- SPELLS -->
<!-- load angular and angular route via CDN -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.3/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.3/angular-resource.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.3/angular-route.min.js"> </script>
<script src="js/app.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
</head>
<body >
<!-- HEADER AND NAVBAR -->
<header>
<nav class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="/">Angular Routing Example</a>
</div>
<ul class="nav navbar-nav navbar-right">
<li><i class="fa fa-home"></i> Home</li>
<li><i class="fa fa-shield"></i> About</li>
<li><i class="fa fa-comment"></i> Contact</li>
</ul>
</div>
</nav>
</header>
<!-- MAIN CONTENT AND INJECTED VIEWS -->
<div id="main" >
<div ng-view></div>
</div>
</body>
</html>
As you can see i'm trying to inject comment.php into index.php.
below is my comment.php
<html>
<div ng-controller="mainController">
<div class="col-md-8 col-md-offset-2">
<!-- PAGE TITLE =============================================== -->
<div class="page-header">
<h2>Laravel and Angular Single Page Application</h2>
<h4>Commenting System</h4>
</div>
<!-- NEW COMMENT FORM =============================================== -->
<form ng-submit="submitComment()"> <!-- ng-submit will disable the default form action and use our function -->
<!-- AUTHOR -->
<div class="form-group">
<input type="text" class="form-control input-sm" name="author" ng-model="commentData.author" placeholder="Name">
</div>
<!-- COMMENT TEXT -->
<div class="form-group">
<input type="text" class="form-control input-lg" name="comment" ng-model="commentData.text" placeholder="Say what you have to say">
</div>
<!-- SUBMIT BUTTON -->
<div class="form-group text-right">
<button type="submit" class="btn btn-primary btn-lg">Submit</button>
</div>
</form>
<!-- LOADING ICON =============================================== -->
<!-- show loading icon if the loading variable is set to true -->
<p class="text-center" ng-show="loading"><span class="fa fa-meh-o fa-5x fa-spin"></span></p>
<div class="comment" ng-hide="loading" ng-repeat="comment in comments">
<h3>Comment #{{ comment.id }} <small>by {{ comment.author }}</h3>
<p>{{ comment.text }}</p>
<p>Delete</p>
</div>
</div>
</div>
</html>
for some reason it shows
Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.6.3/$injector/modulerr?p0=combineApp&p1=Error…ogleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.6.3%2Fangular.min.js%3A22%3A179)
any idea on how to fix this? thanks


You don't need a separate Module to have mainCtrl and commentService injected, you need to inject the commentService to your mainCtrl,
var commentUpp = angular.module('commentUpp',[]);
then
var combineApp = angular.module('combineApp',['routeApp','commentUpp'])

Related

Django JavaScript fpr bootstrap grid does not work

I deployed website using Django. I used external js code for grid (I want site to be user-friendly for all screens). When running just html using same js code or running it on my computer through manage.py it works fine. But when I actually deployed website grid become unclickable from small screens and you cannot see menu.
I couldn't find anything in Google. I am not sure if I have to use load static because I use external script, but tell me if I am wrong
<!DOCTYPE html>
{% load static %}
<html>
<head>
<meta charset="utf-8" name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<body>
<!-- DOCUMENTATION NAVBAR -->
<nav class="navbar navbar-default navbar-inverse navbar-fixed-top">
<!-- Inside of a Container -->
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<!-- This is the actual code that create the "hamburger icon" -->
<!-- The data-target grabs ids to put into the icon -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<!-- Code for the hamburger icon-->
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" style="color:white;"
href="{% url 'wpb:index' %}">
Mycroft Conspiracy Project</a>
</div>
<!-- Anything inside of collapse navbar-collapse goes into the "hamburger" -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active">О проекте <span class="sr-only">(current)</span></li>
<li class="active">Политика<span class="sr-only">(current)</span></li>
<li class="active">Психология<span class="sr-only">(current)</span></li>
</ul>
<!-- SEARCH BAR -->
<form action="{% url 'wpb:search' %}" method="get" class="navbar-form navbar-right">
<div class="input-group">
<input type="text" name="q" class="form-control" placeholder="Поиск">
</div>
<button type="submit" class="btn btn-default" name="search">Поиск</button>
</form>
<!-- Stuff on the Right -->
<ul class="nav navbar-nav navbar-right">
<li>Обратная связь</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
<!-- OTHER STUFF ON THE PAGE -->
<!-- Need to have JQuery and Javascript for DropDown Actions to work -->
<script
src="http://code.jquery.com/jquery-3.1.1.js"
integrity="sha256-16cdPddA6VdVInumRGo6IbivbERE8p7CQR3HzTBuELA="
crossorigin="anonymous"></script> <!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<div class="container">
<br />
<br />
<br />
<body style=" height: 800px;
position: relative;">
{% block body_block %}
{# Anything outside of this will be inherited if you use extend.#}
{% endblock %}
</body>
</div>
</br>
<div style="font-family:Palatino Linotype;position: sticky; position: -webkit-sticky;left:0;bottom:0;width:100%; top: 100%; height: 12rem;background-color:#2e2c27; border:1px dotted #003333; padding:.8em; ">
<h4 style="color:white;font-weight: bold;">Mycroft Conspiracy Project</h4>
<span style="font-size:12pt; font-family: 'Cambria','times new roman','garamond',serif; color:white;">Достоверность информации</span></br>
<p style="font-size:10pt; line-height:10pt; font-family: 'Cambria','times roman',serif; color: white;">Проект является любительским и не носит информационный характер. Хотя автор указывает в каждой статье степень своего личного отношения к
описываемым версиям или данным, здесь отсутствуют намерения представить статьи как источники, на которые стоит ссылаться. При копировании материалов с сайта ссылка
обязательна.</p>
<span style="padding-top:10px; font-weight:bold; color:#CC0000; font-size:10pt; font-family: 'Calibri',Arial,sans-serif; "></span></br></br>
</div>
</body>
</html>

Found it. Problem was that link to js code was starting with http. Browser was blocking it as mixed content. Needed just to change it to https.

TypeError: Cannot read property '0' of null

I'm working on a NodeJS Project that uses Sails.js as a framework.
What I'm trying to accomplish is a permissions system where the permissions per group are set by Check Boxes, I'm using a typical form with AngularJS.
When I click my "Sumbit" button it throws this error at my Browser's console:
angular.1.3.js:11594 TypeError: Cannot read property '0' of null
at $parseFunctionCall (angular.1.3.js:12333)
at callback (angular.1.3.js:22949)
at Scope.$eval (angular.1.3.js:14383)
at Scope.$apply (angular.1.3.js:14482)
at HTMLFormElement.<anonymous> (angular.1.3.js:22954)
at HTMLFormElement.eventHandler (angular.1.3.js:3011)(anonymous function) # angular.1.3.js:11594
Any help with this would be greatly appreciated.
EDIT Forgot the Code:
Here is the code that receives the information POSTed from the form
createGroup: function(req, res) {
Groups.create({
groupName: req.param('groupName'),
canViewUsers: req.param('canViewUsers'),
canEditUsers: req.param('canEditUsers'),
canPromoteToStaff: req.param('canPromoteToStaff'),
canViewNotes: req.param('canViewNotes'),
canEditPermissions: req.param('canEditPermissions')
});
Here is the code for that catches the information and POSTs it to the create function
angular.module('GroupsModule').controller('GroupsController', ['$scope', '$http', 'toastr', function($scope, $http, toastr) {
$scope.createGroup = {
loading: false
};
$scope.createGroupForm = function(){
// Set the loading state (i.e. show loading spinner)
$scope.createGroup.loading = true;
// Submit request to Sails.
$http.post('/createGroup', {
groupName: $scope.createGroupForm.groupName,
canViewUsers: $scope.createGroupForm.canViewUsers,
canEditUsers: $scope.createGroupForm.canEditUsers,
canPromoteToStaff: $scope.createGroupForm.canPromoteToStaff,
canViewNotes: $scope.createGroupForm.canViewNotes,
canEditPermissions: $scope.createGroupForm.canEditPermissions
})
.then(function onSuccess(sailsResponse){
window.location = '/groups';
})
.catch(function onError(sailsResponse){
// Handle known error type(s).
// If using sails-disk adpater -- Handle Duplicate Key
var groupAlreadyExists = sailsResponse.status == 409;
if (groupAlreadyExists) {
toastr.error('That group already exists', 'Error');
}
})
.finally(function eitherWay(){
$scope.createGroup.loading = false;
})
There are closing brackets but they aren't getting formatted correctly in the post.
And finally here is the code for the Form itself:
<!--STYLES-->
<link rel="stylesheet" href="/styles/angular-toastr.css">
<link rel="stylesheet" href="/styles/bootstrap.3.1.1.css">
<link rel="stylesheet" href="/styles/importer.css">
<link rel="stylesheet" href="/styles/style.css">
<link rel="stylesheet" href="/styles/theme.css">
<link rel="stylesheet" href="/styles/theme.min.css">
<!--STYLES END-->
<body ng-app="DashboardModule" ng-controller="DashboardController" ng-cloak>
<div class="bs-docs-section clearfix">
<div class="row">
<div class="bs-component">
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="/">Insomnia eSports</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li><i class="fa fa-users" aria-hidden="true"></i> Group Management </li>
</ul>
<!--
<form class="navbar-form navbar-left" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
-->
<ul class="nav navbar-nav navbar-right">
<li>Sign Out</li>
</ul>
</div>
</div>
</nav>
</div>
</div>
</div>
<form ng-submit="createGroupForm()" id="create-group-form" class="form-signin" name="createGroupForm">
<h2 class="form-signin-heading">Create an account</h2>
<div class="row">
<!-- Group Name -->
<label>Group Name</label>
<input type="text" class="form-control" placeholder="Group Name" name="groupName" ng-model="createGroupForm.name" ng-maxlength="25" required>
</div>
<!-- Can View Users -->
<label>View Users?</label>
<input type="checkbox" name="canViewUsers" ng-model="canViewUsers.value">
<!-- Can View Users -->
<label>Edit Users?</label>
<input type="checkbox" name="canEditUsers" ng-model="canEditUsers.value">
<!-- Can Promote To Staff -->
<label>Promote to Staff?</label>
<input type="checkbox" name="canPromoteToStaff" ng-model="canPromoteToStaff.value">
<!-- Can Promote To Staff -->
<label>Can view notes?</label>
<input type="checkbox" name="canViewNotes" ng-model="canViewNotes.value">
<!-- Can Promote To Staff -->
<label>Can edit permissions?</label>
<input type="checkbox" name="canEditPermissions" ng-model="canEditPermissions.value">
<br/>
<!-- Disable signup button until the form has no errors -->
<button class="btn btn-success btn-lg btn-block" type="submit" ng-disabled="createGroupForm.$invalid">
<span ng-show="!createGroupForm.loading">Create Group</span>
<span class="overlord-loading-spinner fa fa-spinner" ng-show="createGroupForm.loading" ></span>
<span ng-show="createGroupForm.loading">Preparing your new group...</span>
</button>
<input type="hidden" name="_csrf" value="<%= _csrf %>" />
</form>
<!--SCRIPTS-->
<script src="/js/dependencies/sails.io.js"></script>
<script src="/js/dependencies/angular.1.3.js"></script>
<script src="/js/dependencies/Base64.js"></script>
<script src="/js/dependencies/angular-toastr.js"></script>
<script src="/js/dependencies/compareTo.module.js"></script>
<script src="/js/public/signup/SignupModule.js"></script>
<script src="/js/public/groups/GroupsModule.js"></script>
<script src="/js/private/dashboard/DashboardModule.js"></script>
<script src="/js/public/homepage/HomepageModule.js"></script>
<script src="/js/private/dashboard/DashboardController.js"></script>
<script src="/js/public/groups/GroupsController.js"></script>
<script src="/js/public/homepage/HomepageController.js"></script>
<script src="/js/public/signup/SignupController.js"></script>
<!--SCRIPTS END-->
</body>

This was solved by me incorrectly using $scope on createGroupForm instead of just createGroup. The corrected code bit is below:
Instead of:
$scope.createGroupForm.canViewUsers
Use:
$scope.createGroup.canViewUsers

Angular Injector error

I keep getting an error trying to inject angular into my application. I get an error that says Error: $injector:modulerr Module Error. Below is my code:
admin-index.html:
<!DOCTYPE html>
<html lang="en" ng-app="app" class="no-js" ng-jq> <!--<![endif]-->
<head>
<meta charset="UTF-8">
<title>AdminLTE 2 | Dashboard</title>
<meta content='width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no' name='viewport'>
<!-- Bootstrap 3.3.2 -->
<link href="../bower_components/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet" type="text/css"/>
<!-- Font Awesome Icons -->
<link href="../components/font-awesome-4.3.0/css/font-awesome.min.css" rel="stylesheet" type="text/css"/>
<!-- Ionicons -->
<link href="../bower_components/ionicons/css/ionicons.min.css" rel="stylesheet" type="text/css"/>
<!-- Theme style -->
<link href="../bower_components/adminlte/dist/css/AdminLTE.min.css" rel="stylesheet" type="text/css"/>
<!-- AdminLTE Skins. We have chosen the skin-blue for this starter
page. However, you can choose any other skin. Make sure you
apply the skin class to the body tag so the changes take effect.
-->
<link href="../bower_components/adminlte/dist/css/skins/skin-blue.min.css" rel="stylesheet" type="text/css"/>
<!--<link rel="stylesheet" href="../bower_components/html5-boilerplate/css/normalize.css">-->
<!--<link rel="stylesheet" href="../bower_components/html5-boilerplate/css/main.css">-->
<link rel="stylesheet" href="admin-app.css">
<link rel="stylesheet" href="reportview/report-view.css">
<script src="../bower_components/html5-boilerplate/js/vendor/modernizr-2.6.2.min.js"></script>
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<script>
var locale = 'zh-CN';
document.write('<script src="../bower_components/angular-i18n/angular-locale_'+locale+'.js"><\/script>');
</script>
<![endif]-->
</head>
<body class="skin-blue">
<div class="wrapper">
<!-- Main Header -->
<header class="main-header">
<!-- Logo -->
<a ng-click="$event.stopPropagation()" class="logo"><b>ZAN Admin</b></a>
<!-- Header Navbar -->
<nav class="navbar navbar-static-top" role="navigation">
<!-- Sidebar toggle button-->
<a href="#" class="sidebar-toggle" data-toggle="offcanvas" role="button">
<span class="sr-only">Toggle navigation</span>
</a>
<!-- Navbar Right Menu -->
<div class="navbar-custom-menu">
</div>
</nav>
</header>
<!-- Left side column. contains the logo and sidebar -->
<aside class="left-side main-sidebar">
<!-- sidebar: style can be found in sidebar.less -->
<section class="sidebar">
<!-- search form (Optional) -->
<form action="#" method="get" class="sidebar-form">
<div class="input-group">
<input type="text" name="q" class="form-control" placeholder="Search..."/>
<span class="input-group-btn">
<button type='submit' name='search' id='search-btn' class="btn btn-flat"><i class="fa fa-search"></i></button>
</span>
</div>
</form>
<!-- /.search form -->
<!-- Sidebar Menu -->
<ul class="sidebar-menu">
<li class="header">Header</li>
<!-- Optionally, you can add icons to the links -->
<li class="treeview">
<i class="fa fa-circle-o"></i>Report Views<i class="fa fa-angle-left pull-right"></i>
<ul class="treeview-menu" ng-cloak>
<li ng-repeat="dsm in dsmeta">
<a ng-href="admin-index.html#/admin/reportview/{{dsm.name}}">{{dsm.name}}</a>
</li>
</ul>
</li>
</ul><!-- /.sidebar-menu -->
</section>
<!-- /.sidebar -->
</aside>
<!-- Content Wrapper. Contains page content -->
<div class="content-wrapper" ng-view>
<!-- Content Header (Page header) -->
</div><!-- /.content-wrapper -->
<!-- Main Footer -->
<footer class="main-footer" ng-controller="AdminSyncConsole">
<!-- To the right -->
<!-- <div class="pull-right hidden-xs">
Anything you want
</div> -->
<!-- Default to the left -->
<!-- <strong>Copyright © 2015 Company.</strong> All rights reserved. -->
<!-- Apply any bg-* class to to the info-box to color it -->
<div class="info-box bg-green">
<span class="info-box-icon"><i class="fa fa-bookmark-o"></i></span>
<div class="info-box-content">
<span class="info-box-text">Current Sync Status</span>
<span class="info-box-number">{{syncStatus}}</span>
<!-- The progress section is optional -->
<div class="progress">
<div class="progress-bar" style="width: 70%"></div>
</div>
<span class="progress-description">
70% Increase in 30 Days
</span>
</div><!-- /.info-box-content -->
</div><!-- /.info-box -->
<div class="box box-solid box-default">
<div class="box-header">
<h3 class="box-title">Sync Sessions</h3>
</div>
<div class="box box-default collapsed-box">
<div class="box-header with-border">
<h3 class="box-title">Expandable</h3>
<div class="box-tools pull-right">
<button class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-plus"></i></button>
</div><!-- /.box-tools -->
</div><!-- /.box-header -->
<div class="box-body">
The body of the box
</div><!-- /.box-body -->
</div><!-- /.box -->
</div>
</footer>
</div><!-- ./wrapper -->
<!-- REQUIRED JS SCRIPTS -->
<!-- jQuery 2.1.3 -->
<script src="../bower_components/adminlte/plugins/jQuery/jQuery-2.1.3.min.js"></script>
<!-- Bootstrap 3.3.2 JS -->
<script src="../bower_components/bootstrap/dist/js/bootstrap.min.js" type="text/javascript"></script>
<script src="../bower_components/adminlte/plugins/fastclick/fastclick.min.js"></script>
<!-- build:js ../minjs/angular.js -->
<!-- angular dependencies -->
<script src="../bower_components/angular/angular.min.js"></script>
<script src="../bower_components/angular-resource/angular-resource.min.js"></script>
<script src="../bower_components/angular-translate/angular-translate.min.js"></script>
<script src="../bower_components/angular-translate-loader-partial/angular-translate-loader-partial.min.js"></script>
<script src="../bower_components/angular-touch/angular-touch.min.js"></script>
<script src="../bower_components/angular-animate/angular-animate.min.js"></script>
<script src="../bower_components/angular-sanitize/angular-sanitize.min.js"></script>
<script src="../bower_components/angular-route/angular-route.min.js"></script>
<!-- endbuild -->
<!-- AdminLTE App -->
<script src="../bower_components/adminlte/dist/js/app.js" type="text/javascript"></script>
<script src="../bower_components/angular-translate/angular-translate.js"></script>
<script src="../bower_components/angular-translate-loader-static-files/angular-translate-loader-static-files.js"></script>
<!-- build:js ../minjs/z-ui.js -->
<script src="../js/z-ui.js"></script>
<!-- endbuild -->
<script src="../bower_components/angular-local-storage/dist/angular-local-storage.min.js"></script>
<script src="reportview/reportview.js"></script>
<script src="../translation/translate.js"></script>
<script src="admin-app.js"></script>
<script src="../components/util/report-view-service.js"></script>
</body>
</html>
admin-app.js:
'use strict';
var baseSyncUrl = "../api/rest/{{path.version}}/syncsessions";
var getSyncSessionsReq = {method: "GET", url: baseSyncUrl, params: {targetSystemType:{}, pageSize: ""}, path: {version: "v1"}};
// Declare app level module which depends on views, and components
var app = angular.module('app', ['z.components']);
app.controller('AdminSyncConsole', ['$scope', '$http', 'RESTCaller', function ($scope, $http, RESTCaller) {
$scope.syncStatus = "Completed";
$scope.syncSessions;
//REST API to get the sync sessions
$scope.getSyncSessions = function() {
var req = getSyncSessionsReq;
var targetSystem = {'id': '1', 'type': 'SPOTLIGHT', 'description': 'Spotlight'};
req.params.targetSystemType = targetSystem;
//Page size is not necessarily required
// req.params.pageSize =
var data = RESTCaller.getConfig(req);
data.then(function(result){
if(result) {
console.log("Result: ", result);
}
});
}
//Getting the sync sessions
console.log("Hi");
$scope.syncSessions = $scope.getSyncSessions();
//Call REST API to get the sync status
}]);
I'm confused as to why this is happening. I don't have any other problems injecting angular.min.js into my other files, and I can't seem to pinpoint where the error is coming from because it just complains about angular.min.js. I have checked and my ng-app seems to be correct and z.components comes from another module that comes from a file that I have already included called ../js/z-ui.js. RESTCaller also comes from z-ui.js file. Any help would be appreciated. Thanks!

I think that you should retrieve this module not create but I don't know what you do
Beware that using angular.module('myModule', []) will create the module myModule and overwrite any existing module named myModule. Use angular.module('myModule') to retrieve an existing module.
Additionally:
Passing one argument retrieves an existing angular.Module, whereas passing more than one argument creates a new angular.Module
As you said:
I have checked and my ng-app seems to be correct and z.components comes from another module that comes from a file that I have already included called ../js/z-ui.js.
Do you use all of these files?
<script src="../bower_components/angular/angular.min.js"></script>
<script src="../bower_components/angular-resource/angular-resource.min.js"></script>
<script src="../bower_components/angular-translate/angular-translate.min.js"></script>
<script src="../bower_components/angular-translate-loader-partial/angular-translate-loader-partial.min.js"></script>
<script src="../bower_components/angular-touch/angular-touch.min.js"></script>
<script src="../bower_components/angular-animate/angular-animate.min.js"></script>
<script src="../bower_components/angular-sanitize/angular-sanitize.min.js"></script>
<script src="../bower_components/angular-route/angular-route.min.js"></script>

Angular.js: 13424 Error: [ng:areq] Argument 'enfermerosController' is not a function, got undefined

i'm getting Angular.js: 13424 Error: [ng:areq] Argument 'enfermerosController' is not a function, got undefinederror I don't know what is happening. Found in some places that it's maybe i'm calling ng-app twice or my module but I don't. I'm using Angular 1.5.3 and it's my first time with this problem. I will be grateful with any help you can give.
Thanks
This is my router
'use strict'
var myApp = angular.module('myApp', ['ngRoute', 'ui.bootstrap'])
.config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider) {
$routeProvider.when('/', {
templateUrl: '/views/admin/partials/hola.html',
controller: 'adminController'
})
$routeProvider.when('/admin/geriatras', {
templateUrl: '/views/admin/partials/geriatras.html',
controller: 'geriatrasController'
})
$routeProvider.when('/admin/medicos', {
templateUrl: '/views/admin/partials/medicos.html',
controller: 'medicosController'
})
$routeProvider.when('/admin/enfermeros', {
templateUrl: '/views/admin/partials/enfermeros.html',
controller: 'enfermerosController'
})
$routeProvider.when('/admin/pacientes', {
templateUrl: '/views/admin/partials/pacientes.html',
controller: 'pacientesController'
})
$routeProvider.otherwise({
redirectTo: '/'
})
$locationProvider.html5Mode({
enabled: true,
requireBase: false
})
}])
and after this is one of my controllers pacientesController (with all I have the same problem)
'use strict'
myApp.controller('pacientesController',['$scope', ($scope) => {
$scope.hello = "hello"
}])
This is enfermerosController (as you see, there's no code yet in my controllers)
'use strict'
myApp.controller('enfermerosController', ['$scope', function($scope) {
}])
and my html is this one
<!DOCTYPE html>
<html lang="es" ng-app="myApp">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Hospital</title>
<!-- Tell the browser to be responsive to screen width -->
<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
<!-- Bootstrap 3.3.5 -->
<link rel="stylesheet" href="/libs/bootstrap/dist/css/bootstrap.css">
<!-- Font Awesome -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<!-- Ionicons -->
<link rel="stylesheet" href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
<!-- Theme style -->
<link rel="stylesheet" href="/public/assets/dist/css/Matadero.min.css">
<!-- AdminLTE Skins. Choose a skin from the css/skins
folder instead of downloading all of them to reduce the load. -->
</head>
<body class="hold-transition skin-blue sidebar-mini">
<div class="wrapper">
<header class="main-header">
<!-- Logo -->
<a href="index2.html" class="logo">
<!-- mini logo for sidebar mini 50x50 pixels -->
<span class="logo-mini"><b>:D</span>
<!-- logo for regular state and mobile devices -->
<span class="logo-lg"><b>Hospital</span>
</a>
<!-- Header Navbar: style can be found in header.less -->
<nav class="navbar navbar-static-top" role="navigation">
<!-- Sidebar toggle button-->
<a href="#" class="sidebar-toggle" data-toggle="offcanvas" role="button">
<span class="sr-only">Navegación</span>
</a>
<div class="navbar-custom-menu">
<ul class="nav navbar-nav">
<!-- Messages: style can be found in dropdown.less-->
<!-- Notifications: style can be found in dropdown.less -->
<!-- Tasks: style can be found in dropdown.less -->
<!-- User Account: style can be found in dropdown.less -->
<li class="dropdown user user-menu">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
<span class="hidden-xs">!!Nombre Usuario Loggeado¡¡</span>
</a>
<ul class="dropdown-menu">
<!-- User image -->
<!-- Menu Body -->
<!-- Menu Footer-->
<li class="user-footer">
<div class="pull-left">
Perfil
</div>
<div class="pull-right">
Cerrar sesión
</div>
</li>
</ul>
</li>
<!-- Control Sidebar Toggle Button -->
</ul>
</div>
</nav>
</header>
<!-- Left side column. contains the logo and sidebar -->
<aside class="main-sidebar">
<!-- sidebar: style can be found in sidebar.less -->
<section class="sidebar">
<!-- search form -->
<form action="#" method="get" class="sidebar-form">
<div class="input-group">
<input type="text" name="q" class="form-control" placeholder="Search...">
<span class="input-group-btn">
<button type="submit" name="search" id="search-btn" class="btn btn-flat"><i class="fa fa-search"></i>
</button>
</span>
</div>
</form>
<!-- /.search form -->
<!-- sidebar menu: : style can be found in sidebar.less -->
<ul class="sidebar-menu" ng-controller="navController">
<li class="header">Menú</li>
<li class="active treeview">
<a href="#">
<i class="fa fa-dashboard"></i> <span>Personal Médico</span> <i class="fa fa-angle-left pull-right"></i>
</a>
<ul class="treeview-menu">
<li ng-class="{active: isActive('/admin/geriatras')}"><i class="fa fa-circle-o"></i>Geriatras</li>
<li ng-class="{active: isActive('/admin/medicos')}"><i class="fa fa-circle-o"></i>Médicos</li>
<li ng-class="{active: isActive('/admin/enfermeros')}"><i class="fa fa-circle-o"></i>Enfermeros</li>
</ul>
</li>
<li ng-class="{active: isActive('/admin/pacientes')}"><i class="fa fa-book"></i> <span>Pacientes</span></li>
</ul>
</section>
<!-- /.sidebar -->
</aside>
<!-- Content Wrapper. Contains page content -->
<div class="content-wrapper">
<!-- Content Header (Page header) -->
<section class="content-header">
<h1>
Dashboard
<small>Panel de Control</small>
</h1>
</section>
<!-- Main content -->
<section class="content">
<div ng-view="">
</div>
</section>
<!-- /.content -->
</div>
<!-- /.content-wrapper -->
<footer class="main-footer">
<div class="pull-right hidden-xs">
<b>Equipo Fiucsa</b>
</div>
<strong>Tecnológico de Monterrey © 2016 Repositorio.</strong>
</footer>
<!-- Add the sidebar's background. This div must be placed
immediately after the control sidebar -->
<div class="control-sidebar-bg"></div>
</div>
<!-- ./wrapper -->
<!--Angular -->
<script type="text/javascript" src="/libs/angular/angular.js"></script>
<script type="text/javascript" src="/libs/angular-route/angular-route.js"></script>
<script type="text/javascript" src="/public/js/app.js"></script>
<script src="/libs/angular-aria/angular-aria.js"></script>
<script src="/libs/angular-animate/angular-animate.js"></script>
<script src="/libs/angular-material/angular-material.js"></script>
<script src="/libs/angular-messages/angular-messages.js"></script>
<script type="text/javascript" src="/libs/angular-bootstrap/ui-bootstrap-tpls.js"></script>
<script src="http://ngmaterial.assets.s3.amazonaws.com/svg-assets-cache.js"></script>
<script type="text/javascript" src="/public/js/controllers/cuestionarioController.js"></script>
<script type="text/javascript" src="/public/js/controllers/geriatrasController.js"></script>
<script type="text/javascript" src="/public/js/controllers/medicosController.js"></script>
<script type="text/javascript" src="/public/js/controllers/enfermerosController.js"></script>
<script type="text/javascript" src="/public/js/controllers/navController.js"></script>
<script type="text/javascript" src="/public/js/controllers/adminController.js"></script>
<!-- jQuery 2.1.4 -->
<script src="/libs/jquery/dist/jquery.min.js"></script>
<!-- jQuery UI 1.11.4 -->
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
<!-- Resolve conflict in jQuery UI tooltip with Bootstrap tooltip -->
<!-- Bootstrap 3.3.5 -->
<script src="/libs/bootstrap/dist/js/bootstrap.min.js"></script>
<!-- AdminLTE App -->
<script src="/public/assets/dist/js/app.min.js"></script>
</body>
</html>

I just found my error and it was the arrow functions when I define my controllers. I think we can only use arrow functions inside controllers not when you define it
theres a little explanation here:
Are ES6 arrow functions incompatible with Angular?

Why adding dependency causes error in AngularJS?

Working on a web app i am implementing routes , i have added route CDN and when i added ngRoute as a dependency to myApp it is not working now.Before adding ngRoute viewproducts was working fine but now what i am seeing is :
{{product.name}} {{product.company}} and not the actual values.
Module CODE :
var myApp = angular.module('myApp', ['ngRoute']);
myApp.config(function($routeProvider){
$routeProvider.
when('/addproduct', {
templateUrl:'addproduct.html',
controller:'myController'
})
});
Controller CODE :
myApp.controller("myController",function($scope,$http){
$scope.insertData = function(){
$http.post("addProduct.php",{'pname': $scope.productname,'company': $scope.company,'price': $scope.price,'quantity':$scope.quantity})
.success(function(data,status,headers,config){
$scope.successMessage = "Inserted Successfuly!";
});
}
});
HTML CODE:
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Dashboard</title>
<link href='https://fonts.googleapis.com/css?family=Source+Sans+Pro:700, 600,500,400,300' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<link rel="stylesheet" href="http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
<link rel="stylesheet" href="main.css">
<script type="text/javascript" src="js/angular/angular.min.js"></script>
<script src="https://code.jquery.com/jquery-2.2.0.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/data.js"></script>
<script src="main.js"></script>
<script src="angularkhan.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.1/angular-route.min.js"></script>
<!-- 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">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
</head>
<body ng-controller="myController">
<div class="header">
<div class="logo">
<i class="fa fa-tachometer"></i>
<span>Dashboard</span>
</div>
<span></span>
</div>
<div class="side-nav">
<div class="logo">
<i class="fa fa-tachometer"></i>
<span>Dashboard</span>
</div>
<nav>
<ul>
<li>
<a href="#">
<span><i class="fa fa-user"></i></span>
<span>Users</span>
</a>
</li>
<li>
<a href="addproduct.html">
<span><i class="fa fa-user"></i></span>
<span>Add Product</span>
</a>
</li>
<li>
<a href="viewproducts.html">
<span><i class="fa fa-envelope"></i></span>
<span>View Products</span>
</a>
</li>
<li class="active">
<a href="#">
<span><i class="fa fa-bar-chart"></i></span>
<span>Analytics</span>
</a>
</li>
<li>
<a href="#">
<span><i class="fa fa-credit-card-alt"></i></span>
<span>Payments</span>
</a>
</li>
</ul>
</nav>
</div>
<div class="main-content">
<div class="title">
Add Product
</div>
<div class="main" ng-view>
<form style="padding:10px">
<div class="form-group">
<label for="ProductName">Product Name</label>
<input type="text" class="form-control" placeholder="Product Name" ng-model="productname">
</div>
<div class="form-group">
<label for="company">Company </label>
<input type="text" class="form-control" placeholder="company" ng-model="company">
</div>
<div class="form-group">
<label for="company">Price </label>
<input type="text" class="form-control" placeholder="price" ng-model="price">
</div>
<div class="form-group">
<label for="company">Quantity </label>
<input type="text" class="form-control" placeholder="quantity" ng-model="quantity">
</div>
<button type="submit" class="btn btn-default" ng-click="insertData()">Submit</button>
<h1>{{successMessage}}</h1>
</form>
</div>
</div>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
</html>

It looks like you may be redifining your module.
Do you have the following code elsewhere in your project?
var myApp = angular.module('myApp', [...]);
If you do, the second module call with brackets would redefine the existing module. Try adding the ngRoute dependency to the first module definition and remove the brackets of the one in config. It should then look like below.
var myApp = angular.module('myApp');

The order of your scripts matters! The file where you create your angular module app:
var myApp = angular.module('myApp', ['ngRoute']);
This file should be after the angular-route file.
Fixed:
<script src="js/angular/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.1/angular-route.min.js"></script>
<script src="https://code.jquery.com/jquery-2.2.0.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/data.js"></script>
<script src="main.js"></script>
<script src="angularkhan.js"></script>

Categories

Resources