I tried all the solutions(Stackoverflow,etc..) but none worked for me.
All scripts Were loaded, i using vs 2015, i'm trying to put together a menu.
Mobile angular version 1.2
Angular 1.4.2
i call my function (start in pageteste.js)
Thanks for all
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery Mobile Web App</title>
<link href="css/mobile-angular-ui-base.min.css" rel="stylesheet" />
<script src="scripts/angular.min.js"></script>
<script src="scripts/angular-route.min.js"></script>
<script src="scripts/angular-touch.min.js"></script>
<script src="scripts/angular-resource.min.js"></script>
<script src="scripts/mobile-angular-ui.min.js"></script>
<script src="cordova.js" type="text/javascript"></script>
<script src="scripts/pageteste.js"></script>
<script type="text/javascript">
function start() {
var app = angular.module('AngularUIBucketApp', [
"ngRoute",
"ngTouch",
"mobile-angular-ui"
]);
/* angular.module('myApp', [
"ngRoute",
"mobile-angular-ui",
]).config(function ($routeProvider) {
$routeProvider.when('/', {
// ...
});
// ...
});*/
}
</script>
</head>
<body ng-app="AngularUIBucketApp">
// go
</body>
</html>
Like #Tom stated you need to actually call your start() function.
function start() {
var app = angular.module('AngularUIBucketApp', [
"ngRoute",
"ngTouch",
"mobile-angular-ui"
]);
}
start();
Solution: I need install Angular.js on Nuget "right button->Manege NugGet Packages"
Related
the html code - which call the required libraries
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<script type="text/javascript" src="https://www.gstatic.com/firebasejs/3.0.0/firebase.js"></script>
<script type="text/javascript" src="https://cdn.firebase.com/libs/angularfire/1.2.0/angularfire.min.js"></script>
<script type="text/javascript" src="JS/app.js"></script>
</head>
<body ng-app="seworko">
<div ng-controller="users">
{{ 4+4 }}
</div>
</body>
</html>
the Javascript code
var app = angular.module("seworko", ["firebase"]);
var config = {
apiKey:"myKey",
authDomain:"myDomain.firebaseio.com",
databaseURL:"https://myUrl.firebaseio.com",
storageBucket:"myBucket.com"};
firebase.initializeApp(config);
app.controller("users", function($scope, $firebaseObject) {
try
{
const rootRef = firebase.database().ref().child('system');
const ref = rootRef.child('global');
this.global = $firebaseObject(ref);
}
catch(e)
{
alert(e);//type error a.ref is not a function
}
});
I am getting this error ->
type error a.ref is not a function !!
I don't know the reason for the error
I followed too many tutorials , and can't connect firebase with angularJS using angularfire
I have following code in my app.js in root directory /app.js
angular.module("ngClassifieds",[])
.controller("classifiedsCtrl", function($scope) {
$scope.name = "shekhar";
});
Currently this is working fine, then i shift my controller inside new directory components/classifiedCtrl.js like this
below is my app.js file
angular.module("ngClassifieds",[]);
below is my controller inside components/classifiedCtrl.js
(function () {
"use strict";
angular.module("ngClassifieds")
.controller("classifiedsCtrl", function($scope) {
$scope.name = "shekhar";
});
}) ();
Now it is gives me the error Error: [ng:areq] Argument 'classifiedsCtrl' is not a function, got undefined
I am using angular version 1.5.7
below is my index.html file
<!DOCTYPE html>
<html>
<head>
<title>ngClassifieds</title>
</head>
<body ng-app = "ngClassifieds" ng-controller="classifiedsCtrl">
<h1>{{name}}</h1>
<script src="node_modules/angular/angular.js"></script>
<script src="scripts/app.js"></script>
</body>
</html>
You need to include your controller file below app.js
<script src="scripts/app.js"></script>
<script src="scripts/components/classifiedCtrl.js"></script>
As I'm new to Angular, I expect to run in to issues however this issue seems to be repeating itself off and on.
As I'm following a tutorial on learning Angular here, I was learning about how to use expressions.
What I'm attempting to do is access an gem's attributes and display them on the webpage. However, the object values are not being accessed and it is just displaying as so:
{{store.product.name}}
${{store.product.price}}
{{store.product.description}}
Add to Cart
Where as I want it to display as:
Dodecahaderon
$2.95
. . .
Add to Cart
I thought it may be due to the videos using Angular1.2 and I'm using 1.4 however I'm not sure. What am I doing wrong and how can I properly display the object attributes?
Here is the code:
(function () {
var app = angular.module('store', []);
app.controller('StoreController', function(){
this.product = gem;
});
var gem = {
name: 'Dodecahaderon',
price: 2.95,
description: '. . . ',
canPurchase = true,
soldOut = true
};
})();
<!DOCTYPE html>
<html ng-app="store">
<head>
<link rel="stylesheet" type="text/css" href="bootstrap.min.css" />
</head>
<body ng-controller="StoreController as store">
<div ng-hide="store.product.soldOut">
<h1>{{store.product.name}}</h1>
<h2>${{store.product.price}}</h2>
<p>{{store.product.description}}</p>
<button ng-show="store.product.canPurchase">Add to Cart</button>
</div>
<script type="text/javascript" src="angular.min.js"></script>
<script type="text/javascript" src="app.js"></script>
</body>
</html>
Your angular library is not referenced correctly. Open your console window and make sure the angular script reference is actually working.
Currently gem is definied outside the scope of the controller. Also, as gem as an object you must change = to :
You need to change your code to this and it works
(function () {
var app = angular.module('store', []);
app.controller('StoreController', function(){
this.item = {
name: 'Dodecahaderon',
price: 2.95,
description: '. . . ',
canPurchase : true,
soldOut : true
};
});
})();
And your html to this:
<!DOCTYPE html>
<html ng-app="store">
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
</head>
<body ng-controller="StoreController as store">
<div ng-hide="store.product.soldOut">
<h1>{{store.item.name}}</h1>
<h2>${{store.item.price}}</h2>
<p>{{store.item.description}}</p>
<button ng-show="store.item.canPurchase">Add to Cart</button>
</div>
</body>
</html>
Also, you may need to replace your reference to angular from <script type="text/javascript" src="angular.min.js"></script> to <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
I try to display some variable of my controller, but the output is just {{UserCtrl.user}} instead of the content of UserCtrl.user.
I got the following file structure:
index.html
scripts/app.js
This is the code of index.html:
<!doctype html>
<html lang="en" ng-app="birdsnest">
<head>
<meta charset="utf-8">
<title>Birdsnest</title>
<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css">
<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap-theme.css">
</head>
<body>
<div ng-controller="UserController as UserCtrl">
{{UserCtrl.user}}
</div>
<script src="bower_components/jquery/dist/jquery.js"></script>
<script src="bower_components/bootstrap/dist/js/bootstrap.js"></script>
<script src="bower_components/angular/angular.js"></script>
<script src="scripts/app.js"></script>
</body>
</html>
scripts/app.js:
(function() {
var app = angular.module('birdsnest', []);
app.controller('UserController', ['scope', function($scope) {
$scope.user = 'Michael';
}]);
})();
Change this line:
app.controller('UserController', ['scope', function($scope) {
To:
app.controller('UserController', ['$scope', function($scope) {
Edit:
If you're using controllerAs then I think you should rewrite your code:
app.controller('UserController', function() {
this.user = 'Michael';
});
When you're using the ControllerAs syntax in your HTML, the values that end up getting bound to the controller instance is actually on your this object.
What this means is that your code that attaches user to the scope object is incorrect; instead you should do the following:
app.controller("UserController", function() {
this.user = "Michael";
});
I am using Arcgis Javascript API. API is built on dojo toolkit. So I need to use dojo features in API. I am preparing dojo config file as following.
var pathRegex = new RegExp("/\/[^\/]+$/");
var locationPath = location.pathname.replace(pathRegex, '');
var dojoConfig = {
async: true,
parseOnLoad: false,
baseUrl:"js/",
packages: [
{
name: "application",
location: locationPath + '/js/application'
}]
};
I created a bootstrapper.js like following.
require(["application/main", "dojo/domReady!"], function (application) {
console.log("bootstrapper is running");
application.Run();
})
And index.html file is like this.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Arcgis Javacsript API Samples</title>
<link rel="stylesheet" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.5/js/dojo/dijit/themes/claro/claro.css">
<link rel="stylesheet" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.5/js/esri/css/esri.css">
</head>
<body class="claro">
<div id="map"></div>
<script src="//js.arcgis.com/3.6/"></script>
<script src="js/application/djConfig.js"></script>
<script src="js/application/bootstrapper.js"></script>
</body>
</html>
My application is hosted on IIS and has addres like this htp://domain/Demo/Sample1/index.html
when I run application, this code giving error like following.
"NetworkError: 404 Not Found - http://js.arcgis.com/3.6/js/dojo/application/main.js"
If I set bootstrapper.js file as following, problem is solwing.
require(["js/application/main.js", "dojo/domReady!"], function (application) {
console.log("bootstrapper is running");
application.Run();
})
Try to change your script order in index.html file. Your config settings should load before CDN.
<div id="map"></div>
<script src="js/application/djConfig.js"></script>
<script src="//js.arcgis.com/3.6/"></script>
<script src="js/application/bootstrapper.js"></script>
</body>