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.
Related
I have an EXTJS6.5 application. I want to use variables in my index.html that come from a properties file. However the change of the values of these variables should not require a new build of the application. This means that the variable can be changed if required (Without the need to build the extjs code).
Can someone please help with this?
I have already gone thru other threads where index.html can have placeholders, but do not seem to have a concrete example.
This is my properties file (Runtime.js)
{
"appUrl": "http://myappurl.com",
"appId": "10"
}
Then I want to use these variables in my index.html as such:
This is my index.html
<!DOCTYPE HTML>
<html lang="fr">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=10, user-scalable=yes">
<meta name="description" content="MyApp">
<title>MyApp</title>
<link rel="icon" type="image/png" href="myicon.png">
<link rel="stylesheet" href="resources/dist/myapp-resources.min.css">
</head>
<body>
<div id="myapp-app-loading">
<div class="myapp-spinner"><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div>
</div>
<script type="text/javascript">
var Ext = Ext || {};
Ext.beforeLoad = function (tags) {
Ext.manifest = 'classic'; // this name must match a build profile name
};
</script>
<script src="Runtime.js"></script>
<!-- The line below must be kept intact for Sencha Cmd to build your application -->
<script id="microloader" data-app="6d7f3123-ffca-44d3-8ed2-14fr2w6be804" type="text/javascript" src="bootstrap.js"></script>
<script src="{{Runtime.appUrl}}/configuration/MyConstants.js"></script>
<script src="{{Runtime.appUrl}}/resources/mycharts/mycharts.js"></script>
<script src="{{Runtime.appUrl}}/resources/ckeditor/ckeditor.js"></script>
</body>
</html>
Will this work this way? Or pls suggest any better way to do this..thank you very much.
Given Runtime.js file has a syntax error. Is not valid javascript file.
Runtime.js should be:
window.appUrl="http://myappurl.com";
window.appId="10";
And you can use these variables like window.appUrl/window.appid in script block, not in html block.
You can do workaround to resolve the problem: You can generate includes from Runtime.js.
Example:
index.html
<!DOCTYPE HTML>
<html lang="fr">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=10, user-scalable=yes">
<meta name="description" content="MyApp">
<title>MyApp</title>
<link rel="icon" type="image/png" href="myicon.png">
<link rel="stylesheet" href="resources/dist/myapp-resources.min.css">
</head>
<body>
<div id="myapp-app-loading">
<div class="myapp-spinner"><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div>
</div>
<script type="text/javascript">
var Ext = Ext || {};
Ext.beforeLoad = function (tags) {
Ext.manifest = 'classic'; // this name must match a build profile name
};
</script>
<!-- The line below must be kept intact for Sencha Cmd to build your application -->
<script id="microloader" data-app="6d7f3123-ffca-44d3-8ed2-14fr2w6be804" type="text/javascript" src="bootstrap.js"></script>
<script src="Runtime.js"></script>
</body>
</html>
Runtime.js
window.appUrl="http://myappurl.com";
window.appId="10";
var script = document.createElement("script")
script.type = "text/javascript";
script.src = window.appUrl+"/configuration/MyConstants.js";
var script2 = document.createElement("script")
script2.type = "text/javascript";
script2.src = window.appUrl+"/resources/mycharts/mycharts.js";
var script3 = document.createElement("script")
script3.type = "text/javascript";
script3.src = window.appUrl+"/resources/ckeditor/ckeditor.js";
document.getElementsByTagName("body")[document.getElementsByTagName("body").length-1].appendChild(script);
document.getElementsByTagName("body")[document.getElementsByTagName("body").length-1].appendChild(script2);
document.getElementsByTagName("body")[document.getElementsByTagName("body").length-1].appendChild(script3);
Updated 2019-07-17:
If you want to require script before application launches you must add reference to script in app.json in js block (Which can't be done because you want to personalize the source of scripts).
Second option is change in app.js you can do Ext.Loader.loadScript like:
Ext.Loader.loadScript({
url: 'my.js',
onLoad: function(){
Ext.application({
name: 'Fiddle',
extend: 'Fiddle.Application',
autoCreateViewPort: false
});
},
onError: function(){
console.log('error');
}
});`
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");
i am trying to include the view page in angularjs but it is working.
Here is my code
rootService.js
var viewCustomerModule = angular.module('viewCustomer',['ngRoute','ngResource']);
viewCustomerModule.config(function($routProvider){
$routeProvider
.when('/CustomerList',{
templateUrl: 'resources/view/checker.jsp',
controller: 'checkerController'
})
})
viewCustomer.js
var viewCustomerModule = angular.module('viewCustomer',['ngRoute','ngResource']);
viewCustomerModule.controller('checkerController', function($scope) {
$scope.headingTitle = "List Items";
});
masterPage.jsp
<%# page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<%# taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html ng-app="viewCustomer">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Add Company</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular.min.js"></script>
<script src="https://code.angularjs.org/1.4.8/angular-route.js"></script>
<script src="https://code.angularjs.org/1.4.4/angular-resource.js"></script>
<script src="<c:url value="/resources/js/viewCustomer.js"/>"></script>
<script src="<c:url value="/resources/js/rootService.js"/>"></script>
</head>
<body>
<div >
ViewCustomer
<div ng-view></div>
</div>
</body>
</html>
checker.jsp
<h3 ng-controller="checkerController">{{headingTitle}}</h3>
Above code i used but it is not working in browser console error is
Error: [$injector:modulerr] http://errors.angularjs.org/1.4.4/$injector/modulerr?p0=viewCustomer&p1=%5B%24injector%3Aunpr%5D%20http%3A%2F%2Ferrors.angularjs.org%2F1.4.4%2F%24injector%2Funpr%3Fp0
can any one help me to fix this
Please change $routProvider to $routeProvider in your rootService.js file. So your rootService.js will look like this:
var viewCustomerModule = angular.module('viewCustomer',['ngRoute','ngResource']);
viewCustomerModule.config(function($routeProvider){
$routeProvider
.when('/CustomerList',{
templateUrl: 'resources/view/checker.jsp',
controller: 'checkerController'
})
})
In viewCustomer.js you dont have to declare the module again, change it as,
// remove this line var viewCustomerModule = angular.module('viewCustomer',['ngRoute','ngResource']);
viewCustomerModule.controller('checkerController', function($scope) {
$scope.headingTitle = "List Items";
});
also change the order as,
<script src="<c:url value="/resources/js/rootService.js"/>"></script>
<script src="<c:url value="/resources/js/viewCustomer.js"/>"></script>
I think it has something to do with the way my files are ordered but I can't figure out which ones are causing the problem.
angular.module('app')
.controller('langCtrl', function($scope, languageService){
$scope.submit = function(model) {
console.log(model);
languageService.analyzeDocument(model)
}
});
<html lang="en" ng-app="app" class="no-js"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>WIT</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="images/computer.ico"/>
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<!-- 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">
<link rel="stylesheet" href="app.css">
</head>
<body ng-controller="langCtrl">
<div class="header">
RecommendHER
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular.min.js"></script>
<script src="app.js"></script>
<script src="languageService.js"></script>
<script src="langCtrl.js"></script>
</body>
</html>
I put the index.html file and my controller in the snippet. I also have a service on the save level as app.js and the controller file. Here is the code:
angular.module('app')
.service('languageService', function($resource) {
var apiUrl = 'http://xxx.compute-1.amazonaws.com';
var languageResource = $resource(apiUrl + {}, {
analyzeDocument: {
method: 'POST',
url: apiUrl + '/analyze_document?file=:text'
},
analyzeWord: {
method: 'POST',
url: apiUrl + '/recommend?word=":word"'
}
});
return {
analyzeDocument: function(data) {
return languageResource.analyzeDocument({data:text}).$promise;
},
analyzeWord: function(data) {
return languageResource.analyzeWord({data:word}).$promise;
}
};
});
Here is my app.js file:
angular.module('app', [
]);
You need to add empty dependencies to your module,
angular.module('app',[])
EDIT
Change the order in index.html to make your module load first,
<script src="app.js"></script>
<script src="languageService.js"></script>
<script src="langCtrl.js"></script>
Have you defined the 'app' module with two parameters yet:
angular.module('app', []).run(function() {});
The one parameter version expects app to already exist in order for things to be included as part of the module.
Also, ensure that the app.js file is loaded first.
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: