I cannot figure out why the template intellij creates for me produces all these error. Even better the angular is not working. I cut and pasted some simple angular code from online sources to test it and put the Angular script inside index.html with no luck.
Here is my current code:
<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>
<script src="controllers/clickablecontroller.js"></script>
</head>
<body ng-app="myApp">
<ul class="menu">
<li>view1</li>
<li>view2</li>
</ul>
<div ng-controller="clickable">
<input type="button" value="Click Me" ng-click="clickMe()">
{{clickable.click}}
</div>
<div ng-app="myApp" ng-controller="myCtrl">
<button ng-click="count = count + 1">Click me!</button>
<p>{{ count }}</p>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.count = 0;
});
</script>
Controller: (clickablecontroller.js)
angular.module('myApp',[])
.controller('clickable',['$scope', function($scope){
$scope.clickMe = function(){
$scope.click = click++;
}
}]);
Errors:
Related
contact.js --- this is angular file. i am trying to make my contact app .
'use strict';
angular.module('myContacts.contacts', ['ngRoute','firebase'])
.config(['$routeProvider', function($routeProvider) {
$routeProvider.when('/contacts', {
templateUrl: 'contacts/contacts.html',
controller: 'ContactsCtrl'
});
}])
.controller('ContactsCtrl', ['$scope', '$firebaseArray', function($scope, $firebaseArray) {
var rel = new Firebase('https://mycontact-app007.firebaseio.com/contacts');
$scope.contacts = $firebaseArray(rel);
console.log($scope.contacts);
}]);
Index.html - this the index file
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Mycontacts App</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="app.css">
<link rel="stylesheet" href="bower_components/foundation/css/foundation.css">
</head>
<body>
<div class="container">
<div class="row">
<div class="large-12 columns">
<h1>myContact</h1>
<hr>
</div>
</div>
<div ng-view></div>
</div>
<script src="bower_components/jquery/dist/jquery.js"></script>
<script src="lib/angular/angular.js"></script>
<script src="lib/angular-route/angular-route.js"></script>
<script src="bower_components/foundation/js/foundation.js"></script>
<script src="bower_components/firebase/firebase.js"></script>
<script src="bower_components/angularfire/dist/angularfire.js"></script>
<script src="app.js"></script>
<script src="contacts/contacts.js"></script>
</body>
</html>
showing ReferenceError- Firebase is not defined
at new (contacts.js:13)
i am trying to make CURD operation app
Haii friends, I need your help
I have a problem that I do not know, when I try to combine laravel and angular js, Can you guys help me.
"Error: [$injector:modulerr] http://errors.angularjs.org/1.6.5/$injector"
For more details I created a file index.php And this is his code :
<!DOCTYPE html>
<html ng-app="sample" lang="{{ config('app.locale') }}">
<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>Starter - Laravel & AngularJS</title>
<!-- Fonts -->
<link href="https://fonts.googleapis.com/css?family=Raleway:100,600" rel="stylesheet" type="text/css">
<title>Rainbow SDK for Web</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="shortcut icon" type="image/png" href="./res/appLogo.png"/>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans:400,300,600&subset=latin,cyrillic-ext,cyrillic">
<!-- <link rel="stylesheet" href="./resources/angular/js/components/connection/connectionCmp.css"> -->
<script src="{{ asset('resources/build/js/components.js') }}"></script>
<!-- <script src="./resources/angular/js/components/connection/connectionCmp.js"></script> -->
</head>
<body>
<!-- Demo specific part -->
<div class="flex-center position-ref full-height" ng-controller="sampleController">
<div class="content">
<div class="view page page-home" ng-view></div>
</div>
</div>
<!-- Angular Init Here -->
<script src="//api.openrainbow.com/sdk/web/libs/loader-sdk.min.js" data-main="./config.json"></script>
<!-- App JS Files - All Controllers -->
<script src="{{ asset('resources/angular/js/application.js') }}"></script>
<script src="{{ asset('resources/angular/js/MainController.js') }}"></script>
</body>
</html>
And this is application.js file for its route
var sample = angular.module('sample', ['ngRoute', 'ngAnimate']);
sample.config(function ($routeProvider, $httpProvider) {
$routeProvider.when('/dashboard', {
controller: 'sampleController',
templateUrl: '../partials/dashboard.html'
})
$routeProvider.otherwise({
redirectTo: '/dashboard',
templateUrl: 'resources/angular/partials/dashboard.html'
})
});
And this is MainController.js file for its controller
var sample = angular.module("sample", ["sdk"]);
sample.controller("sampleController", [
"$rootScope",
"rainbowSDK",
function($rootScope, sdk) {
"use strict";
console.log("[DEMO] :: Rainbow IM Application");
var onReady = function onReady() {
console.log("[DEMO] :: Rainbow SDK is ready!");
};
var onLoaded = function onLoaded() {
console.log("[DEMO] :: Rainbow SDK has been loaded!");
sdk.initialize().then(function() {
console.log("[DEMO] :: Rainbow SDK is initialized!");
}).catch(function() {
console.log("[DEMO] :: Something went wrong with the SDK...");
});
};
$rootScope.$on(sdk.RAINBOW_ONREADY, onReady);
$rootScope.$on(sdk.RAINBOW_ONLOADED, onLoaded);
sdk.useAngularEvents(true);
sdk.load();
return true;
}
]);
I hope my friends can help me,Thanks.
You need to move the dependency injection to the main module and remove it from the controller,
application.js
var sample = angular.module('sample', ['ngRoute', 'ngAnimate','sdk']);
MainController.js
var sample = angular.module("sample");
This is my code, and I want to catch changing in search input field, but jQuery "keyup" is not working. And I'm using Angular to manipulate my data. I tried to add default text input to my page, and everything worked fine.enter code here
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap-select live search</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.1/css/bootstrap-select.css" />
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.1/js/bootstrap-select.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script>
//angular stuff
var app = angular.module('app', []);
app.service('service', function(){
this.getCities = function (){
return ["Аксаковщина д. Минская обл., Минский р-н, Горанский с/с",
"Андреевщина д. Витебская обл., Оршанский р-н, Андреевщинский с/с",
"Антоновка д. Гомельская обл., Калинковичский р-н, Горбовичский с/с",
"Антоново д. Брестская обл., Барановичский р-н, Колпеницкий с/с"];
};
});
app.controller('ctrl', function ($scope, service){
$scope.cities = service.getCities();
});
//jquery stuff
$(document).ready(function (){
$('input').on('keyup', function() {
alert('keyup is fired!!!');
});
});
</script>
</head>
<body ng-app="app" ng-controller="ctrl">
<div id="destinationFrom">
<select id="selectDestinationFrom" class="selectpicker" data-live-search-style="startsWith" data-live-search="true">
<option ng-repeat="city in cities track by $index">{{city}}</option>
</select>
</div>
<input type="text"/>
</body>
</html>
Please use these css and js.You are using older version of css and js.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.1/css/bootstrap-select.css"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.1/js/bootstrap-select.js"></script>
I'm having some problems when I tried to open a calendar using jquery ui thru NgRoute Angularjs. I've tried removing ng-view tag and it works fine. i need it working with NgRoute.
index.html
<!DOCTYPE html>
<html ng-app="mainApp">
<head lang="en">
<title>AngularJS Routing</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
</head>
<body>
<li> Date Picker </li>
<div ng-app="mainApp">
<ng-view></ng-view>
</div>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular-route.min.js"></script>
<script type="text/javascript" src="main.js"></script>
</body>
</html>
main.jsp
(function() {
"use strict";
var mainApp = angular.module("mainApp", ['ngRoute']);
mainApp.config(function($routeProvider) {
$routeProvider
.when('/datePicker', {
templateUrl: 'DatePicker.html',
controller: 'DemoCtrl'
})
.otherwise({
redirectTo: '/index'
});
});
mainApp.controller('DemoCtrl', ['$scope', '$http', function ($scope, $http) {
//$('#datepicker1').datepicker();
}]);
})();
DatePicker.html
<!DOCTYPE html>
<html ng-app="mainApp">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.1/themes/black-tie/jquery-ui.css" />
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
<script src="main.js"></script>
<script>
$(function() {
$( "#datepicker1" ).datepicker();
});
</script>
</head>
<body>
<form>
<p>Fecha: <input id="datepicker1" type="text" ></p>
Main menu
</form>
</body>
</html>
http://plnkr.co/edit/Wk4zZo0WfoypMmaMgv4j
I will appreciate any help on this issue.
Thank you so much,
Ariel.
in DatePicker.html you dont need all tags again only the ones that will go inside ng-view:
<script>
$(function() {
$( "#datepicker1" ).datepicker();
});
</script>
<form>
<p>Fecha: <input id="datepicker1" type="text" ></p>
Main menu
</form>
And this will go inside index.html:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.1/themes/black-tie/jquery-ui.css" />
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
<script src="main.js"></script>
I dont know if it will sove your problem, but it is the correct thing to do...
Im trying to get info from this API :
In my main.js file I have this controller which is requesting an http request:
(function(){
var app = angular.module('provider',['provider-movies']);
app.controller('ProviderController',['$http',function($http){
var provider = this;
provider.movies =[];
$http.get('/http://private-5d90c-kevinhiller.apiary-mock.com/angular_challenge/horror_movies').succes(function(data){
provider.movies = data;
});
}]);
})();
Then in my html I'm trying to print the title of the movie like this:
<div ng-controller="ProviderController as provider">
<p>{{provider.movies.title}}</p>
</div>
But when i load the file on the browser it just shows this:
{{provider.movies.title}}
Angular is installed and working, if I add {{'hello '+'you'}} it prints **hello you**
Any ideas on why is this not working ?
Also , my html looks like this:
<!doctype html>
<html ng-app="provider">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></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">
<!-- Place favicon.ico in the root directory -->
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="bower_components/foundation/css/foundation.css">
<script src="bower_components/angular/angular.min.js"></script>
<link rel="stylesheet" href="css/main.css">
<script src="js/vendor/modernizr-2.8.3.min.js"></script>
</head>
<body>
<div ng-controller="ProviderController as provider">
<p>{{provider.movies.title}}</p>
<p>{{'hello'}}</p>
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/vendor/jquery-1.11.2.min.js"><\/script>')</script>
<script src="js/plugins.js"></script>
<script src="js/main.js"></script>
</body>
</html>
thanks!
You seem to have some typo and a missing closing parenthesis. If you looked at the console of your webbrowser you should definitely seen this.
Try this:
(function() {
var app = angular.module('provider', []);
app.controller('ProviderController', [ '$http', function($http) {
var provider = this;
provider.movies = [];
$http.get('http://private-5d90c-kevinhiller.apiary-mock.com/angular_challenge/horror_movies').success(function(data) {
provider.movies = data;
});
}]);
})();
Also in your markup the provider.movies is an array which doesn't contain a title property:
<div ng-controller="ProviderController as provider">
<p>{{provider.movies}}</p>
</div>
If you wanted to have the title you may consider looping through them:
<p ng-repeat="movie in provider.movies">
{{movie.title}}
</p>
And here's the working plunkr.