I m trying to add angular-schema-form to AngularJs Seed.
I followed the steps in angular-schema-form repository:
view1.js
'use strict';
angular.module('myApp.view1', ['ngRoute', 'schemaForm'])
.config(['$routeProvider', function ($routeProvider) {
$routeProvider.when('/view1', {
templateUrl: 'view1/view1.html',
controller: 'FormController'
});
}])
.controller('FormController', function ($scope) {
$scope.schema = {
type: "object",
properties: {
name: {
type: "string",
minLength: 2,
title: "Name",
description: "Name or alias"
},
title: {
type: "string",
enum: ['dr', 'jr', 'sir', 'mrs', 'mr', 'NaN', 'dj']
}
}
};
$scope.form = [
"*",
{
type: "submit",
title: "Save"
}
];
$scope.model = {};
});
view1.html
<div ng-controller="FormController">
<form sf-schema="schema" sf-form="form" sf-model="model"></form>
</div>
index.html
<!DOCTYPE html>
<!--[if lt IE 7]> <html lang="en" ng-app="myApp" class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html lang="en" ng-app="myApp" class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html lang="en" ng-app="myApp" class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html lang="en" ng-app="myApp" class="no-js"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>My AngularJS App</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="bower_components/html5-boilerplate/dist/css/normalize.css">
<link rel="stylesheet" href="bower_components/html5-boilerplate/dist/css/main.css">
<link rel="stylesheet" href="app.css">
<script src="bower_components/html5-boilerplate/dist/js/vendor/modernizr-2.8.3.min.js"></script>
</head>
<body>
<ul class="menu">
<li>view1</li>
<li>view2</li>
</ul>
<!--[if lt IE 7]>
<p class="browsehappy">You are using an <strong>outdated</strong> browser. Please upgrade your browser to improve your experience.</p>
<![endif]-->
<div ng-view></div>
<div>Angular seed app: v<span app-version></span></div>
<!-- In production use:
<script src="//ajax.googleapis.com/ajax/libs/angularjs/x.x.x/angular.min.js"></script>
-->
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-route/angular-route.js"></script>
<script src="app.js"></script>
<script src="view1/view1.js"></script>
<script src="view2/view2.js"></script>
<script src="components/version/version.js"></script>
<script src="components/version/version-directive.js"></script>
<script src="components/version/interpolate-filter.js"></script>
</body>
</html>
I got the following error:
Uncaught Error: [$injector:modulerr] Failed to instantiate module myApp due to:
Error: [$injector:modulerr] Failed to instantiate module myApp.view1 due to:
Error: [$injector:modulerr] Failed to instantiate module schemaForm due to:
Error: [$injector:nomod] Module 'schemaForm' 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.
http://errors.angularjs.org/1.6.8/$injector/nomod?p0=schemaForm
You are missing the references for the schemaForm, you need to add it above app.js
<script src="bower_components/angular/angular.js"></script>
<script type="text/javascript" src="bower_components/angular-schema-form/dist/schema-form.min.js"></script>
<script src="bower_components/angular-route/angular-route.js"></script>
<script src="app.js"></script>
Related
I'm currently getting this error trying to load my Angular App:
Uncaught Error: [$injector:unpr] Unknown provider: $$HashMapProvider
<- $$HashMap <- $$animateQueue <- $animate <- $compile <-
$$animateQueue
http://errors.angularjs.org/1.6.4/$injector/unpr?p0=%24%24HashMapProvider%2…eQueue%20%3C-%20%24animate%20%3C-%20%24compile%20%3C-%20%24%24animateQueue
The link in the error just tells me I spelled something wrong, but after quadruple checking, that's not the issue here. Here is my bower.json file:
{
"name": "angular-seed",
"description": "A starter project for AngularJS",
"version": "0.0.0",
"homepage": "https://github.com/angular/angular-seed",
"license": "MIT",
"private": true,
"dependencies": {
"angular": "^1.6.4",
"angular-route": "~1.5.0",
"angular-loader": "~1.5.0",
"angular-mocks": "~1.5.0",
"html5-boilerplate": "^5.3.0",
"angular-animate": "^1.6.4",
"angular-material": "^1.1.4"
}
}
Here's my angular.module that's the same in both my view1.js and view2.js
(function() {
var module = angular.module("myApp.view2", [
"ngRoute",
"ngMaterial",
"ngAnimate",
"ngAria",
"ngMessages",
"mdPickers"
]);
module.config(['$routeProvider', function($routeProvider) {
$routeProvider.when('/view2', {
templateUrl: 'view2/view2.html',
controller: 'View2Ctrl'
});
}]);
module.controller("View2Ctrl", ['$scope', '$mdpDatePicker', '$mdpTimePicker', function($scope, $mdpDatePicker, $mdpTimePicker){
$scope.currentDate = new Date();
// controller code
}]);
})();
index.html
<!DOCTYPE html>
<!--[if lt IE 7]> <html lang="en" ng-app="myApp" class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html lang="en" ng-app="myApp" class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html lang="en" ng-app="myApp" class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html lang="en" ng-app="myApp" class="no-js"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>My AngularJS App</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="bower_components/html5-boilerplate/dist/css/normalize.css">
<link rel="stylesheet" href="bower_components/html5-boilerplate/dist/css/main.css">
<link rel="stylesheet" href="app.css">
<script src="bower_components/html5-boilerplate/dist/js/vendor/modernizr-2.8.3.min.js"></script>
</head>
<body>
<!--[if lt IE 7]>
<p class="browsehappy">You are using an <strong>outdated</strong> browser. Please upgrade your browser to improve your experience.</p>
<![endif]-->
<ul class="menu">
<li>view1</li>
<li>view2</li>
</ul>
<div ng-view></div>
<div>Angular seed app: <span app-version></span></div>
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-route/angular-route.js"></script>
<!-- Angular Material requires Angular.js Libraries -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-animate.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-aria.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-messages.min.js"></script>
<!-- Angular Material Library -->
<script src="https://ajax.googleapis.com/ajax/libs/angular_material/1.1.0/angular-material.min.js"></script><script src="app.js"></script>
<script src="https://cdn.rawgit.com/alenaksu/mdPickers/0.7.4/dist/mdPickers.min.js"></script>
<script src="view1/view1.js"></script>
<script src="view2/view2.js"></script>
<script src="components/version/version.js"></script>
<script src="components/version/version-directive.js"></script>
<script src="components/version/interpolate-filter.js"></script>
</body>
</html>
I also have a package.json for my node dependencies. That doesn't seem to be part of this particular issue, but I can add in that code if requested.
I've seen and asked this question asked before, but none of the offered solutions helped, so I'm asking on my own now.
Here is the github. The version throwing me errors is currently on the Master Branch. https://github.com/eanzalone/AngularDatePicker
Make sure you are using appropriate versions
Update your bower.json to use 1.5.0 version of angular
{
"name": "angular-seed",
"description": "A starter project for AngularJS",
"version": "0.0.0",
"homepage": "https://github.com/angular/angular-seed",
"license": "MIT",
"private": true,
"dependencies": {
"angular": "^1.5.0",
"angular-route": "~1.5.0",
"angular-loader": "~1.5.0",
"angular-mocks": "~1.5.0",
"html5-boilerplate": "^5.3.0",
"angular-animate": "^1.5.0",
"angular-material": "^1.1.4"
}
}
add the scripts from the bower components itself
I am just starting on angular material, so I built a skeleton page with a toolbar, sidenav, and content.
Yet, when I try to toggle the sidenav with $mdSidenav's toggle(), it gives me the following error:
TypeError: $mdSidenav is not a function
Here's the HTML:
<!DOCTYPE html>
<!--[if lt IE 7]>
<html lang="en" ng-app="myApp" class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>
<html lang="en" ng-app="myApp" class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>
<html lang="en" ng-app="myApp" class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!-->
<html lang="en" ng-app="myApp" class="no-js"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>My AngularJS Sandbox</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="bower_components/angular-material/angular-material.min.css">
<link rel="stylesheet" href="style.css">
</head>
<body ng-controller="mainCtrl" layout="row" layout-fill ng-cloak>
<!--[if lt IE 7]>
<p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade
your browser</a> to improve your experience.</p>
<![endif]-->
<md-sidenav id="sideNav" md-component-id="left" class="md-sidenav-left md-whiteframe-z2">
<md-toolbar id="sideNav-bar" layout="row"></md-toolbar>
<md-divider></md-divider>
</md-sidenav>
<div layout="column" flex layout-fill>
<md-toolbar layout="row" id="topBar" layout-align="left center" layout-padding>
<a class="fa-holders" ng-click="openSideNav('left')"><i class="fa fa-bars"></i></a>
<span layout="column" ng-bind="currentTitle"></span>
</md-toolbar>
<md-content id="content_wrapper" flex layout="row"></md-content>
</div>
<script src="bower_components/angular/angular.min.js"></script>
<script src="bower_components/angular-ui-router/release/angular-ui-router.min.js"></script>
<script src="bower_components/angular-animate/angular-animate.min.js"></script>
<script src="bower_components/angular-aria/angular-aria.min.js"></script>
<script src="bower_components/angular-messages/angular-messages.min.js"></script>
<script src="bower_components/angular-material/angular-material.min.js"></script>
<script src="app.js"></script>
</body>
</html>
and the JS:
'use strict';
angular.module('myApp', [
'ngMaterial'
])
.config([function () {
}])
.controller('mainCtrl', ['$scope', function ($scope, $mdSidenav) {
$scope.soKai = 'soKai';
$scope.currentTitle = 'Maths';
$scope.appName = 'KaiAcademics';
$scope.openSideNav = function(componentId) {
$mdSidenav(componentId).toggle();
}
}])
;
Here's angular material's documentation. Am I missing anything?
You forgot to inject $mdSidenav.
.controller('mainCtrl', ['$scope', '$mdSidenav', function ($scope, $mdSidenav) {
...
}])
https://docs.angularjs.org/guide/di
So I can't seem to get my controller to work when it is in a different file.
Right now I am just trying to do small test controller to see how angular works. Here are my files:
Here is my app.js
(function(angular) {
var AngularApp = angular.module('AngularApp', []);
})(window.angular);
Here is my controller file: TestController.js
(function(angular) {
var AngularApp = angular.module('AngularApp');
AngularApp.controller("TestController", ["$scope", function($scope) {
$scope.appTitle = "AngularApp";
}]);
})(window.angular);
Here is my html:
<!doctype html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang=""> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8" lang=""> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9" lang=""> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="" ng-app="AngularApp" ng-controller="TestController"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title ng-bind="appTitle"></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="apple-touch-icon" href="apple-touch-icon.png">
<link rel="stylesheet" href="/assets/libs/bootstrap/dist/css/bootstrap.min.css">
<style>
body {
padding-top: 50px;
padding-bottom: 20px;
}
</style>
<link rel="stylesheet" href="/assets/libs/bootstrap/dist/css/bootstrap-theme.min.css">
<link rel="stylesheet" href="/assets/css/main.css">
<script src="/assets/libs/modernizr-2.8.3-respond-1.4.2.min.js"></script>
<script src="/assets/libs/angular/angular.js"></script>
</head>
<body>
...
</div> <!-- /container --> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="/assets/libs/jquery-1.11.2.min.js"><\/script>')</script>
<script src="/assets/libs/bootstrap/dist/js/bootstrap.min.js"></script>
<script src="/app/app.js"></script>
<scirpt src="/app/components/home/TestController.js"></script>
</body>
</html>
Right now I am just trying to replace the title of the page. I have tried numerous different ways of doing this. Right now I have the js wrapped in immediately invoked functions, but I have tried with out that. I have tried making the module a global variable and just using that variable to define a controller. Ex:
App.js:
AngularApp = angular.module('AngularApp', []);
TestController.js:
AngularApp.controller("TestController", ["$scope", function($scope) {
$scope.appTitle = "AngularApp";
}]);
I have also tried the dependencies with and without the array notation.
The controller seems to work fine when it is in the same file but I can't get it to work when it is in a seperate file. I always get the following error:
I am using angular version 1.4.8
Any help would be greatly appreciated!
I am trying to route my APP in angular and bootstrap, but nothing shows in the view, my code is:
app.js
var myApp = angular.module('myApp', [
'ngRoute',
'mainControl'
]);
myApp.config(['$routeProvider', function($routeProvider) {
$routeProvider.
when('/main', {
templateurl: 'partials/main.html',
controller: 'MainControl'
}).
otherwise({
redirectTo: '/main'
});
}]);
controllers.js
var mainControl = angular.module('mainControl', []);
mainControl.controller('MainControl', function($scope) {
$scope.message = "This is the message";
});
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<title>Angular JS and Bootstrap</title>
<!-- jQuery Version 1.11.1 -->
<script src="js/jquery.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="js/bootstrap.min.js"></script>
<!-- Angular JS -->
<script src= "https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular-route.min.js"></script>
<script src="js/app.js"></script>
<script src="js/controllers.js"></script>
<script src="js/accordian.js"></script>
<!-- Bootstrap Core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- Custom CSS -->
<link href="css/app.css" rel="stylesheet">
<!-- 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.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body ng-app="myApp">
<div ng-view>
</div>
</body>
</html>
Any help would be appreciated?? I am fairly new to angular JS, am i declaring the ng-app in the wrong place?. when I look in the url, the url is displayed correctly i.e index.html#/main, but nothing is displayed...
It looks like you have a typo?
when('/main', {
templateUrl: 'partials/main.html', // capitalization on templateurl
controller: 'MainControl'
}).
EDIT: Confirmed that it works locally with your code.
Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 8 years ago.
Improve this question
When I run the following in my browser I get two list items, but nothing is displayed within the two items. So the loop itself works but nothing is being pulled from my list.
I reedited my submission to show an accurate representation of my problem
HTML
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/bootstrap.min.css">
<style>
body {
padding-top: 50px;
padding-bottom: 20px;
}
</style>
<link rel="stylesheet" href="css/bootstrap-theme.min.css">
<link rel="stylesheet" href="css/main.css">
<script src="js/angular.min.js"></script>
<script src="js/vendor/modernizr-2.6.2-respond-1.1.0.min.js"></script>
</head>
<!-- initial angular declaration -->
<body id="main" ng-app>
<div ng-controller ="EductationCtrl">
<ul class = "list-unstyled">
<li ng-repeat = "school in schools">
{{schools.name}}
</li>
</ul>
</div>
<script src="js/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/vendor/jquery-1.11.0.min.js"><\/script>')</script>
<script src="js/vendor/bootstrap.min.js"></script>
<script src="js/main.js"></script>
</body>
Javascript
function EductationCtrl($scope) {
$scope.schools = [
{name: 'university', major: 'Computer Science'},
{name: 'College', major: 'Politcal Science and Finance'},
];
}
This is the end result:
<li ng-repeat="school in schools" class="ng-scope ng-binding">
</li>
<li ng-repeat="school in schools" class="ng-scope ng-binding">
</li>
You have a typo: {{peole.name}} should be {{people.name}}
Plunker Demo
Its a typo:
{{schools.name}}
to
{{school.name}}