I'm trying to use angularJS in an old asp.net mvc appication.
This application uses a ViewMasterPage
If I load the angularjs reference in the viewpage, it works just fine:
<%# Page Language="C#" Inherits="System.Web.Mvc.ViewPage<dynamic>" %>
<%: Scripts.Render("~/bundles/ng") %>
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<div ng-app="">
<p>{{ "Hello" + " World" }}</p>
<p>{{ 2 + 4 }}</p>
</div>
</script>
</html>
OUTPUT ANGULAR OK
but when I try lo load the reference to angular JS in the view master page, it doesnt work.
<script src="<%= Url.Content("~/Scripts/jquery-1.8.2.js") +"?"+ version %>" type="text/javascript"></script>
<script src="<%= Url.Content("~/Scripts/jquery-ui-1.9.1.js") +"?"+ version %>" type="text/javascript"></script>
<script src="<%= Url.Content("~/Scripts/json2.min.js") +"?" + version%>" type="text/javascript"></script>
<script src="<%= Url.Content("~/Scripts/angular.js") +"?"+ version %>" type="text/javascript"></script>
I know for sure, that is loading the script file, because if I load in both viewmasterpage and viewpage I'm getting this error:
WARNING: Tried to load angular more than once.
Please help me.
Thank you in advance.
Related
I'm new to AngularJS.
I started to write a basic code, but the result doesn't give me as expected. The result give me as 10+20={{ 10+20 }}. But instead I need to see 10+20=30
Here is what I tried.
<!DOCTYPE html>
<html>
<head>
<script src="lib/angular.min(2).js"></script>
</head>
<body data-ng-app>
<div>
10+20={{ 10+20 }}
</div>
</body>
</html>
I'm using eclipse. The angular.min(2).js file is in lib folder under WebContent. The HTML page is under WebContent folder.
Check your angular.js script file is loading properly by looking at the network tab. The following works fine.
DEMO
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
</head>
<body data-ng-app>
<div>
10+20={{ 10+20 }}
</div>
</body>
</html>
Remove WebContent from the URL. If your html file is in WebContent directory, your URL should be
<script src="lib/angular.min(2).js"></script>
have you tried to use the script in js like this:
<body ng-app="main">
10+20={{10+20}}
</body>
<script>
var app=angular.module("main",[])
</script>
I am having some trouble getting the popover element to work in an angular app using ui.bootstrap - here is some code:
in the app.js file, I am requiring ui.bootstrap
angular.module('developerPortalApp', [
'ui.bootstrap'
])
The html element I am trying to attach a popover to
<div ng-controller="LoginCtrl">
how do I register?
</div>
The popover content isn't going to be dynamic so there isn't anything in the controller for that. This is my first time using angular-bootstrap, so, is there something simple that I'm missing?
Any help is very much appreciated.
May be you are missing some script file:-
Here is working example of your question:-
<!doctype html>
<html ng-app="ui.bootstrap.demo">
<head>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.js"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.12.0.js"></script>
<script src="example.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div ng-controller="LoginCtrl">
how do I register?
</div>
</body>
</html>
http://plnkr.co/edit/E2LbaCoHKHKzifeL5Hny?p=preview
I'm a newby in AngularJS, and I have one question: because Angular is client-side framework, it must work without any web-server, but this code doesn't work:
<!doctype html>
<html ng-app="learningApp">
<body>
I can add: {{ 1+2 }}.
<script src="angular.min.js"></script>
</body>
</html>
I see just "I can add: {{ 1+2 }}." in the browser window. What's the trouble? Thanks.
The problem is that you are using "learningApp" but you are not including any javascript having learningApp. If you open the page in firefox and then check firebug you will get following error which complains about not finding "learningApp":
Error: [$injector:modulerr] http://errors.angularjs.org/1.2.26/$injector/modulerr?p0=learningApp&p1=%5B%24injector%3Anomod%5D%20http%3A%2F%2Ferrors.angularjs.org%2F1.2.26%2F%24injector%2Fnomod%3Fp0%3DlearningApp%0AC%2F%3C%40file%3A%2F%2F%2Fhome%2Fansumanb%2FDesktop%2Flogin_with_angular%2Fexisting%2Flib%2Fangular%2Fangular.min.js%3A6%3A443%0AZc%2Fb.module%3C%2F%3C%2Fb%5Be%5D%3C%40file%3A%2F%2F%2Fhome%2Fansumanb%2FDesktop%2Flogin_with_angular%2Fexisting%2Flib%2Fangular%2Fangular.min.js%3A21%3A1%0AZc%2Fb.module%3C%2F%3C%40file%3A%2F%2F%2Fhome%2Fansumanb%2FDesktop%2Flogin_with_angular%2Fexisting%2Flib%2Fangular%2Fangular.min.js%3A20%3A376%0Ae%2F%3C%40file%3A%2F%2F%2Fhome%2Fansumanb%2FDesktop%2Flogin_with_angular%2Fexisting%2Flib%2Fangular%2Fangular.min.js%3A33%3A265%0Ar%40file%3A%2F%2F%2Fhome%2Fansumanb%2FDesktop%2Flogin_with_angular%2Fexisting%2Flib%2Fangular%2Fangular.min.js%3A7%3A288%0Ae%40file%3A%2F%2F%2Fhome%2Fansumanb%2FDesktop%2Flogin_with_angular%2Fexisting%2Flib%2Fangular%2Fangular.min.js%3A33%3A207%0Agc%40file%3A%2F%2F%2Fhome%2Fansumanb%2FDesktop%2Flogin_with_angular%2Fexisting%2Flib%2Fangular%2Fangular.min.js%3A36%3A307%0Afc%2Fc%40file%3A%2F%2F%2Fhome%2Fansumanb%2FDesktop%2Flogin_with_angular%2Fexisting%2Flib%2Fangular%2Fangular.min.js%3A18%3A168%0Afc%40file%3A%2F%2F%2Fhome%2Fansumanb%2FDesktop%2Flogin_with_angular%2Fexisting%2Flib%2Fangular%2Fangular.min.js%3A18%3A380%0AXc%40file%3A%2F%2F%2Fhome%2Fansumanb%2FDesktop%2Flogin_with_angular%2Fexisting%2Flib%2Fangular%2Fangular.min.js%3A17%3A422%0A%40file%3A%2F%2F%2Fhome%2Fansumanb%2FDesktop%2Flogin_with_angular%2Fexisting%2Flib%2Fangular%2Fangular.min.js%3A215%3A30%0Aa%40file%3A%2F%2F%2Fhome%2Fansumanb%2FDesktop%2Flogin_with_angular%2Fexisting%2Flib%2Fangular%2Fangular.min.js%3A145%3A67%0Aoe%2Fc%2F%3C%40file%3A%2F%2F%2Fhome%2Fansumanb%2FDesktop%2Flogin_with_angular%2Fexisting%2Flib%2Fangular%2Fangular.min.js%3A31%3A223%0Ar%40file%3A%2F%2F%2Fhome%2Fansumanb%2FDesktop%2Flogin_with_angular%2Fexisting%2Flib%2Fangular%2Fangular.min.js%3A7%3A288%0Aoe%2Fc%40file%3A%2F%2F%2Fhome%2Fansumanb%2FDesktop%2Flogin_with_angular%2Fexisting%2Flib%2Fangular%2Fangular.min.js%3A31%3A207%0A
...N.stringify(arguments[c]):arguments[c]);return Error(a)}}function Pa(b){if(null=...
Just remove learningApp, as you are not including one, it will work. (DEMO)
<!doctype html>
<html ng-app>
<body>
I can add: {{ 1+2 }}.
<script src="angular.min.js"></script>
</body>
</html>
Or else you can create an app.js and include the js. (DEMO)
<!doctype html>
<html ng-app="learningApp">
<body>
I can add: {{ 1+2 }}.
<script src="angular.min.js"></script>
<script src="app.js"></script>
</body>
</html>
Have following in app.js
angular.module('learningApp', []);
I'm getting started with kendo & angular - free version - and I have a page that renders and behaves okay, but throws an error in the background.
I get an
"Uncaught TypeError: Cannot read property 'jQuery' of undefined" in /js/kendo.angular.min.js:16
I think I have a wrong dependency / am missing one, but I'm not sure which. The kendo scripts and css are from the core download page http://www.telerik.com/download/kendo-ui-core
Whats going on here?
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Kendo With Angular</title>
<link href="kendo/styles/kendo.common.min.css" rel="stylesheet" />
<link href="kendo/styles/kendo.default.min.css" rel="stylesheet" />
<script src="kendo/js/jquery.min.js"></script>
<script src="kendo/js/angular.min.js"></script>
<script src="kendo/js/kendo.angular.min.js"></script>
<script src="kendo/js/kendo.ui.core.min.js"></script>
</head>
<body ng-app="KendoDemo">
<div ng-controller="Demo">
{{hello}}
<input kendo-date-picker k-ng-model="dateObject" />
{{date | date:'fullDate'}}
{{dateObject | date:'fullDate'}}
</div>
<script>
angular.module('KendoDemo',['kendo.directives'])
.controller('Demo', function($scope) {
$scope.hello = 'Hello World';
})
</script>
</body>
</html>
The kendo.ui.core.js script needs to go before the kendo.angular.js script:
proper script order
<script src="kendo/js/jquery.min.js"></script>
<script src="kendo/js/angular.min.js"></script>
<script src="kendo/js/kendo.ui.core.min.js"></script>
<script src="kendo/js/kendo.angular.min.js"></script>
I've been sitting with this problem for a few hours and found a few answers, none of which have worked for me so far (AngularJs ReferenceError: angular is not defined). For some reason I can't seem to get my app to use Angular.JS. After adding the required js-files, my main file looks like this:
<!DOCTYPE html>
<html ng-app="AppName">
<head>
<title></title>
<link rel="stylesheet" href="/stylesheets/main.css">
</head>
<body>
<!-- Wrapper-->
<div id="wrapper">
<div id="page-content-wrapper">
<div class="page-content inset" ng-view>
</div>
</div>
</div>
<!-- /WRAPPER-->
<!-- ANGULAR CUSTOM -->
<script src="libs/angular/angular.js"></script>
<script src="libs/angular-route/angular-route.min.js"></script>
<script src="javascripts/AngularApp.js"></script>
<script src="javascripts/appRoutes.js"></script>
<script src="javascripts/controllers/MainCtrl.js"></script>
<script src="javascripts/controllers/SettingsCtrl.js"></script>
<script src="javascripts/services/SettingsService.js"></script>
</body>
</html>
When I run the app it never seems to finish loading (see the image: http://imgur.com/FIAH4tH) and then crashes. In Firefox, I get the following error: http://imgur.com/UT3g7wY
Does anyone know how I can solve this problem?
--EDIT--
I've updated the position of the scripts in the app.
My AngularApp.js file looks like this:
angular.module('AppName', ['ngRoute', 'appRoutes', 'MainCtrl', 'SettingsCtrl', 'SettingsService']);
If your module AppName is defined in AngularApp.js, that needs to come before MainCtrl js.
Are your .js files separate angular modules? If so, they should not be listed as modules in your angular.module dependencies.
angular.module('AppName', ['ngRoute']);
Definitely include any of the libs/ files before your own custom code.
So put <script src="libs/angular/angular.js"></script> and <script src="libs/angular-route/angular-route.min.js"></script> before your other javascripts files and you should find the problem fixed.
I was having the same problem. Declaring the angular script tag in html's <head> tag worked for me. Therefore:
<!doctype html>
<html lang="en" ng-app>
<head>
<meta charset="utf-8">
<title>AngularJS tryout</title>
<script src="../../node_modules/angular/angular.js"></script>
</head>
<body>
<h1>AngularJS tryout</h1>
<p>Nothing here so {{ 'far' + '!' }}</p>
</body>
</html>